Tipómetro

Define un estilo en latino y calibra su caída en árabe, chino, japonés y coreano. Mide dónde cabe el glifo, dónde se corta y por qué.

01 — Muestra en contexto

El estilo que definas en el panel, con el idioma que elijas. Las cajas del inspector se recalculan en cada cambio de token.

Referencia · español

Texto de la muestra

02 — Comparativa entre idiomas

Todos con la misma caja base. Busca el multiplicador que iguala la masa óptica sin que el ink-box se salga del line-box.

03 — Contenedor de altura fija (40px)

Reproduce el recorte original. Si el multiplicador de font-size sube y el de line-height no, el glifo se corta aquí.

04 — Runs latinos dentro de texto RTL

Un porcentaje, una talla o un nombre de marca en alfabeto latino dentro de una frase árabe. El resultado visual depende de dónde caiga el run y de cómo declares la dirección del párrafo, no del orden en que escribiste la cadena.

Glosario de marcadores

line-box
El alto que la línea ocupa en el flujo: el line-height usado. Es lo que separa una línea de la siguiente y lo que determina el alto del bloque. No tiene nada que ver con el tamaño del glifo.
content-area
La caja que declara la fuente: ascent + descent al tamaño usado. No depende del line-height ni de qué letras escribas. Es lo que pintaría un background-color sobre un <span> inline. Cambia al cambiar de fuente aunque el font-size sea el mismo: por eso un 32/40 que respira en Quicksand se queda corto en árabe o CJK.
ink-box
La tinta real de los glifos de esa línea, medida con measureText().actualBoundingBox*. Es la única caja que depende del texto concreto: un tashkeel apilado, una ج o una j la agrandan. Se calcula línea a línea.
baseline
La línea de apoyo alfabética. Se obtiene con un inline-block de alto cero, que se apoya exactamente sobre ella, así que es exacta aunque haya text-box-trim.

El sobrante entre line-box y content-area es el medio interlineado, (line-height − content-area) / 2, y se reparte a partes iguales arriba y abajo. Si es negativo, la fuente ya no cabe en su propia línea.

El badge de recorte salta cuando la ink-box se sale de la line-box más de 0,5px por arriba o por abajo. En la tabla, valores negativos son holgura. Desbordar no siempre se ve: el corte aparece solo si un ancestro tiene overflow: hidden y alto fijo.

Anulaciones por idioma

Dos propiedades que .title-l declara igual para todos los idiomas pero que cada escritura necesita distintas. No son constantes del estilo: son tokens que [lang] sobreescribe, igual que los multiplicadores.

letter-spacing
Si tu estilo lleva tracking —en títulos es habitual un 0.16em— en árabe se anula a 0. Ojo con lo que hace el navegador: Chrome computa el tracking en árabe pero no lo aplica al pintar, porque suprime el espaciado en escrituras cursivas para no romper las uniones. Fuerza el valor del estilo base en todos los idiomas y compara la fila ancho real de la tabla: en español y japonés crece, en árabe no se mueve ni un subpíxel. Aun así conviene anularlo de forma explícita: depender de que el motor lo ignore es frágil y no está garantizado en todos los navegadores.
text-transform
uppercase es convención habitual en títulos, pero árabe, CJK y hangul no tienen caja: la regla no hace nada. Se anula a none por higiene y porque el canvas tiene que aplicar la misma transformación que el DOM para medir bien la tinta.

Los tres estados de cada selector: según el idioma es el comportamiento real y el que se exporta; forzar reproduce el problema para verlo; anular en todos elimina la variable cuando comparas otra cosa.