Los guiones de corte automático

Un guión es un signo de puntuacion que se usa para cortar las palabras al final del renglón. Así, el texto quedase alineado en su espacio asignado (o justificado cuando está alineado a la izquierda y a la derecha al mismo tiempo).

Hasta ahora, se podía hacer de dos maneras: o mediante la colocación de un guión condicional (que indica al navegador onde las palabras pueden ser cortadas mediante la inserción del carácter especial ­, para soft hyphen), o con el uso de un script javascript para poner los guiones del lado del cliente. Una tercera vía es ahora posible: la hoja de estilos CSS3.

Los guiones de corte automático en CSS3

Mediante la adición de estas tres líneas en su hoja de estilo, va a ayudar su texto justificado a ser visualizado muy bien sin estes espacios vacios y feos en el medio de las líneas.

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

Los tres valores posibles son: none, manual y auto.

También debe decirle al navegador el idioma que utiliza si desea que el aplique las buenas reglas de corte automático. Por ejemplo, el castellano, el inglés y el francés no utilizan las mesmas reglas. Para hacer esto, debe utilizar el atributo HTML lang o el atributo XML xml:lang.

Firefox soporta actualmente los siguientes idiomas (de acuerdo a su versión): afrikaans (af), alemán (ortografía tradicional, de-1901 y ortografía reformada, de-1996), alto sorabo (hsb), búlgaro (bg), catalán (ca), danés (da), esloveno (sl), español (es), estonio (et), finlandés (fi), francés (fr), galés (cy), gallego (gl), húngaro (hu), inglés (americano, en-US), islandés (is), italiano (it), kurmanji (kmr), latino (la), lituano (lt), mongol (mn), neerlandés (nl), noruego bokmål (nb), noruego nynorsk (nn), portugués (pt), ruso (ru), serbo-croata (sh), sueco (sv), suizo-alemán (ortografía tradicional, de-CH), turco (tr) y ucranio (uk). 

Dos lenguajes artificiales también son soportados: el esperanto (eo) y la interlingua (ia).

Quizá pronto veremos el sindarin (sjn), el quenya (qya) o el klingon (tlh) estar soportados (¿Alguien ya ha establecido las reglas de corte automático del klingon?). 

Internet Explorer 10 soporta los siguientes idiomas: catalán (ca), checo (cs), danés (da), español (es), francés (fr), inglés (en, en-US), italiano (it), neerlandés (nl), noruego bokmål (nb), noruego nynorsk (nn), polaco, portugués (pt), portugués del Brasil, ruso (ru), sueco (sv) y turco (tr).

Los guiones de corte automático en javascript

Hyphenator es una biblioteca Javascript trabajando en el lado del cliente. Su uso básico es tan simple como hacer un enlace para el script, asignar valores a sus parámetros y llamarlo con el texto a procesar. Aquí está un ejemplo con algunos parámetros, como useCSS3hyphenation que pasa la mano al CSS3 cuando é soportado para poner los guiones de corte automático, safecopy que permite el copiar y pegar del texto procesado sin los guiones condicionales, y hyphenchar que permite elegir el carácter separador (el guión condicional codificado en HTML por defecto).

Hyphenator.config({
    minwordlength:2,
    remoteloading: false,
    useCSS3hyphenation: true,
    safecopy:true
});
Hyphenator.hyphenate('Por favor, déme guiones de corte automáticos (aunque anticonstitucionalisimamente)!', 'pt');

Hay otras maneras de utilizar el Hyphenator, tal como bookmarklet, ou para aplicar los guiones de corte automático en diferentes idiomas en la misma página.

En el momento en que estoy escribiendo estas líneas, la versión 4.0.0 de esta biblioteca ya soporta los siguientes idiomas: alemán, armenio, bielorruso, bengali, catalán, checo, danés, eslovaco, esloveno, español, finlandés, francés, griego (monotonal, politonal y clásico), gujarati, hindi, húngaro, inglés (US y GB), italiano, kannada, latino, letón, lituano, malayalam, neerlandés, noruego, oriya, punjabi, polaco, portugués, ruso, sueco, tamil, telugu, turco y ucranio.

Los guiones de corte automático del lado del servidor

Los mismos algoritmos de corte automático se pueden aplicar del lado del servidor para poner tanto guiones condicionales como sea posible en las palabras en HTML. Sin embargo, como la presentación pasa en el lado del navegador, sería mejor dejar que se encargue de esta tarea (más aún, de este modo podemos evitar los efectos colaterales del copiar y pegar donde todos los guiones condicionales se recuperan en el texto copiado).

Conclusión

Con estas tres formas diferentes de manejar los guiones de corte automático, no tiene más excusas para mostrar textos que no se comportan de una manera tipográficamente adecuada, incluso en un espacio pequeño. El método que prefiero es, sin duda, lo de la biblioteca javascript Hyphenator, ya que sigue el principio de degradación gradual usando el CSS3 siempre que sea posible.

Hyphenation on the web (en inglés)
Les césures automatiques (en francés)
A hifenização automática (en portugués)