O que são propriedades lógicas CSS e por que importam para internacionalização?

Question

Accepted Answer

**Propriedades lógicas** descrevem o layout em termos da **direção de fluxo do conteúdo** (início/fim, inline/block) em vez de direções físicas (esquerda/direita/topo/fundo). Isso faz com que uma única folha de estilos se adapte automaticamente a idiomas escritos da direita para a esquerda (árabe, hebraico) ou de cima para baixo. ## Físico vs lógico ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## Os dois eixos - **inline** — a direção em que o texto flui (horizontal em inglês; o eixo de "leitura"). - **block** — a direção em que as linhas se empilham (vertical em inglês; o eixo de "parágrafo"). ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` ## Por que isso importa para i18n Com propriedades físicas, suportar árabe significa escrever um segundo conjunto completo de estilos espelhados (`margin-left` → `margin-right`, etc.) atrás de `[dir="rtl"]`. Com propriedades lógicas, o **mesmo CSS simplesmente funciona** — defina `dir="rtl"` no html e `margin-inline-start` automaticamente muda para o lado direito: ```html ``` ## Além de RTL Propriedades lógicas também lidam com modos de escrita vertical (por ex. tipografia de alguns idiomas do Leste Asiático) e tornam `margin-inline: auto` uma forma limpa de centralizar independentemente da direção. ## Por que isso importa Para qualquer produto lançado em vários idiomas, propriedades lógicas eliminam a necessidade de manter folhas de estilos RTL espelhadas — um conjunto de regras se adapta à direção de escrita. Até mesmo para sites apenas LTR, elas são um modelo mental mais limpo (início/fim, inline/block), e são cada vez mais a recomendação padrão no CSS moderno.