CSS Programación Tips

Trucos CSS: Los mejores y más eficientes métodos para usar Letras Capitales

¿Cómo poner en CSS las primeras letras en mayúscula ocupando varias líneas?

Las letras capitales, o en inglés drop letter, son aquellas que encabezan un párrafo ocupando varias lineas de altura. Eran muy habituales en libros incunables, es decir, los escritos por monjes antes de la invención de la imprenta.

También pueden encontrarse con frecuencia en periódicos antiguos y… ¿por qué no? Las podemos incorporar hoy a cualquier diseño ya que, lejos de lo que pudiera parecer, si elegimos adecuadamente color, fuente y tamaño, darán un toque muy elegante y moderno a nuestro site.

En este miniartículo vamos a explicarte varias caminos para poder crearlas, así como algunas propiedades experimentales y hacks que pronto nos facilitarán la vida.

 

Capital letter con initial-letter

initial-letter es una propiedad experimental que facilitará mucho las cosas en un futuro, pero que de momento, únicamente es compatible con Safari:

A modo de recordatorio express diremos que las propiedades experimentales son propuestas por los desarrolladores de los navegadores, y que el W3C acaba estandarizándolas o no, tras un tiempo.

Son fácilmente reconocibles pues, hasta que se estandarizan, llevan prefijos como mozwebkit .

initial-letter seleccionará la primera letra de un elemento y le aplicará 2 valores: Altura en líneas y Número de líneas que bajará. Siendo ésta última opcional:
 

Cuyo resultado sería algo como:

 

Y si prescindimos del caracter optativo:

 

 

¿Y mientras se aprueba initial-letter?

Tendremos que recurrir al método clásico, el selector ::first-letter y la propiedad line-height:

Todo el código anterior tiene un soporte muy contrastado en todos los navegadores, por lo que no deberíamos tener ningún problema para crear cosas como estas:

Example of a drop cap by The Walrus
Drop cap example as found on Nautilus

Mezclando ambos métodos

CSS contiene declaraciones condicionales que nos permiten aplicar un estilo bajo determinadas condiciones. Los media queries son un ejemplo de ello.

En este caso, vamos a utilizar el tipo @supports para indicarle al navegador que, si está soportado initial-letter, cargue el estilo correspondiente:

 

Y… ¡eso es todo! Espero haberos podido ayudar 😉

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario