Pular para o conteúdo
~/.primo-academy.sh
☰ Aulas · CSS · 0/36
Recomendado: essencial

Logical Properties: margin-inline e afins

3 min de leitura

fonte

Você escreveu margin-left: 16px e ficou feliz. Mas e quando o site precisa funcionar em árabe (que lê da direita pra esquerda) ou em japonês vertical (que lê de cima pra baixo)? O margin-left continua sendo "esquerda" - mesmo quando "esquerda" não é onde o texto começa.

Logical properties (propriedades lógicas) substituem as "físicas" e se adaptam automaticamente à direção de escrita do documento.

O problema: físico vs lógico

.card {
  margin-left: 16px;     /* SEMPRE à esquerda do texto */
  padding-right: 24px;   /* SEMPRE à direita do texto */
  border-bottom: 1px solid #ccc;
  width: 300px;
}

Em português, isso é "16px à esquerda do texto" - "à esquerda do início da linha". Em árabe, o início da linha é a direita. O espaço que você queria dar "antes do texto" continua aparecendo "à esquerda da tela" - o lado errado.

.card {
  margin-inline-start: 16px;   /* ESPAÇO ANTES DO TEXTO (start da linha) */
  padding-inline-end: 24px;    /* ESPAÇO DEPOIS DO TEXTO (fim da linha) */
  border-block-end: 1px solid #ccc;  /* BORDA EMBAIXO (final do bloco) */
  inline-size: 300px;          /* LARGURA do texto (não "width" esquerdo-direito) */
}

Agora, em qualquer idioma, a regra "espaço antes do texto" é respeitada - porque o "antes" muda de lado automaticamente.

Os eixos: inline e block

CSS define dois eixos lógicos:

  • Eixo inline (linha): a direção que o texto segue. Em português, é horizontal (esquerda → direita). Em árabe, é horizontal (direita → esquerda). Em japonês vertical, é vertical (cima → baixo).
  • Eixo block (bloco): perpendicular ao inline. Em português e árabe, é vertical (cima → baixo). Em japonês vertical, é horizontal.

Dentro de cada eixo, há start (início) e end (fim):

  • inline-start: começo da linha (esquerda em LTR, direita em RTL).
  • inline-end: fim da linha.
  • block-start: começo do bloco (topo).
  • block-end: fim do bloco (base).

Tabela de substituição

Física (sempre absoluto)Lógica (segue a escrita)
margin-leftmargin-inline-start
margin-rightmargin-inline-end
margin-topmargin-block-start
margin-bottommargin-block-end
margin (todos os 4)margin-inline + margin-block
padding-leftpadding-inline-start
padding-rightpadding-inline-end
padding-toppadding-block-start
padding-bottompadding-block-end
border-leftborder-inline-start
border-rightborder-inline-end
border-topborder-block-start
border-bottomborder-block-end
widthinline-size
heightblock-size
topinset-block-start
bottominset-block-end
leftinset-inline-start
rightinset-inline-end
text-align: lefttext-align: start
text-align: righttext-align: end
float: leftfloat: inline-start
float: rightfloat: inline-end
clear: leftclear: inline-start
border-radius: 10px 0 0 10pxborder-start-start-radius etc.

É muita coisa. Mas a regra é: se a propriedade tem direção (left, right, top, bottom), provavelmente tem uma versão lógica.

Shorthands novas

.card {
  /* margin: 10px 20px 30px 40px; */
  margin-inline: 20px 40px;   /* horizontal: start end */
  margin-block: 10px 30px;    /* vertical: start end */

  /* inset: top right bottom left; */
  inset-inline: 20px 40px;    /* horizontal */
  inset-block: 10px 30px;     /* vertical */
}

Casos onde o físico ainda é a escolha certa

  • Coordenadas exatas (canvas, jogo, mapa): você quer "canto superior esquerdo" de verdade, não "onde o texto começa".
  • Layouts que não internacionalizam (dashboard interno, ferramenta que só existe em uma língua): se ninguém vai usar em árabe, o esforço não compensa.
  • Animações de transformações que dependem de "esquerda absoluta".

Por que vale usar mesmo se o site for só em PT hoje

  1. Robustez: se um dia o site precisar de versão em inglês, em espanhol, em árabe, ou em japonês - o CSS já está pronto.
  2. Intenção mais clara: margin-inline-start diz "espaço no início do texto" - é mais legível que "margin-left" quando o contexto não é óbvio.
  3. Consistência: mesmo em PT, misturar físico e lógico é fonte de bug. Escolha um e vá até o fim.
  4. É o futuro: a especificação está migrando para lógico. Os browsers priorizam suporte a lógico. Novas features (como margin-trim) tendem a vir só em versão lógica.

dir="rtl" para testar

<html dir="rtl">

Mude o atributo dir no <html> e veja o site se inverter. É a melhor forma de debugar se o seu CSS está pronto pra internacionalização - se algo parecer errado com dir="rtl", você tem propriedades físicas para converter.

  • Inline = direção do texto (horizontal em LTR/RTL).
  • Block = perpendicular (vertical em LTR/RTL).
  • start = começo, end = fim.
  • margin-inline-start em vez de margin-left.
  • inline-size em vez de width.
  • text-align: start em vez de text-align: left.
  • Use dir="rtl" pra testar se está pronto pra i18n.

Dica: comece pequeno. Migre primeiro o que é "layout-direcional": margin-inline-start, padding-inline-end, text-align: start. O resto pode ir migrando aos poucos. E se você usa margin: 0 auto para centralizar, prefira margin-inline: auto - é a versão lógica e funciona em qualquer direção.

No próximo nó, vamos falar de acessibilidade visual - como CSS pode (e deve) respeitar as preferências do usuário e tornar a experiência melhor para todo mundo.

// recursos

// avaliação da trilha

—
ainda sem avaliações