Hyphens extendido. Mayor control con Css en el corte de palabras. 17.3.13

Hyphens extendido. Mayor control con Css en el corte de palabras.

La propiedad hyphens, incluida en el documento CSS Text Level 3, ayuda a introducir cortes dentro de la palabra para forzar que una parte aparezca en una línea y la sobrante en la siguiente. Añade un guión medio (-) para indicarlo.

p, blockquote { -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; -o-hyphens:auto; hyphens:auto; /* otros valores: auto & none */ word-wrap:break-word; }

A día de hoy ni Chrome ni Opera le dan soporte. Firefox, Internet Explorer 10 y Safari sí.

Y eso era todo. Y digo todo porque no había nada más. Ninguna otra propiedad para controlar ningún otro aspecto en el corte de palabras... hasta ahora

Hyphens en el CSS Text Level 4

El nuevo documento Css Text Level 4 viene con novedades en la separación de palabras. En concreto introduce control en tres aspectos:

1. hyphenate-limit-zone
2. hyphenate-limit-chars
3. hyphenate-limit-lines

La propiedad hyphenate-limit-zone

O control de la zona (espacio) donde se pueda realizar la separación de la palabra. El valor indicado lo es sobre la longitud de la línea (no de la anchura del elemento) y antes de aplicarse la justificación del texto (si estuviera declarada). Se aplica a elementos de bloque.

El funcionamiento es un tanto peculiar: Si la última palabra de una línea cae dentro de la zona declarada (sin necesitar ella corte) no se produce la separación en la siguiente palabra. Si esta última palabra de la línea queda fuera de la zona, la primera palabra de la siguiente línea "se sube" a la línea anterior y se realiza el corte de esta palabra "subida arriba", siempre que no lo impida alguna de las siguientes propiedades.

Se comprende mejor con una imagen y en base a ella el funcionamiento de esta propiedad:

En la línea 2 del texto de la imagen, como la última palabra ("del") queda dentro de la zona declarada no se sube la primera palabra ("elemento") de la siguiente línea, de la tercera. Sin embargo, la última de la tercera línea ("aplicarse") está fuera, así que la siguiente palabra (primera de la cuarta línea: "justificación") sí se sube y se recorta con el guión. Lo mismo ocurre con la siguiente, la palabra "declarada".

La propiedad hyphenate-limit-chars

La propiedad hyphenate-limit-chars se aplica a todos los elementos. Los valores permitidos son la palabra clave |auto| y números enteros. Admite hasta tres anotaciones en cada valor separadas por un espacio (no comas |,|). Una declaración de ejemplo y sobre ella la explicación:

El primer dígito (el 6 del ejemplo) indica el número mínimo de caracteres que tiene que tener la palabra para permitir su corte. El guión |-| insertado para la separación no cuenta.
El segundo (el 2) indica el número mínimo de caracteres que debe haber antes del corte.
El tercer valor (el 3 del ejemplo) marca el número mínimo de caracteres que deben pasar a la línea siguiente tras la separación.

Si se omite el tercero su valor computado es el declarado para el segundo. Si también se omite éste se computan los dos últimos como auto. Y la expresión |auto| declarada expresamente o por omisión significa que se deja a criterio del navegador cómo y cuando hacer las separaciones.

La propiedad hyphenate-limit-lines

Si te fijas de nuevo en la imagen primera que acompaña el artículo, verás que hay guiones de separación en las tres últimas líneas (de las 4 mostradas). Esto puede resultar antiestético e incluso molesto en la lectura.

La propiedad hyphenate-limit-lines indica el número de líneas consecutivas en las que se pueden producir cortes de palabras. Se aplica a elementos de bloque. Admite como valor un número entero o la palabra clave no-limit para anular la herencia, puesto que se hereda de padres a hijos.

Además de los aspectos anteriores, el nuevo documento introduce dos propiedades más para mejorar el control de la separación de palabras por el diseñador:

La propiedad hyphenate-limit-last

Esta propiedad indica el comportamiento de la partición de palabras en la última línea de los elementos, columnas, páginas y spreads. Un spread es un conjunto de dos páginas que son visibles para el lector al mismo tiempo.
Los valores admitidos y su significado son:

• none No hay restricciones a la separación.
• always Siempre prohibido. Esto es, en la última línea no se puede partir la última palabra.
• spread No permitida la separación de la palabra entre dos spreads.
• page Prohibe el corte entre los spreads y páginas.
• column Impide la separación entre columnas, páginas y spreads.

La propiedad hyphenate-character

Por si quieres usar un carácter distinto al guión que por defecto se emplea en el corte de palabras (-). Como este valor se hereda admite el valor | auto | para el carácter por defecto, que en las lenguas latinas es el (U+2010). Recuerda que tanto para este valor como para cualquier otro que utilices deberías usar la codificación propia de Css, como en la propiedad content:

Soporte y fin

El documento Css Text Level 4 luce una bonita advertencia. La que ves a tu derecha. Estamos hablando de un borrador de trabajo de los editores. Así que todo puede cambiar o incluso quedar olvidado.

Hoy por hoy en los navegadores que tengo disponibles en vista (FF, Chr, Opera, Safari, IE9) no he obtenido resultado con estas nuevas propiedades. En alguna parte leí que IE10 y Safari en IO sí lo hacen con alguna de ellas.

Así que no he podido jugar con ellas y ver un mínimo cuál es el resultado al actuar conjuntamente e interactuando con otras propiedades del texto como alineamientos, justificaciones, tamaños de cajas, columnas... Así que habrá que estar atento a su evolución y sobre todo, ver los resultados para evitar resultados imprevistos y antiestéticos como los grandes ríos entre líneas al justificar textos.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso