Letras capitales en CSS: uso de la primera letra y la letra inicial

Índice

::Selector de pseudoelementos first-letter
Propiedad de letra inicial

Las letras capitulares se han utilizado durante mucho tiempo en los medios impresos para dar estilo a la primera letra del primer párrafo de una sección o capítulo. Estas letras capitulares ayudan a llamar la atención y atraer al lector, y a menudo es una buena ocasión para utilizar una fuente muy estilizada porque se aplica solo en una letra, por lo que no afectará la legibilidad del texto. El mismo efecto de letra capitular se puede lograr con CSS utilizando el::primera letrapseudo elemento y el nuevoletra inicialpropiedad.

::Selector de pseudoelementos first-letter

::primera letraes un selector de pseudoelementos similar a::antesy::despuésEsto hace que la primera letra de un elemento sea estilizable como si fuera su propio elemento distintivo, todo sin tener que agregar ningún marcado adicional a sus páginas.

A continuación se muestra un ejemplo sencillo en el que aplicamos estilo a la primera letra del primer párrafo o elemento del artículo:

article p:first-child::first-letter {  color: hotpink;  padding: 0 .3rem;  margin: 0 .3rem 0 0;  border: 2px solid;  border-radius: 8px;  font-family: "IBM Plex Mono", monospace;}

Y con esto obtenemos algo como esto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. En id consequat lorem.

Sin embargo, en el paraíso hay problemas. Observa lo que sucede si usamos un tamaño de fuente más grande; una de las características principales de una letra capital típica:

article p:first-child::first-letter {  color: hotpink;  padding: 0 .3rem;  margin: 0 .3rem 0 0;  border: 2px solid;  border-radius: 8px;  font-family: "IBM Plex Mono";  font-size: 4rem;  line-height: 1;}

Además de utilizar un tamaño de fuente más grande, también establecemos un valor bajo paraaltura de líneapara que la altura de línea de la primera línea no se vea influenciada por la altura de línea inicial de esta primera letra dada la fuente más grande. El problema es que la letra capital no cae exactamente . Una solución es usar los buenos y viejos flotantes:

article p:first-child::first-letter {  color: hotpink;  padding: 0 .3rem;  margin: 0 .3rem 0 0;  border: 2px solid;  border-radius: 8px;  font-family: "IBM Plex Mono", monospace;  font-size: 4rem;  float: left;  line-height: 1;}

El soporte del navegador para ::first-letter es prácticamente universal.

Propiedad de letra inicial

Una alternativa al uso de flotadores junto conaltura de líneaytamaño de fuentePara diseñar correctamente las letras capitulares se debe utilizar el nuevoletra inicialpropiedad, que espera un valor numérico que represente la cantidad de líneas que debe abarcar la letra capital. A continuación, el navegador calcula automáticamente el tamaño de fuente adecuado:

article p:first-child::first-letter {  color: hotpink;  padding-right: 8px;  -webkit-initial-letter: 3;  initial-letter: 3;}

Al momento de escribir esto, esta última demostración solo funcionará como se espera en Safari. A diferencia de ::first-letter, la compatibilidad con initial-letter es casi inexistente en este momento, lamentablemente. Por lo tanto, por ahora tendremos que seguir usando flotantes durante un buen tiempo. Si aún desea usar initial-letter, probablemente desee usarlo con una regla @supports para que la letra capital no se vea extraña en navegadores que no la admitan.

Deja una respuesta Cancelar la respuesta

Letras capitales en CSS: uso de la primera letra y la letra inicial

::Selector de pseudoelementos first-letter

Propiedad de letra inicial

Tal vez te puede interesar: