CSSLab

Modernizando los drop caps

Tweet

Para quien no los conoce, los drop caps son recursos gráficos utilizados desde hace siglos, a modo de adornos de letras iniciales de los bloques de texto. Esta letra inicial es la primera de un trabajo, capítulo o parágrafo, la que tiene la característica de ser mayor que las otras. Suele ocupar varias de las líneas de texto de ese parágrafo, y antiguamente era muy ornamentada, destacándose por sobre el contenido del texto.

Bueno, este recurso gráfico puede ser logrado a través de CSS sin trucos, ya que existe una pseudo-class :first-letter que, milagrosamente, es reconocida por todos los browsers importantes, por lo que podemos colgarnos de él para lograr este efecto. Algunos recordarán que utilizamos esta misma pseudo-class para lograr bloques de texto con estilo. Bueno, esa vez fue una técnica; ahora la utilizaremos para el propósito con que fue creada.

El HTML que utilizaremos no será más que un bloque de texto con Lorem Ipsum.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo….</p>

Con CSS haremos que la primera letra crezca y que ocupe su lugar al rincón izquierdo superior, incluyendo las líneas de texto necesarias para ello a través de float:

p:first-letter {
     font-size:100px;
     margin: -10px 5px -15px 0;
     float:left;
}

Tuve que implementar margin negativo para que pudiera ubicarse bien dentro del espacio que le corresponde, lo que no fue muy bien aceptado por IE6. Pero bueno, hay que encontrar un concenso en este aspecto entre browsers.

Ver ejemplo 1

Ahora, esto no quita que podamos hacerlo más bonito, reemplazando la letra en sí por una imagen que crearemos y aplicando la técnica de image replacement que más les acomode. Eso sí, en este caso no podemos utilizar :first-letter ya que no soporta text-indent para hacer la primera letra desaparecer, y menos definir un width y height (aunque sólo Safari lo soportó en mis tests). Para esto, tendremos que crear una class y aplicárselo a un <span> que rodee la primera letra.

<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo….</p>

.dropcap {
     background: url(l_cap.gif) no-repeat;
     width: 106px;
     height: 100px;
     margin: 5px 5px 0 0;
     float:left;
     display: block;
     text-indent: -9999px;
     overflow: hidden;
}

Ver ejemplo 2