Letras capitulares en Css: el pseudoelemento ::first-letter y su propiedad "initial-letter" 28.10.15
Particularidades de las letras capitulares o drop caps en Css y su ajuste fino con el pseudoelemento ::first-letter y la nueva propiedad initial-letter
Letras capitulares en Css: el pseudoelemento ::first-letter y su propiedad "initial-letter"
El uso de letras capitulares
o drop caps
en la web es un préstamo, como otros muchos, de lo que se ha venido haciendo en la impresión gráfica desde siempre. En ambos medios es un recurso que bien utilizado le da un punto extra a los textos.
Para poder acceder a la primera letra de un párrafo, Css desde su versión 2, define el pseudoelemento ::first-letter que debe formar parte obligatoriamente del pseudoelemento ::first-line [ver post]
Sin embargo, la gestión y control de la primera letra o ::first-letter mediante Css no es todo lo completa y sencilla que sería de desear.
Por su propia naturaleza se ve afectado por una mezcla de características de diversos tipos de elementos sobre los que hay que actuar (declarar propiedades y valores) para lograr la presentación visual deseada.
Se trata de un elemento del tipo inline-block a la vez que textual. Así que de entrada tiende a alinear su base inferior con la primera línea de texto en la que se encuentra, sobresaliendo por la parte superior y forzando un espacio (tipo margen) de su párrafo con el elemento precedente.
Para evitarlo y que se "coloque hacia abajo" (esto es, se integre en el cuerpo del párrafo al que pertenece), lo primero que hay que hacer es flotarla:
p::first-letter {
float: left;
}
A lo anterior suma que la primera letra también se ve afectada por las propiedades de los textos, entre otros, por la altura de línea line-height y el tamaño de la tipografía font-size. Ambas muy relacionadas con el poco intuitivo interlineado css.
Sin olvidar la estética en la horizontal, pues cada carácter tiene una anchura que varía de letra a letra y de tipografía a tipografía: desde la más ancha (la M
o W
a la i
o l
).
Y como siempre ocurre, con las letras capitulares o drop caps
también existen inconsistencias de navegador a navegador. Implementaciones dispares hacen que según qué declaraciones Css tengan un efecto u otro.
Pese a todo, es relativamente sencillo lograr la presentación deseada de la letra capitular de un párrafo:
- Alineación superior de la letra capitular con la primera línea del párrafo.
- Alineación inferior de la letra capitular coincidente con la línea correspondiente sin que haya un espacio en blanco excesivo bajo ella.
- Espacio a su derecha respecto a las líneas de texto.
See the Pen Drop Caps by Kseso (@Kseso) on CodePen.
Si usas Firefox para visualizar esta demo no olvides que no entiende la propiedad column-gap
En esta demo he añadido fondos y bordes a ::first-letter para que adviertas un detalle: hasta dónde llega la altura del carácter que es distinto al tamaño (altura) de la caja generada por el pseudoelemento.
Pero... (sí, hay peros), pero cualquier variación en uno de los valores de ::first-letter como su tamaño o familia tipográfico hará necesario tener que retocar el resto de valores.
initial-letter nueva propiedad Css para ::first-letter
Para ayudar a la gestión del pseudoelemento ::first-letter un grupo de trabajo del consorcio W3c ha publicado recientemente el documento CSS Inline Layout Module Level 3
. Con estatus actual de Editor’s Draft
.
Una de las novedades presentes en él es la propiedad css initial-letter exclusiva del pseudoelemento ::first-letter y del primer hijo de naturaleza inline
de los elementos de bloque. Esta nueva propiedad se ve complementada con la propiedad Css initial-letter-alignment
.initial {
initial-letter: 3;
initial-letter-alignment: auto;
}
initial-letter
El valor de la propeidad initial-letter admite dos argumentos separado por un espacio en blanco. El primero obligatorio y el segundo opcional. Ambos deben ser un número entero y positivo.
El primero indica la altura en número de líneas que ocupará la letra capitular o ::first-letter. En el código anterior (y la imagen que lo acompaña) se declara una altura de 3 líneas.
El segundo valor, omitido en el código anterior de ejemplo, indica el número de líneas (hacia el párrafo o dentro de él) que ocupa la letra capitular. En su ausencia (esto es, por defecto) es el mismo que el declarado para la altura ocupada.
Si se declarase initial-letter: 3 2; el resultado sería que la primera letra tendría una altura de 3 line-height ocupando 2 "alturas de línea" dentro del párrafo y sobresaliendo 1 "altura de línea" (3 - 2) por encima del párrafo. Tal como puedes ver en la imagen adjunta a este párrafo.
initial-letter-alignment
La propiedad initial-letter-alignment controla cómo o respecto a qué se realiza la alineación de la primera letra. Los valores propuestos en el documento son:
- auto: el navegador elije la alineación correspondiente al idioma usado.
- alphabetic: En nuestro sistema de escritura se corresponde con "auto". La parte superior de la letra capitular se alinea con la parte superior de las letras mayúsculas de la primera línea y la parte inferior (baseline) de la letra capitular con la baseline de la última línea ocupada.
- hanging: la línea base superior de la primera letra se alinea con la base superior de la primera línea de texto.
- ideographic: la primera letra se centra verticalmente en el área formada por la líneas que ocupa (initial-letter).
Estado actual
¿Suenan bien y tienen buena pinta estas novedades, ¿no?, para el control de las letras capitulares o drop caps. Fácil, limpio e independiente de las particularidades que comentaba al inicio del artículo.
Pero... (sí, otro pero más, el segundo del post), pero debido a su reciente formulación y estado del documento hoy por hoy no he encontrado soporte en ningún navegador. Pese a que en algún lugar haya leído que Chrome Canary lo incluya yo no he sido capaz de verificarlo. Con y sin prefijo privatido. Quizás sea que haya que habilitarlo.
Una variante de letra capitular a investigar
Ya sea con el tradicional ::first-letter o la propiedad initial-letter la primera letra genera una caja rectangular, como cualquier otro elemento, típica del box model de css. Sea cual sea el carácter y su composición tipográfica la alineación de las líneas de texto se hace respecto a dicha caja rectangular generada y no siguiendo el contorno de la letra.
Una variante en la alineación de líneas del párrafo respecto a la primera letra sería que siguiesen el contorno del carácter.
¿Sería posible lograrlo con Css? Ya sea con algunas de las novedades de Css como clip-path: polygon() o la propuesta de Shapes Css
? O ¿quizás sea más conveniente apoyarse en SVG?
Pero tranquilo, pierde cuidado que hoy no toca divagar sobre esta variante y darte la vara con ello. Esa es otra historia que debe ser contada en otro tiempo.
Pero si tienes alguna idea o demo sobre este último punto o sobre el uso de las letras capitulares o drop caps tienes los comentarios a tu entra disposición.
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