CSS
Explica propiedades lógicas, ejes inline y block, writing modes y dirección del texto para crear interfaces adaptables a idiomas y orientaciones distintas.
Las propiedades lógicas describen direcciones según el flujo de escritura en vez de asumir izquierda, derecha, arriba y abajo.
.card {
margin-inline: auto;
padding-block: 1rem;
}inline axis → dirección de la línea de texto
block axis → dirección en la que se apilan líneas y bloquesEn español horizontal:
En RTL o escritura vertical pueden cambiar.
width → inline-size
height → block-size
margin-left → margin-inline-start
top → inset-block-start
border-top → border-block-startpadding-inline: 1rem 2rem;
margin-block: 2rem;
border-inline-start: 3px solid currentColor;Dos valores representan start y end del eje.
.vertical-title {
writing-mode: vertical-rl;
}Cambia la orientación del flujo. No es una técnica general para rotar cualquier texto; afecta layout, ejes y dimensiones.
html[dir="rtl"] { direction: rtl; }La dirección principal debería venir de HTML mediante dir, no inferirse únicamente desde CSS.
CSS puede ajustar presentación, pero HTML comunica dirección a otras herramientas.
.vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
}Controla orientación de caracteres dentro de escritura vertical.
start y end responden al eje y writing mode:
.container {
display: flex;
justify-content: start;
}No asumas que start siempre es izquierda.
Una flecha “siguiente” puede necesitar invertirse en RTL; un icono de teléfono no.
[dir="rtl"] .directional-icon {
scale: -1 1;
}Clasifica iconos por significado, no inviertas todos.
.card {
margin-left: 1rem;
margin-inline-start: 2rem;
}Ambas propiedades pueden apuntar al mismo lado y competir en cascada según writing mode. Evita mezclarlas sin razón.
.page-shell {
inline-size: min(100% - 2rem, 72rem);
margin-inline: auto;
padding-block: 2rem;
}Funciona sin depender de izquierda/derecha físicas.
dir pertenece principalmente al documento HTML.¿Por qué margin-inline-start es más adaptable que margin-left?
Porque representa el inicio del flujo inline y cambia correctamente con RTL o writing modes verticales.
Box model y box-sizing explica qué tamaño ocupa realmente una caja.