dir=rtl para texto da direita para a esquerda
Ative o layout RTL para árabe, hebraico e outros idiomas RTL.
dir=rtl para texto da direita para a esquerda é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que dir faz
O atributo dir declara a direção de base do texto de um elemento. dir="ltr" (da esquerda para a direita, o padrão da maioria dos idiomas) ou dir="rtl" (da direita para a esquerda, para árabe, hebraico, persa e urdu).
Definindo em html para RTL em todo o site
Em sites em árabe, hebraico, persa e urdu, defina dir="rtl" no elemento raiz. Isso inverte o fluxo padrão de cada bloco: o texto é alinhado à direita, as listas recuam para a direita, as barras de rolagem vão para a esquerda e os layouts se espelham automaticamente com CSS moderno.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Texto bidirecional
Textos com direções mistas (árabe com nomes de marcas em inglês incorporados) seguem automaticamente o Algoritmo bidirecional do Unicode. A direção de base (definida por dir) controla como os segmentos unidirecionais são organizados no nível da linha; sequências individuais de caracteres seguem a direção natural de seus próprios sistemas de escrita.
Propriedades lógicas do CSS
O CSS moderno usa propriedades lógicas que se adaptam à direção: margin-inline-start (esquerda em LTR, direita em RTL), padding-inline-end, border-inline-start. Substituir esquerda/direita por início/fim permite que uma única folha de estilos atenda às duas direções.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox e Grid se adaptam automaticamente
A direção das linhas do Flexbox respeita dir: em RTL, os itens fluem da direita para a esquerda. As colunas do modelo de Grid também são invertidas. Isso significa que a maioria dos layouts escritos com flex ou grid funciona em RTL sem nenhum CSS específico para a direção — o layout moderno independe da direção.
Ícones que devem ser invertidos
Ícones direcionais, como a seta de voltar, a seta de avançar e desfazer/refazer, devem ser invertidos em RTL. Use CSS transform: scaleX(-1) dentro de [dir="rtl"] ou forneça variantes SVG separadas para RTL. Ícones não direcionais, como pesquisa, configurações e engrenagem, permanecem iguais.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Alinhamento do texto
Prefira text-align: start a text-align: left — start corresponde à esquerda em LTR e à direita em RTL. O mesmo vale para end. O alinhamento sensível à direção elimina uma categoria de erros ao adicionar suporte a RTL.
Substituição de dir por elemento
Defina dir="auto" em um elemento para permitir que o navegador detecte a direção a partir do primeiro caractere com direção forte: <p dir="auto">{user.name}</p> lida com nomes enviados por usuários que podem estar em árabe, inglês ou misturados, sem tratamentos especiais.
Incorporação bidirecional
Os elementos bdi (isolamento bidirecional) e bdo (substituição bidirecional) oferecem controle detalhado sobre como o algoritmo bidirecional trata um texto específico — algo útil ao reproduzir fielmente uma entrada do usuário ou forçar uma direção específica para um trecho de código dentro de um texto contínuo.
Campos de formulário
Os campos de entrada herdam dir do elemento pai. Para textos fornecidos pelo usuário cuja direção varia, como em um aplicativo de conversa com usuários multilíngues, defina dir="auto" em cada campo para que ele seja exibido corretamente com base em seu conteúdo.
Testando layouts RTL
Os navegadores permitem visualizar RTL definindo temporariamente document.documentElement.dir = "rtl" no console do DevTools. Verifique a orientação dos ícones, o preenchimento e as margens, a posição da barra de rolagem e se nenhum elemento usa esquerda/direita fixos onde deveria usar início/fim.
A direção do CSS difere da direção do layout
A propriedade direction do CSS e o atributo dir do HTML têm o mesmo efeito na maior parte do layout. Prefira o atributo HTML porque tecnologias assistivas, sistemas de envio de e-mail e outros consumidores o leem, enquanto a propriedade CSS afeta somente a renderização nos navegadores.
Verificação de conhecimento
Por que propriedades lógicas do CSS, como margin-inline-start, são preferíveis a margin-left ao oferecer suporte a idiomas RTL?
Resumo
dir="rtl" em <html> inverte a direção de base em sites em árabe, hebraico, persa e urdu. As propriedades lógicas do CSS (margin-inline-start, padding-block-end) se adaptam automaticamente. Layouts de Flexbox e Grid se espelham sem alterações. Inverta os ícones direcionais, use text-align: start/end e use dir="auto" para conteúdo do usuário cuja direção seja desconhecida.
Perguntas Frequentes
A aula “dir=rtl para texto da direita para a esquerda” é grátis?
Sim — o texto completo de “dir=rtl para texto da direita para a esquerda” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “dir=rtl para texto da direita para a esquerda”?
Ative o layout RTL para árabe, hebraico e outros idiomas RTL. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “dir=rtl para texto da direita para a esquerda”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O atributo lang e os leitores de tela
- dir=rtl para texto da direita para a esquerda
- Os elementos bdi e bdo
- charset e tratamento de Unicode: caracteres especiais