Usando CSS para poner guiones automáticamente

En la escuela nos enseñaron que para usar toda la hoja al escribir deberíamos separar las palabras que no quepan al final del renglón con un guión al final de una sílaba. De esa manera podríamos usar mejor el papel. Esa solución se ha utilizado en la tipografía desde las primeras imprentas.

En la web no tenemos el problema del uso de papel, pero tenemos otro problema. Por lo general no usamos texto justificado para que no se creen ríos de espacio blanco que dificulta el salto del ojo de renglón en renglón. El problema es que como las palabras son de una longitud muy variable muchas veces el navegador tendrá que pasar una palabra larga completa al renglón siguiente, dejando renglones de longitud muy variable.

Para el CSS3 se creó una propiedad llamada hyphens que le indica al navegador que puede separar las palabras con guiones. Si el idioma de la página tiene un diccionario apropiado, el navegador insertará los guiones y hará que la longitud de los renglones sea más uniforme. Estas son muy buenas noticias desde el punto de vista de la tipografía.

Desafortunadamente todavía no está completamente implementado. Solo funciona si le pones el prefijo del fabricante. En Safari funciona, pero Firefox solo lo ha implementado para el inglés y en Chrome tampoco funciona en español. Aunque a la velocidad con la que se implementan mejoras estos días debe ser cuestión de poco tiempo.

No te recomiendo que digas que tu página está en inglés porque las reglas para poner el guión en ese idioma son diferentes, así que te encontrarás con sílabas partidas a la mitad. Si es que funciona porque los diccionarios se supone que serán distintos.

El código que necesitas incluir en tu css es:

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Puedes ver un ejemplo de su uso. Solo funciona en Safari, como dije, pero iremos probando de nuevo conforme se vayan actualizando los navegadores.

  • ai que bien!! Estaba probando con word-wrap y quedaba fatal pero esto es justamente lo que necesitaba!! Genial 🙂

    Gracias!