Testador de Modos de Escrita
Teste como o texto é renderizado em diferentes modos de escrita, direções e orientações de texto do CSS. Escolha entre horizontal-tb, vertical-rl e vertical-lr, alterne entre as direções LTR e RTL e defina a orientação do texto para layouts verticais. Insira seu próprio texto ou use uma amostra, ajuste o tamanho da fonte e veja uma pré-visualização ao vivo com saída CSS copiável. Totalmente privado, 100% grátis e sem cadastro.
Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.
Preview
.writing-mode-demo {
writing-mode: horizontal-tb;
direction: ltr;
font-size: 18px;
}Por que usar nosso testador de modos de escrita?
- Teste todos os modos de escrita lado a lado: compare instantaneamente os modos de escrita CSS horizontal-tb, vertical-rl e vertical-lr. A vista comparativa mostra os três modos simultaneamente, para que você veja exatamente como seu texto é renderizado em cada layout sem ficar alternando entre eles.
- Suporte às direções LTR e RTL: teste o texto nas direções da esquerda para a direita (LTR) e da direita para a esquerda (RTL). Alterne entre as direções com um clique para ver como seu conteúdo flui para públicos de diferentes idiomas, incluindo os alfabetos árabe, hebraico e persa.
- Processamento 100% privado no navegador: todas as pré-visualizações de modos de escrita são renderizadas inteiramente no seu navegador usando CSS nativo. Seu texto nunca é enviado a qualquer servidor, nunca é armazenado e nunca é transmitido a lugar algum. Seu conteúdo permanece completamente privado.
- Grátis para sempre, sem cadastro: teste combinações ilimitadas de modos de escrita sem custo algum. Sem níveis premium, sem limites de uso e sem cobranças ocultas. Use o testador de modos de escrita em projetos pessoais ou comerciais sem criar uma conta.
Casos de uso comuns do testador de modos de escrita
- Design de sites multilíngues: crie layouts que suportem sistemas de escrita horizontal e vertical. Teste como seu conteúdo em japonês, chinês ou coreano flui no modo vertical-rl ao lado do conteúdo em inglês no modo horizontal-tb para designs web verdadeiramente internacionais.
- Desenvolvimento de layouts RTL: desenvolva e teste interfaces da direita para a esquerda (RTL) para sites em árabe e hebraico. Alterne rapidamente entre direções LTR e RTL para verificar se o layout espelha corretamente a navegação, o alinhamento do texto e a ordem de leitura.
- Testes de componentes de interface para texto vertical: teste como componentes de interface como botões, rótulos, menus de navegação e títulos de barras laterais ficam quando renderizados com modos de escrita verticais. Garanta espaçamento, alinhamento e legibilidade adequados antes de implantar em produção.
- Publicação digital e e-books: visualize como publicações digitais e e-books são renderizados em modos de escrita verticais. Teste conteúdo com vários alfabetos, incluindo japonês, chinês e inglês, para garantir orientação do texto e fluxo de leitura corretos em diferentes layouts.
- Pesquisa e educação tipográfica: aprenda e ensine as diferenças entre os modos de escrita, as orientações de texto e os valores de direção do CSS. Veja exemplos visuais em tempo real de como cada propriedade altera o layout do texto, tornando-o ideal para o ensino de CSS e oficinas de tipografia.
- Geração de código CSS para produção: gere trechos CSS limpos e prontos para produção para suas implementações de modos de escrita. Quando encontrar a combinação perfeita, copie as propriedades CSS diretamente para suas folhas de estilo com um clique.
O que são modos de escrita CSS?
Os modos de escrita CSS definem a direção em que o texto flui em uma página web. A propriedade CSS writing-mode controla se o texto corre na horizontal (da esquerda para a direita) ou na vertical (de cima para baixo). Combinados com as propriedades direction e text-orientation, os modos de escrita possibilitam suporte total aos diversos sistemas de escrita do mundo - do inglês e árabe ao japonês e mongol - tudo dentro de um único layout de página web.
Como funciona nosso testador de modos de escrita
- Selecione um modo de escrita: escolha entre os três valores CSS de writing-mode - horizontal-tb (layout horizontal padrão), vertical-rl (vertical da direita para a esquerda, tradicional do Leste Asiático) ou vertical-lr (vertical da esquerda para a direita, escrita moderna ou mongol).
- Configure a direção e a orientação: defina a direção do texto como LTR ou RTL e, para os modos verticais, escolha a orientação do texto - mixed (padrão), upright (todos os caracteres permanecem verticais) ou sideways (todos os caracteres rotacionados).
- Visualize e copie: insira seu próprio texto ou use uma amostra, ajuste o tamanho da fonte e veja a pré-visualização ao vivo. O bloco de saída CSS mostra o conjunto completo de propriedades pronto para copiar nas suas folhas de estilo.
Propriedades CSS principais explicadas
- writing-mode: a propriedade principal que define a direção do fluxo de blocos. horizontal-tb é o padrão para a maioria dos idiomas. vertical-rl faz o texto fluir de cima para baixo com linhas da direita para a esquerda. vertical-lr faz fluir de cima para baixo com linhas da esquerda para a direita.
- direction: controla a direção base em linha (ltr ou rtl). Nos modos verticais, direction afeta a ordem das linhas, não a dos caracteres. Essencial para suporte a árabe e hebraico.
- text-orientation: só se aplica em modos de escrita verticais. mixed (padrão) gira os caracteres latinos e cirílicos em 90° enquanto mantém os caracteres CJK na vertical. upright mantém todos os caracteres na orientação normal. sideways gira todos os caracteres em 90°.
Privacidade, segurança e disponibilidade
Todas as pré-visualizações de modos de escrita são renderizadas inteiramente no seu navegador usando CSS nativo. Seu texto nunca sai do seu dispositivo: não é enviado a nenhum servidor, nem armazenado, nem transmitido. O testador de modos de escrita é completamente gratuito, sem cadastro, sem limites de uso e sem recursos premium. Teste combinações ilimitadas de modos de escrita para projetos pessoais ou comerciais.
Perguntas frequentes
Um testador de modos de escrita CSS é uma ferramenta baseada no navegador que permite visualizar como o texto é renderizado em diferentes modos de escrita, direções e orientações de texto do CSS. Nosso testador de modos de escrita oferece suporte aos três valores de writing-mode (horizontal-tb, vertical-rl, vertical-lr), às direções LTR e RTL e aos valores de text-orientation (mixed, upright, sideways), com pré-visualização ao vivo e saída CSS copiável.
Selecione um modo de escrita entre as três opções (horizontal-tb, vertical-rl, vertical-lr), escolha uma direção (LTR ou RTL) e, para os modos verticais, selecione uma orientação de texto (mixed, upright, sideways). Insira seu próprio texto ou clique em um botão de texto de exemplo, ajuste o tamanho da fonte e veja a pré-visualização ao vivo atualizar na hora. Ative a Vista Comparativa para ver os três modos lado a lado.
Japonês tradicional, chinês (tradicional) e coreano são os principais idiomas que usam modos de escrita verticais (vertical-rl). No layout vertical, o texto flui de cima para baixo e as linhas avançam da direita para a esquerda. A tipografia moderna do Leste Asiático costuma misturar escrita horizontal e vertical, e os modos de escrita CSS lidam com ambas perfeitamente com uma única mudança de propriedade.
Sim. Todas as pré-visualizações de modos de escrita são renderizadas inteiramente no seu navegador usando CSS nativo. Seu texto nunca é enviado a qualquer servidor, nunca é armazenado e nunca é transmitido. O testador de modos de escrita processa tudo localmente no seu dispositivo para total privacidade e segurança dos dados.
text-orientation: mixed (o padrão) gira os caracteres latinos e cirílicos em 90° no sentido horário, mantendo os caracteres CJK na vertical em sua orientação de leitura normal. text-orientation: upright força todos os caracteres a serem exibidos em sua orientação vertical normal, sem rotação, o que pode dificultar a leitura do texto latino, mas preserva a aparência natural dos caracteres CJK.
Sim. A saída CSS usa propriedades padrão e bem suportadas: writing-mode, direction e text-orientation. Todos os navegadores modernos suportam essas propriedades. Basta copiar o trecho CSS ou o estilo em linha e colá-lo diretamente nas suas folhas de estilo para uso imediato em produção.
Sim. O Testador de Modos de Escrita é 100% gratuito, sem cadastro, sem recursos premium e sem limites de uso. Teste combinações ilimitadas de modos de escrita sem restrições nem custos ocultos. Não há anúncios bloqueando a interface.
A Vista Comparativa exibe os três modos de escrita - horizontal-tb, vertical-rl e vertical-lr - em um layout de três colunas. Cada coluna mostra o rótulo da propriedade CSS e uma descrição do modo. Isso facilita a comparação de como o mesmo texto é renderizado em cada layout, ajudando você a escolher o melhor modo de escrita para seu conteúdo.