hyphens y por qué depende de lang
Los tres valores de hyphens, por qué auto no hace nada sin el atributo lang, los controles finos y su soporte, y qué no debe partirse nunca.
hyphens: auto es de las pocas propiedades de CSS cuyo resultado depende de un atributo del HTML. Sin lang, el navegador no sabe qué diccionario de partición cargar y la propiedad no hace absolutamente nada: no falla, no avisa, simplemente no parte. Esa dependencia convierte un atributo que casi todo el mundo pone por accesibilidad en una decisión tipográfica de primer orden.
- Distinguir qué parte cada uno de los tres valores de
hyphens. - Explicar la dependencia del atributo
langy sus consecuencias. - Usar los controles finos de partición y conocer su soporte real.
- Decidir qué contenidos no deben partirse nunca.
Los tres valores
p { hyphens: auto; }none desactiva toda partición, incluso la de los guiones blandos que hayas escrito en el contenido.
manual, que es el valor inicial, parte solo donde el contenido lo indica: en un guion blando —el carácter U+00AD, que se escribe como entidad y no se ve— o en un guion normal ya presente en la palabra.
auto deja que el navegador parta según las reglas de partición del idioma del contenido. Y ahí está toda la lección.
Por qué depende de lang
La partición silábica no es un algoritmo universal: cada idioma tiene sus reglas y sus excepciones, y los navegadores las implementan con diccionarios de partición por idioma. Para elegir cuál usar, el motor mira el idioma del contenido, que sale del atributo lang del elemento o del ancestro más cercano que lo tenga.
Sin lang en ninguna parte, no hay diccionario, y hyphens: auto no parte nada. La declaración está ahí, el panel de estilos la muestra aplicada, y el texto sigue sin partirse. Es un fallo que se depura durante media hora antes de mirar el HTML.
<html lang="es">Eso es todo lo que hace falta para el caso normal. Para contenido mezclado, el atributo se pone en el fragmento:
<p>El término inglés es <span lang="en">progressive enhancement</span>.</p>Y ahí se ve la segunda cara de la dependencia: sin ese lang en el fragmento, el navegador partiría la expresión inglesa con reglas españolas, produciendo cortes que a un lector inglés le chirrían.
Dos matices honestos sobre la disponibilidad de diccionarios. No todos los idiomas tienen uno en todos los navegadores: los principales europeos están bien cubiertos, pero hay idiomas donde auto no hace nada aunque el lang sea correcto. Y el conjunto de diccionarios depende de la plataforma: en Safari se apoya en los recursos del sistema, así que la partición de un mismo idioma puede estar disponible en macOS y no en otro sistema.
Los controles finos
Tres propiedades ajustan el resultado, y su soporte es muy desigual.
hyphenate-character cambia el glifo que marca el corte. Su uso real no es estético: hay sistemas de escritura donde el signo correcto no es el guion.
p { hyphenate-character: "-"; }hyphenate-limit-chars es la importante y acepta tres números: longitud mínima de palabra para partirla, mínimo de caracteres antes del corte y mínimo después.
p { hyphenate-limit-chars: 8 4 3; }Con eso, solo se parten palabras de ocho letras o más, dejando al menos cuatro antes y tres después. Los valores por defecto los decide el navegador con una heurística, y suelen ser más permisivos de lo que conviene en español, donde partir dejando dos letras colgando se lee mal.
El soporte: Chrome 109 y Firefox 137, y Safari no la implementa. Como es una propiedad y no un descriptor, sí se puede detectar con @supports (hyphenate-limit-chars: 8 4 3), aunque en la práctica no hace falta: sin soporte se usa la heurística del navegador, que es un resultado peor pero no roto.
Dónde parte y dónde no debe partir
La partición aporta de verdad en un caso concreto: columnas estrechas. En una barra lateral de 220 píxeles, o en un móvil con una palabra técnica larga, la alternativa a partir es un hueco enorme al final de la línea o un desbordamiento. Ahí hyphens: auto es la diferencia entre un bloque legible y uno roto.
En texto justificado es prácticamente obligatoria. Sin partición, el justificado tiene que estirar los espacios de cada línea hasta cuadrar, y con líneas cortas eso produce los ríos blancos verticales que hacen ilegible el bloque. Justificar sin partir es la combinación que hay que evitar.
Y hay contenido que no debe partirse nunca:
code, kbd, samp, pre,
.identificador, .url, .referencia {
hyphens: none;
}Un identificador partido por un guion es ambiguo: quien lo lea no sabrá si el guion forma parte del nombre. Lo mismo con URLs, referencias de producto, matrículas y cualquier cadena que alguien pueda copiar a mano. Para esos casos, la herramienta correcta es overflow-wrap: anywhere o word-break, que cortan sin insertar ningún glifo.
Antes de investigar cualquier otra cosa, comprueba el atributo. Y comprueba que es el correcto: un lang="en" heredado de una plantilla en un sitio en español produce particiones que parecen aleatorias, porque son las reglas del inglés aplicadas a palabras españolas. Ese síntoma —parte, pero parte mal— apunta siempre al idioma declarado y nunca al CSS.
lang se enseña como una casilla de accesibilidad: sirve para que el lector de pantalla elija la voz correcta. Es verdad y es la mitad menos interesante de la historia, porque el atributo gobierna además una lista larga de decisiones tipográficas que se toman en el motor de layout. Elige el diccionario de partición silábica. Decide qué glifos produce content: open-quote, que en español son las comillas latinas y en inglés las inglesas. Selecciona la variante regional de los glifos en fuentes que traen formas locales, algo crítico en chino, japonés y coreano, donde el mismo punto de código se dibuja distinto según el idioma. Y determina el mapeo de mayúsculas y minúsculas, que no es el mismo en todos los idiomas: la especificación de CSS Text exige un mapeo sensible al idioma, y por eso la i turca se convierte en una I con punto y no en la I latina. Un lang incorrecto, entonces, no produce un aviso de accesibilidad: produce comillas del idioma equivocado, cortes de palabra que un nativo reconoce como erróneos, y en algunos idiomas letras directamente mal. La conclusión es que lang es una declaración tipográfica tanto como semántica, y merece estar en la lista de comprobación del maquetador y no solo en la del auditor.