Letras Capitulares. Uso histórico y mejores prácticas en webs. 4.4.12

Letras Capitulares. Uso histórico y mejores prácticas en webs.

Artículo recomendado por KsesoCss: Drop Caps. Historical Use And Current Best Practices en Smashingmagazine _[ing].

Excelente y amplio artículo sobre el uso de las letras capitulares. Diversos métodos ilustrados, con el css empleado.
A continuación tienes un pequeño extracto del mismo. Pero es sólo eso, un resumen, así que la recomendación es que pases por el original y no pierdas detalle del mismo.

A modo de introducción comienza con un repaso del uso de las letras capitulares tanto en manuscritos como en los primeros libros impresos, los incunables, ilustrados con bellas imágenes de los mismos, sólo estas últimas ya merecerían la pena tu visita a artículo, para a continuación centrarse en su uso en la web.
Expone cuatro métodos, con el html y css utilizados e ilustrando el resultado con imágenes.

Letras Capitulares en la web. Cuatro métodos o técnicas:

1ª Técnica: Reemplazadas por imágenes

Consiste en mostrar una imagen en lugar de la letra correspondiente, ocultada con text-indent. Para olvidarse de la disparidad de SO, navegadores o sus versiones para móviles (smartphones)

2ª Técnica: Letra sobre background-image

Se mantiene la letra visible y se coloca sobre un fondo. Presenta algún problema en los mismos navegadores que el anterior método: Opera Mini 5.1 (Android 2.2), and Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS).
Con la ventaja que podrás utilizar la misma tipografía en la capitular que en el resto del texto o cambiarla a voluntad con una simple edicción del css, sin necesidad de cambiar un montón de imágenes

3ª Técnica: Uso de span sin imágenes:

No tan vistosos como los anteriores, sólo podrás jugar con las "propiedades: valores" de css aplicables a los textos. Presenta algún inconveniente en los mismos SO y navegadores que los anteriores. Eso sí, para quienes se preocupen (aún) de ie6 está libre este método no os dará problemas.

Y por último la que más me gusta. CSS de verdadero Druida:

4ª Técnica: Selectores avanzados y pseudoelementos.

p:first-letter y afinado con p:first-child:first-letter si sólo quieres que aparezca en el primer párrafo. Claro que a mayor nivel los mediocres y limitados (malos navegadores y versiones reducidas) no se enterarán y no las mostrarán.

Empleando éste tendrás la ventaja de la limpieza de código html (prescindes de un span) y menos css:

Y si a lo anterior, con esta técnica, te parece poco, súmale la ventaja de la accesibilidad.
Con los tres primeros los lectores de voz separan la letra capitular del resto de la palabra. Pronuncian la letra y a continuación el resto. Así te podrías encontrar con cosas como "eme amá" en lugar de "mamá" o cosas aún peores.

Al final del artículo se centra en algunas particularidades referentes a las diferencias entre las letras (su tamaño y espaciado: no es lo mismo una "I" que una "T" o una "M" y cómo eso afecta estéticamente) o la diferencia de colocación con el último método.

Y como final, o casi, cuál es el mejor método de los cuatro, para la autora, Laura Franz, según sea lo prioritario.

BONUS final de mi cosecha

No puedo realizar, o al menos yo no me quedo a gusto, un resumen tan extenso sin aportar algo a este completo análisis sobre los métodos de uso de las letras capitulares. Así que aquí tienes como premio final por leer este tocho que me ha salido:

Borda las letras Capitulares usando @font-face

Y para eso nada mejor que tener a mano una buena colección de tipografías de calidad acordes. Una página que vale su peso en oro si eres amante de "de lo bueno lo mejor": Paul Lloyd Fonts. Investiga la página a profundidad.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso