Playground de text-box en CSS

Guía educativa de text-box

Alinear el texto desde sus métricas

Una caja centrada no siempre parece centrada. Aprende a ajustar el espacio exterior de una línea con text-box-trim y text-box-edge, manteniendo una interlínea legible y espacio para todos los caracteres.

Volver al playground

Modelo mental

font-size define el tamaño de referencia de la fuente. La tinta de las letras, las métricas tipográficas y la caja de línea ocupan espacios distintos.

De la caja de línea a las métricasEsquema conceptual de una línea horizontal, sin mediciones reales. Las posiciones ilustran relaciones; las métricas y la tinta cambian con cada fuente.

1 · Caja de línealine-height contribuye al espacio de la línea; sus límites no son los de la tinta.
2 · Altura de mayúsculas · capReferencia de la fuente para letras como H; un acento puede subir más.
3 · Altura de x · exReferencia de la fuente para minúsculas como x; no contiene todas las letras.
4 · Línea base · alphabeticApoyo de muchas letras. Los descendentes de g o y pueden quedar por debajo.

text-box ajusta los bordes de la caja según métricas de la fuente. Puede retirar espacio procedente del interlineado y de las métricas por encima y por debajo del texto. No cambia el dibujo ni el tamaño de los caracteres y no mide la silueta exacta de cada palabra.

Qué borde ajustar y hasta dónde

La dirección del ajuste y la métrica de destino son decisiones independientes.

text-box-trim elige los bordes: none no ajusta, trim-start actúa al inicio del bloque, trim-end al final y trim-both en ambos. En el modo horizontal de estas escenas corresponden a arriba y abajo; son direcciones de bloque, no lados físicos universales.

text-box-edge elige las referencias. cap alphabetic combina altura de mayúsculas y línea base; ex alphabetic usa altura de x y línea base. text conserva las referencias de ascenso y descenso de la fuente. cap text o ex text conservan la referencia inferior text; text alphabetic conserva la superior text.

Elegir una métrica con text-box-edge no activa el ajuste si text-box-trim sigue en none. auto es el valor inicial de edge; para expresar la intención de alineación en una receta, indica una pareja explícita. Las sintaxis siguientes producen el mismo ajuste.

text-box: trim-both cap alphabetic;

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

Aplica la propiedad al elemento que contiene el texto. Un contenedor flex o grid no transmite el ajuste a sus items: en una etiqueta con icono, usa un span para el texto y ajusta ese span. Mantén padding y tamaño de objetivo en el control exterior.

Alineación con un icono

align-items centra cajas. Si la caja del texto incluye espacio adicional, la tinta puede parecer desplazada respecto al icono.

La misma etiqueta, con y sin ajuste

Sin ajuste · none

BASELINE

Con ajuste · cap alphabetic

BASELINE

Ambas etiquetas tienen la misma fuente, interlínea y padding. Las líneas discontinuas marcan los bordes del span: en la segunda se ajustan a cap y alphabetic si el navegador admite esa declaración. El círculo es decorativo; estas muestras no son botones.

La misma etiqueta, con y sin ajuste

HTML

<div class="text-box-guide-badges">
  <div>
    <p>Sin ajuste · none</p>
    <div class="text-box-guide-badge">
      <span aria-hidden="true">●</span>
      <span class="text-box-guide-label">BASELINE</span>
    </div>
  </div>
  <div>
    <p>Con ajuste · cap alphabetic</p>
    <div class="text-box-guide-badge">
      <span aria-hidden="true">●</span>
      <span class="text-box-guide-label is-trimmed">BASELINE</span>
    </div>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.text-box-guide-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0 0 1rem;
    font: 1rem/1.5 system-ui, sans-serif;
  }
}

.text-box-guide-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
  border-radius: 16px;
  background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 98%, white), color-mix(in oklch, oklch(0.22 0.024 260) 86%, black));
  font: 700 1.5rem/1.6 system-ui, sans-serif;
}

.text-box-guide-label {
  border-block: 1px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));

  &.is-trimmed {
    text-box: trim-both cap alphabetic;
  }
}

cap alphabetic es una referencia útil para mayúsculas, pero no garantiza el centrado óptico de cualquier palabra. El peso, la forma del icono, las minúsculas y los acentos influyen. Evalúa texto real, sin compensaciones numéricas ligadas a una sola fuente.

Interlínea y texto de varias líneas

El espacio entre líneas y el espacio exterior del bloque tienen funciones distintas.

En un bloque, trim-start ajusta la primera línea y trim-end la última línea. El espacio entre líneas interiores sigue dependiendo de line-height. No sustituyas un interlineado cómodo por line-height: 1 para eliminar espacio exterior en un título.

Dos líneas con line-height: 1.8

Sin ajuste · none

Diseñar con
métricas reales

Con ajuste · cap alphabetic

Diseñar con
métricas reales

El salto explícito mantiene dos líneas comparables. El segundo bloque ajusta sus extremos, pero conserva la distancia entre sus líneas. En una pantalla estrecha el texto puede envolver más; el ajuste sigue afectando a la primera y la última línea reales.

Dos líneas con line-height: 1.8

HTML

<div class="text-box-guide-lines">
  <div>
    <p class="text-box-guide-caption">Sin ajuste · none</p>
    <p class="text-box-guide-heading">Diseñar con<br>métricas reales</p>
  </div>
  <div>
    <p class="text-box-guide-caption">Con ajuste · cap alphabetic</p>
    <p class="text-box-guide-heading is-trimmed">Diseñar con<br>métricas reales</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.text-box-guide-lines {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
}

.text-box-guide-caption {
  margin: 0 0 1rem;
  font: 1rem/1.5 system-ui, sans-serif;
}

