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? ;)

Desde hace unos días esta disponible una nueva versión de Sass con varias novedades interesantes (lectura recomendada: Haml and Sass 3.1 are Released).

Pero lo mejor es que también tenemos una nueva versión (y sitio) de Compass. Esta versión incorpora:

• La posibilidad de crear sprites de imágenes desde el mismo .scss (antes también se podía, utilizando Limonade, el cual ahora forma parte del núcleo de Compass);
• Congruencia de estilos: Ahora, los mixins CSS3 tratan de coincidir con la sintaxis estipulada CSS3, de forma que no tengamos que aprender cosas nuevas al utilizar Compass;
• Nuevo módulo para utilizar Vertical Rhythm;
• Actualización de BluePrint a la versión 1.0.

¿Todavía no usas Sass y Compass? Hace unos meses realice tres screencast con los conceptos básicos de las herramientas.