En la escuela todos aprendimos la utilización del guión ortográfico para separar una palabra en dos partes cuando finalizamos un renglón y comenzamos otro. En HTML, si queremos incorporarlo en un párrafo debemos utilizar la entidad ­

<p>UnaPalabraMuyLarga­QueTieneElGuionOrtografico</p>

Demostración del uso. La particularidad de su utilización es que la entidad sólo aparece cuando es necesario (es decir, cuando la palabra debe ser recortada) caso contrario es invisible.

Creo que es importante saberlo, para poder aprovecharlo en elementos adaptables a diferentes tamaños de pantallas. Por ejemplo: si el ítem de un menú es muy largo, podemos agregar un guión ortográfico para separar la palabra en dos cuando el ancho del menú sea reducido.

Por otro lado, el draft de la especificación CSS3 determina varios estilos que permitirán controlar la forma y el modo con que se utiliza el guión ortográfico, incluso actualmente -webkit-hyphens es compatible en Safari para iOS y en algunas versiones Nightly Builds de Firefox, Safari y Chrome.

Finalmente, para continuar más en profundidad, muy recomendable el artículo The Look That Says Book en The List Apart.

Hace unas semanas, mientras trabajaba en el diseño de Biblioteca Comunidad Joomla, me vi en la necesidad de agregar unos ribbons (o cintas, en español) para los títulos de los libros. No quería hacerlo con imágenes, sino con CSS, ya que es posible y no es tan complicado.

Así que tomando el modelo de 3D Ribbon Generator decidí crear una extensión para Compass que permite crearlos de manera sencilla:

Ejemplo finalizado.

Los ribbons son compatibles con IE7+, Firefox 3.5+, Google Chrome y Safari / Safari iOS. Incluso la extensión ofrece soporte para CSS3 Pie, que permite agregar bordes redondeados y sombras en IE.

La utilización es bastante sencilla y flexible, toda la documentación e instalación se encuentran en el repositorio de GitHub.

Y si aún no utilizaron Compass, ¿Qué esperan? ;)

In defense of CSS hacks — introducing “safe CSS hacks” es uno de los artículos (incluyendo comentarios) más interesantes que leí en las últimas semanas:

Básicamente es un repaso por los diferentes métodos para establecer estilos para Internet Explorer, analizando pros y contras (por ejemplo, nunca había notado este problema que sucede al añadir comentarios condicionales en el HTML y sus posibles soluciones).

Al final del artículo se expone una posible solución que combina tanto los comentarios condicionales como los CSS hacks (aunque realmente no me termina de convencer el método…)

En fin, una lectura muy recomendable.