.text-box-guide-heading {
  margin: 0;
  border-block: 2px solid light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
  font: 700 1.5rem/1.8 system-ui, sans-serif;
  overflow-wrap: anywhere;

  &.is-trimmed {
    text-box: trim-both cap alphabetic;
  }
}

margin, padding y border siguen presentes: text-box no los elimina. En títulos puede ayudar a alinear un borde con una imagen; en párrafos largos, mantén primero la legibilidad y el ritmo vertical. Permite que el contenido crezca al ampliar texto.

Fuentes, acentos y descendentes

La misma pareja de métricas expresa una intención común, no una altura idéntica entre fuentes.

system-ui, serif y monospace resuelven fuentes distintas según el dispositivo. Cada una tiene su propia altura de mayúsculas, altura de x y descendentes. Una fuente web y su fallback también pueden producir cajas diferentes durante la carga; comprueba ambos estados.

cap y ex con tres familias de fuente

system-ui · cap / ex

ÁHxgy ÁHxgy

serif · cap / ex

ÁHxgy ÁHxgy

monospace · cap / ex

ÁHxgy ÁHxgy

En cada fila, la primera muestra usa cap alphabetic y la segunda ex alphabetic. Observa Á, H, x, g e y respecto a los bordes: la tinta puede sobresalir. Las fuentes concretas dependen del sistema; el ejemplo no las descarga ni promete medidas constantes.

cap y ex con tres familias de fuente

HTML

<div class="text-box-guide-fonts">
  <div>
    <p>system-ui · cap / ex</p>
    <div class="text-box-guide-samples">
      <span class="text-box-guide-font">ÁHxgy</span>
      <span class="text-box-guide-font is-ex">ÁHxgy</span>
    </div>
  </div>
  <div>
    <p>serif · cap / ex</p>
    <div class="text-box-guide-samples">
      <span class="text-box-guide-font is-serif">ÁHxgy</span>
      <span class="text-box-guide-font is-serif is-ex">ÁHxgy</span>
    </div>
  </div>
  <div>
    <p>monospace · cap / ex</p>
    <div class="text-box-guide-samples">
      <span class="text-box-guide-font is-mono">ÁHxgy</span>
      <span class="text-box-guide-font is-mono is-ex">ÁHxgy</span>
    </div>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.text-box-guide-fonts {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0 0 1rem;
    font: 1rem/1.5 system-ui, sans-serif;
  }
}

.text-box-guide-samples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding-block: 1rem;
}

.text-box-guide-font {
  display: block;
  border-block: 2px solid light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
  font: 700 2rem/1.6 system-ui, sans-serif;
  text-box: trim-both cap alphabetic;

  &.is-serif {
    font-family: serif;
  }

  &.is-mono {
    font-family: monospace;
  }

  &.is-ex {
    text-box-edge: ex alphabetic;
  }
}

Ajustar la caja no recorta por sí solo la tinta. Un acento puede superar cap; una mayúscula puede superar ex; g o y pueden bajar de alphabetic. overflow: hidden o clip y una altura fija sí pueden ocultar esa tinta. Reserva espacio y prueba idiomas, fuentes, zoom y foco reales.

Para etiquetas con mayúsculas, empieza por cap alphabetic. ex alphabetic puede servir para alinear minúsculas, pero necesita espacio para ascendentes y acentos. text ofrece una referencia más amplia de la fuente; ninguna pareja sustituye la revisión con el contenido que va a usarse.

Explorar font-size-adjust y las fuentes de fallback

Errores frecuentes

Comprueba la caja, la métrica y el contexto de formato antes de añadir offsets.

Cambiar edge no produce diferencias

Resultado esperado: Ajustar la caja a la altura de mayúsculas.
Causa: text-box-trim está en none o el navegador no admite la declaración concreta.
Solución: Activa trim-both y comprueba la pareja completa con @supports o CSS.supports().

El icono y el texto siguen desalineados

Resultado esperado: Centrar la etiqueta según las métricas del texto.
Causa: El ajuste está en el contenedor flex, fuera de la caja que contiene el texto.
Solución: Envuelve el texto en un span y aplica ahí text-box; conserva align-items en el contenedor.

Desaparecen acentos o descendentes

Resultado esperado: Conservar todos los caracteres con una caja más compacta.
Causa: La tinta sobresale de la métrica elegida y un ancestro usa clipping o una altura fija.
Solución: Retira el clipping innecesario, permite altura automática y añade espacio suficiente.

Las líneas del título quedan demasiado juntas

Resultado esperado: Eliminar espacio exterior sin dificultar la lectura.
Causa: Se ha reducido line-height para resolver un problema en los extremos del bloque.
Solución: Restaura una interlínea legible y usa text-box solo para ajustar los extremos.

Soporte y compatibilidad

El ajuste es una mejora visual. El texto y el layout base deben funcionar también sin ella.

Comprueba la declaración completa, no solo la existencia de text-box. El shorthand, los longhands y los valores de text-box-edge pueden tener diferencias de soporte. Los valores ideographic e ideographic-ink del borrador tienen compatibilidad propia y no se usan en estas recetas.

Si el navegador ignora text-box, las muestras conservan fuente, line-height y espaciado convencional. Las parejas con y sin ajuste pueden verse iguales. No se simula la mejora con márgenes negativos ni se condiciona una acción esencial a una altura exacta.

@supports (text-box: trim-both cap alphabetic) {
  .label { text-box: trim-both cap alphabetic; }
}

@supports permite aislar una mejora según su sintaxis. No certifica el resultado visual, la interoperabilidad ni la seguridad del espacio para todos los caracteres. Comprueba el resultado con tus fuentes y navegadores objetivo.