Modernizando los drop caps

29/nov/2007 8

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.

SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

Ejemplo de Drop Cap

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

Comentarios

  1. tony [#]

    Aunque supongo que utilizar imagenes por letras va un poco contra la accesibilidad ¿no?

  2. CSSLab Admin [#]

    no tony, si estas escribiendo el texto y al mismo tiempo escondiendolo para poner una imagen encima, el txt aun esta ahi pero oculto. los lectores de pantallas y los buscadores aun la leeran, pero no la mostraran.

  3. fearlex [#]

    Muy buen tip, gracias 😀

  4. tony [#]

    sorry admin, tienes razón. gracias

  5. pablo vivanco [#]

    una pregunta para el administrador , ¿ qué sitema ocupas para los rollovers de el sitio ? , había ocupado uno basado en JS pero en IE no es muy funcional, el tuyo si

  6. CSSLab Admin [#]

    pablo, nose a q te refieres con rollovers, supongo q son los tooltips. si es asi uso qTip.js. los otros rollovers son puro css.

  7. pablo vivanco [#]

    admin, se agradece la respuesta, vere si doy con ello.

  8. Ruben [#]

    Drop Caps = Letra Capital, de toda la vida.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab