Ajustar el ancho del texto en 1 línea de CSS

de adánprototipo en Chrome Canary 145:

h1 {
  text-grow: per-line scale;
}

danny habla de esto No hace mucho, al analizar diferentes formas de encajar texto en un contenedor, se aclaró la sintaxis (text-shrink incluyendo) donde puedes encontrar Narrador de Roman Komarov:

text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

• <fit-target>
  • per-line: para text-growlas líneas de texto más cortas que el contenedor crecerán para adaptarse al contenedor. para text-shrinklínea de texto más extenso Que el contenedor encoger para adaptarse a ello.
  • consistent: para text-growla línea más corta crecerá para adaptarse al contenedor, mientras que todas las demás líneas crecerán con el mismo factor de escala. para text-shrinkeste más largo guardavía encoger para caber en el contenedor, mientras que todas las demás líneas se reducen según el mismo factor de escala.
• <fit-method> (Electivo)
  • scale: Escala el glifo en lugar de cambiarlo font-size.
  • scale-inline: Escala el glifo en lugar de cambiarlo font-sizepero sólo en dirección horizontal.
  • font-size: aumente o disminuya el tamaño de fuente según corresponda.
  • letter-spacing: El espaciado entre letras aumentará/reducirá en lugar de font-size.
• <length> (opcional): tamaño máximo de fuente text-grow o tamaño mínimo de fuente text-shrink.

Tenga en cuenta los diferentes métodos de ajuste: escalan el glifo o ajustan el tamaño real del texto. font-size. Entonces, naturalmente, el intérprete notas Los problemas de accesibilidad aún se están resolviendo. como:

Si el usuario final intenta ampliar el tamaño de fuente, UA no debe adaptar las líneas ampliadas al ancho del contenedor. ¿Es suficiente la configuración de fuente mínima?

Hablando de preguntas abiertas, Una Kravets destaca algunos contenidos de Bluesky:

• ¿Se debe escalar la última línea de un párrafo?
• ¿El comportamiento actual de la altura de la fila es el esperado?
• ¿Debería escalar partes que no sean de texto (como imágenes en línea) juntas?

puede Participar en discusiones En temas de GitHub por supuesto.

Donnie D’Amato está asombrado. Quizás esta idea se adapte mejor a un estilo de impresión que a una pantalla. Este es un gran caso de uso en el que no pensé.

Ciertamente hemos recorrido un largo camino La era de los números mágicos y FitText.js!

Enlace directo→