0Pricing
CSS Academy · Aula

Propriedades Lógicas em Layouts RTL

Crie um layout verdadeiramente bidirecional que se inverte automaticamente para árabe e hebraico usando propriedades lógicas.

Propriedades Lógicas em Layouts RTL é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Configurando RTL no HTML

Declare RTL no HTML com o atributo dir e o lang correspondente:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

dir="rtl" no CSS

Você também pode definir a direção no CSS — útil para testes ou seções parcialmente em RTL:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

Testando a alternância LTR/RTL

Um teste rápido: adicione dir="rtl" a <html>. Com propriedades lógicas, o layout deve ser espelhado corretamente. Com propriedades físicas, você verá o que precisa ser corrigido.

O que se adapta automaticamente

Quando dir="rtl" é definido, estes elementos são invertidos automaticamente com as propriedades lógicas:

  • Alinhamento do texto (start/end)
  • Margens e preenchimentos (inline-start/end)
  • Bordas (inline-start/end)
  • Flutuações (inline-start/end)
  • Posicionamento (inset-inline-start/end)

O que NOT se adapta automaticamente

Mesmo com propriedades lógicas, estes elementos exigem atenção em RTL:

  • Imagens de fundo com conteúdo direcional
  • Ícones SVG cujo significado depende da direção (setas, chevrons)
  • Transformações como translateX() — use translateX(calc(-1 * var(--offset))) com um sinalizador de direção
  • Posicionamento absoluto com valores explícitos em pixels

Espelhamento de ícones SVG

CSS oferece uma maneira simples de inverter ícones direcionais em RTL:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

Variável CSS sensível à direção

Um truque com variável CSS para valores sensíveis à direção:

<div dir="rtl" class="drawer">Drawer</div>

Exemplo prático de RTL

Um componente de cartão usando propriedades lógicas:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size e RTL

Algumas fontes árabes parecem maiores ou menores no mesmo tamanho em pixels que fontes latinas equivalentes. Defina font-size por sistema de escrita, se necessário:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

Ferramentas de teste

As DevTools do navegador podem emular layouts bidirecionais. Use também a árvore de acessibilidade do Chrome para verificar se a ordem de leitura segue a ordem lógica, e não a ordem visual, para leitores de tela.

Lista de verificação de RTL no mundo real

Lista de verificação de RTL:

  • Todas as margens e preenchimentos usam propriedades lógicas
  • Todas as bordas usam inline-start/end
  • O alinhamento do texto usa start/end
  • Os ícones direcionais são invertidos com scaleX(-1)
  • As posições absolutas usam inset-inline-* quando necessário
  • Os contêineres roláveis rolam a partir da borda correta

Verificação rápida

Qual transformação CSS é a maneira mais simples de espelhar um ícone de seta SVG direcional em layouts RTL?

Recapitulação

Defina dir="rtl" no elemento html para usar um layout RTL. As propriedades lógicas adaptam margens, preenchimentos, bordas e alinhamento automaticamente. Os valores físicos em pixels nas transformações e no posicionamento absoluto ainda exigem consideração manual para RTL. Espelhe os ícones direcionais com scaleX(-1). Teste alternando dir="rtl" no elemento raiz.

Perguntas Frequentes

A aula “Propriedades Lógicas em Layouts RTL” é grátis?

Sim — o texto completo de “Propriedades Lógicas em Layouts RTL” é 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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Propriedades Lógicas em Layouts RTL”?

Crie um layout verdadeiramente bidirecional que se inverte automaticamente para árabe e hebraico usando propriedades lógicas. Você pratica CSS 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 CSS Academy?

Nenhuma experiência prévia é necessária. CSS 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 4 de 4.

Quanto tempo leva a aula “Propriedades Lógicas em Layouts RTL”?

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 CSS Academy?

Sim. Cada aula de CSS 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

  1. Por Que Propriedades Lógicas: Internacionalização
  2. Direções de Bloco e Inline
  3. Margin, Padding e Border Lógicos
  4. Propriedades Lógicas em Layouts RTL
← Voltar para CSS Academy