Entrevista frontend: ¿Cómo usarías text-box-trim para corregir la alineación vertical de las métricas de fuente?

Consigna y caso de uso

Los botones, badges y encabezados en un sistema de diseño suelen alinearse a un centro visual, mientras que los line boxes de CSS conservan el half-leading superior e inferior de la fuente. Explica cómo usar text-box-trim y text-box-edge para controlar el cuadro de texto, cómo desplegarlo en producción cuando el soporte es limitado y cómo tener en cuenta la carga de fuentes, los modos de escritura y la accesibilidad.

Qué evalúa el entrevistador

• Distinguir glifos, métricas de fuente, line boxes y el modelo de caja del elemento.
• Explicar con precisión el recorte start, end y en ambos lados.
• Elegir bordes cap, ex, text, alphabetic o leading con text-box-edge.
• Manejar la dirección de bloque lógica, el fallback de fuentes y la mejora progresiva.
• Verificar el resultado con navegadores reales, fuentes y evidencia de accesibilidad.

Preguntas para aclarar primero

• ¿El objetivo es el centrado óptico, la estabilidad entre fuentes o un line-height y baseline fijos?
• ¿Puede el componente habilitar la característica solo en navegadores compatibles?
• ¿Qué fuentes, tamaños, idiomas, modos de escritura y rango de zoom están dentro del alcance?
• ¿El texto puede ajustarse en varias líneas (wrap) y deben permanecer sin cambios el anillo de enfoque y el área de impacto (hit area)?

Respuesta en treinta segundos

Los line boxes tradicionales incluyen el half-leading de la fuente, por lo que un padding idéntico puede verse visualmente diferente de forma vertical entre distintas fuentes. text-box-trim recorta los bordes del eje de bloque y text-box-edge selecciona la métrica de fuente utilizada como borde; text-box es la propiedad abreviada (shorthand). Mantendría las dimensiones existentes como fallback, aplicaría una mejora progresiva dentro de una feature query, preservaría un área de impacto mínima para los botones y probaría fuentes, idiomas, modos de escritura, zoom y tecnologías de asistencia.

Respuesta detallada paso a paso

1. Dibuja las cuatro cajas primero

Separa el área pintada del glifo, las métricas de fuente, el line box y el padding y borde del elemento. Recortar la caja de texto cambia la ocupación de contenido en el eje de bloque; no debe describirse como cortar el contorno del glifo ni reducir el área de impacto.

2. Explica el origen del half-leading

Cuando line-height supera la propia altura de línea de la fuente, el espacio extra generalmente se distribuye en ambos lados del line box. Los ascendentes, descendentes, cap height y x-height difieren según la fuente, por lo que el mismo line-height puede producir un centro óptico diferente.

3. Elige el borde de recorte

text-box-trim acepta none, trim-start, trim-end y trim-both. Un botón a menudo necesita recorte en ambos lados; un encabezado puede recortar solo el borde block-start para preservar el ritmo con el párrafo anterior.

4. Elige la métrica de fuente

text-box-edge puede seleccionar bordes como cap, ex, text, alphabetic o leading. cap puede adaptarse a la referencia visual de un encabezado en mayúsculas, mientras que text está más cerca del límite de texto de la fuente. Prueba la fuente y el idioma reales; ninguna métrica es una verdad universal para todas las fuentes.

5. Usa la propiedad abreviada localmente

.button {
  text-box: trim-both cap alphabetic;
  padding: 0.625rem 1rem;
}

La propiedad abreviada expresa el recorte y el borde juntos. Delimita su alcance a los componentes que lo necesitan para que el recorte global no dañe el ritmo de los párrafos, la alineación de íconos o el contenido multilínea.

6. Maneja las direcciones de escritura lógicas

start y end son bordes lógicos del eje de bloque y cambian con writing-mode. Mide layouts horizontales y verticales con diferentes valores de direction; no sustituyas una intuición física de arriba/abajo por la definición lógica.

7. Diseña una mejora progresiva

Mantén los line-height, padding y altura mínima existentes de forma predeterminada, luego habilita la mejora en @supports (text-box-trim: trim-both). Si un navegador ignora la declaración, el texto debe seguir siendo legible y el botón debe conservar sus dimensiones táctiles y de teclado.

8. Verifica la carga de fuentes y la accesibilidad

Mide después de que la fuente de destino se haya cargado, cubriendo fuentes de fallback, redes lentas, zoom, fuentes del sistema y cadenas multilingües. Verifica la indicación de foco, el recorte, el orden del lector de pantalla y el rectángulo de impacto real; el centrado óptico no puede sacrificar la operatividad.

Compensaciones y límites

La característica puede eliminar márgenes negativos mágicos y desplazamientos por fuente, pero el soporte de los navegadores aún es limitado y las métricas de fuente siguen variando. No reemplaza line-height, el padding, la alineación flex o una altura mínima razonable. Ten precaución con texto de cuerpo multilínea, fuentes dinámicas y contenido inline complejo. Para la paridad de diseño, registra la fuente de destino, la métrica, la versión del navegador y la tolerancia en lugar de guardar únicamente una captura de pantalla.

Plan de despliegue y evidencia

1. Registra la fuente, el tamaño, el idioma, el modo de escritura y la tolerancia del componente.
2. Mantén el estilo actual como línea base, añade una rama de feature-query y fija el tamaño interactivo mínimo.
3. Prueba Chrome 133 y los demás navegadores en la matriz del proyecto; MDN marca la propiedad como de disponibilidad limitada en lugar de Baseline.
4. Mide el desplazamiento óptico, el anillo de enfoque, el ajuste de línea y el zoom con fuentes reales y de fallback.
5. Almacena capturas de pantalla, mediciones, versiones de navegador y la política de fallback en el registro de aceptación del componente.

Errores comunes y preguntas de seguimiento

Error 1: Tratar el recorte como recorte de glifos

Principalmente ajusta el borde del cuadro de texto; no corta el contorno del glifo por píxeles. Vuelve a las métricas de fuente, los line boxes y el modelo de caja del elemento.

Error 2: Configurar trim-both globalmente

Los párrafos, las listas y el contenido multilínea necesitan un ritmo normal. Define el alcance del componente y el límite del fallback.

Error 3: Capturar solo la fuente predeterminada

Una carga fallida de fuente, un cambio de idioma o una fuente del sistema cambian las métricas. Incluye pruebas con fallbacks y en redes lentas.

Error 4: Ignorar los ejes lógicos

trim-start no siempre es la parte superior física. Verifica el comportamiento del eje de bloque en escritura vertical y diferentes valores de dirección.

Error 5: Comprobar lo visual pero no el funcionamiento

El recorte no debe reducir el área táctil, de foco del teclado o de lectura. Proporciona verificaciones de tamaño mínimo, anillo de enfoque y tecnologías de asistencia.