Mejores Capitales En Arracada CSS Con "initial-letter"

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las letras capitales en arracada o descendentes son una forma decorativa usada en ocasiones al comienzo de un bloque de texto; la letra inicial recorre varias líneas hacia abajo ocupando el cuerpo de las mismas.

Example of a drop cap by The Walrus — Ejemplo de letra capital en arracada, vista en The Walrus

Drop cap example as found on Nautilus — Ejemplo de capital en arracada, vista en Nautilus

Es una tradición tipográfica tan vieja como la historia de la tipografía misma, y estos días lo podemos emular con CSS mediante el pseudo elemento ::first-letter. Aplicar estilo a esta primera letra, en cualquier caso, es un poco tosco, pero la propiedad initial-letter propuesta intenta solucionarlo. Vamos a examinar de que se trata, lo que nos permite hacer, y lo que podemos esperar en el futuro.

El Enfoque Actual

Empecemos con un ejemplo; un párrafo de texto.

Please accept marketing cookies to load this content.

Seleccionamos el primer carácter en el párrafo usando el pseudo elemento ::first-letter. El enfoque para la aplicación del estilo actual sería flotar el carácter con p::first-letter { float: left; }, extrayéndolo de flujo del texto del párrafo, y después le asigna un tamaño adecuado.

Please accept marketing cookies to load this content.

Esto no es malo, y podríamos ir más lejos mediante la propiedad line-height, y el posicionamiento. También tiene un perfecto soporte. Aunque ciertamente no es perfecto; para disfrutar verdaderamente lo que las capitales nos pueden ofrecer necesitamos un control más preciso, y flexibilidad.

Una Nueva Solución

La propiedad initial-letter, está siendo debatida como Borrador del Editor por la W3C en la actualidad (la fase temprana dentro del proceso de estandarización), intenta darnos el control tipográfico que deseamos. Se usa en combinación con first-letter.

El primer valor que toma determina el tamaño de la letra inicial, en términos de cuantas líneas ocupa.

1	p::first-letter {
2	initial-letter: 3;
3	}

Aquí tienes el resultado:

Please accept marketing cookies to load this content.

Desventajas

Lo siento, termina aquí. El soporte todavía es muy pobre. En el momento en el que escribo el artículo, la muestra de arriba solo se mostraría correctamente si estás usando Safari OS X, o un navegador iOS, y solo porque estamos usando la sintaxis del prefijo: -webkit-initial-letter:3;

Aquí tienes algunas capturas de pantalla por si no te es posible ver lo mismo que yo:

Initial letter demo in Safari OS X — Muestra de letra inicial, en Safari OS X

Initial letter demo in Safari iOS — Muestra de letra inicial, en Safari iOS

Lo primero que notarás son las diferentes fuentes. Ningún navegador parece funcionar bien con initial-letter y fuentes web. Cualquier fuente instalada en tu sistema funcionará bien, aunque deben ser declaradas explícitamente; usar una declaración general serif o sans-serif; al final del bloque de fuentes no parece tener impacto. Necesitarás algo como font-family: "my web font", arial; para batir la falta de soporte del navegador.

Lo segundo que verás es la línea superior del texto disparándose fuera de la página por la derecha. Esto es un error, así que de momento necesitaremos hacer un rodeo. Felizmente, es posible forzar los límites de la letra inicial más allá del tope superior del párrafo contenedor (por tanto hacemos que el navegador entienda que la línea superior no debería ser igual a la anchura total del contenedor). Un valor más bien grande para margin-top solucionará las cosas:

Please accept marketing cookies to load this content.

@jensimmons aquí tienes un intento por parte de un "no ingeniero de navegadores" de explicar lo que *creo* que está ocurriendo ^lan pic.twitter.com/tODqdaKX40
– Envato Tuts+ Web (@wdtuts) April 14, 2016

Segundo Valor

Okay, avancemos. La aceptación del segundo valor initial-letter es opcional. Determina en cuantas líneas la letra desciende.

1	p::first-letter {
2	initial-letter: 3 2;
3	}

Aquí hemos declarado que la letra tiene una altura de tres líneas, aunque baja dos.

Please accept marketing cookies to load this content.

Este estilo es conocido como "inicial hundida", más que "capital". Nuevamente, aquí tienes una captura de pantalla por si no estás pudiendo ver los resultados deseados:

Convertirla en Responsive

Las grandes letras capitales pueden quedar fantásticas, pero en una ventana estrecha deberías considerar la letra capital como parte de tu tipografía responsiva. Seguramente tienes un texto con un cuerpo más pequeño para las pantallas pequeñas, así que considera usar una letra capital proporcionada.

/* set base paragraph styles */
p {
    font-size: 1em;
}

/* set base drop cap styles */
p::first-letter {
    initial-letter: 2;

    color: #c69c6d;
    margin: 1em .2em 0 0;
}

/* mobile first media query */
@media only screen and (min-width: 800px) {
  
    /* set paragraph styles for larger screens */
    p {
        font-size: 1.25em;
    }
  
    /* set drop cap styles for larger screens */
    p::first-letter {
        initial-letter: 3 2;
        margin: 1em .5em 0 0;
    }
  
}

More readable initial-letter — Mantener la legibilidad en pantallas pequeñas

Segunda Opción

Si estás viendo estos ejemplos en navegadores que no lo soportan, te estarás preguntando cuál es la mejor manera de evitar el estúpido aspecto resultante.

Unsupported initial-letter — Aplicar estilo a initial-letter, cuando no es soportada la propiedad

Estamos obteniendo todos los estilos excepto las cosas que la hacen realmente actuar como capital. Usando la funcionalidad de las queries en CSS puedes aplicar tus estilos de forma selectiva. Envuelve los estilos de tu letra capital dentro de una declaración condicional del tipo @supports como la siguiente:

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
 
 /* your initial-letter styles here */
 
}

Si initial-letter es soportado, los estilos serán aplicados–si no, no lo serán.

Note: ni siquiera todas las funciones de las queries CSS tienen soporte universal, así que tómate esto con cautela. Modernzr sería una apuesta más segura.

Llevando esto más lejos, podrías incluso desear aplicar dropcap.js JAvaScript polyfill de Adobe, pero no lo veremos ahora aquí; Dudley Storey realiza un gran trabajo sobre el tema en su blog.

Conclusión

Todavía es muy pronto, pero la propiedad initial-letter es prometedora. Echa un vistazo a más propiedades como initial-letter-align, que sirve de ayuda con los alfabetos no romanos, y initial-letter-wrap que permitirá mejores ajustes del texto alrededor.

Los ejemplos que he usado son muy funcionales, pero ¡imagina las puertas que puede abrir para la tipografía decorativa! En principio somos libres de usar muchas propiedades conocidas en la letra capital, incluyendo:

Todas las propiedades de fuentes habituales
Color y opacidad
Sombreado de texto y otras decoraciones de texto
Propiedades para transformaciones
¿y qué hay sobre la acción background-clip?

Please accept marketing cookies to load this content.

Para actualizaciones sobre su progreso lo mejor es seguir a @jensimmons (está siempre al corriente sobre el tema).

Lecturas Complementarias

Borrador del Editor en W3C
Daily Drp Cap: Inspiración visual de Jessica Hische
Letras Iniciales en MDN