Por Que Propriedades Lógicas: Internacionalização

O CSS tradicional usa direções físicas: top, right, bottom, left. Elas funcionam bem para idiomas escritos da esquerda para a direita (LTR), como o inglês, mas não funcionam corretamente para idiomas escritos da direita para a esquerda (RTL), como o árabe e o hebraico, nem para sistemas de escrita verticais, como o japonês tradicional.

Compare:

• Físicas: top, right, bottom, left — fixas em relação à tela
• Lógicas: block-start, block-end, inline-start, inline-end — relativas ao modo de escrita

Todo sistema de escrita tem:

• Eixo de bloco: direção em que os blocos de texto são empilhados (vertical em LTR/RTL, horizontal na escrita vertical)
• Eixo em linha: direção em que o texto flui dentro de uma linha (horizontal em LTR/RTL, vertical na escrita vertical)

Em LTR (inglês): inline-start = left, inline-end = right. Em RTL (árabe): inline-start = right, inline-end = left. As propriedades lógicas se adaptam automaticamente, sem consultas de mídia ou JavaScript.

Um site escrito com propriedades físicas precisa de uma folha de estilos de substituição para RTL separada ou de substituições por propriedade para cada propriedade de margem, preenchimento, borda, posição e alinhamento de texto que deve ser invertida. Isso dobra o trabalho de manutenção.

Quando writing-mode: vertical-rl é definido (japonês/coreano vertical), o eixo de bloco se torna horizontal e o eixo em linha se torna vertical. As propriedades lógicas se adaptam automaticamente.

Todos os principais navegadores oferecem suporte a propriedades lógicas. Atualmente, a especificação do CSS recomenda usar propriedades lógicas para qualquer propriedade relacionada a uma direção que possa mudar com o modo de escrita ou a direção.

Uma única base de código que usa propriedades lógicas oferece suporte correto a LTR, RTL e à escrita vertical, sem duplicação. O CSS simplesmente segue os valores de direction e writing-mode no elemento raiz.

Defina a direção da escrita no HTML, não apenas no CSS:

Não é necessário reescrever todo o seu CSS de uma vez. Comece a usar propriedades lógicas em componentes novos. Com o tempo, refatore as propriedades físicas nos componentes que fazem parte de áreas sensíveis à internacionalização.

A propriedade direction do CSS (ltr ou rtl) afeta a direção do fluxo em linha. Ela funciona em conjunto com writing-mode para definir o contexto completo do sistema de escrita do elemento.

Por que propriedades físicas do CSS, como margin-left, causam problemas em layouts RTL?

As propriedades lógicas do CSS usam o modelo de bloco/em linha em vez de top/right/bottom/left físicos. Isso permite que uma única folha de estilos funcione para sistemas de escrita LTR, RTL e verticais. As propriedades direction e writing-mode definem o contexto ao qual as propriedades lógicas se adaptam automaticamente.