👨‍💻 Cómo resaltar la inicial de un texto con CSS

⏩ Snippet: ⏪
👉 Snippet: En revistas de papel es habitual encontrar las iniciales de los textos resaltadas de algún color y en mayor tamaño, como una indicación visual del lugar por donde se empieza a leer el texto. Si quieres introducir este elemento práctico y decorativo en una web, hay varias formas de conseguirlo. En este artículo estudiaremos cómo funcionan y sus ventajas e inconvenientes.

Portafolio de

Items 7

1. El recurso del span para letras capital
2. Método Básico
3. El pseudo-elemento ::first-letter
4. La propiedad initial-letter
5. El recurso de los Simbolos para letras capital
6. El uso de de íconos de bootstrap
7. Fuentes consultadas:

1. El recurso del span para letras capital: 👀

Por motivos estéticos o como parte de nuestra estrategia SEO, a veces necesitamos aplicar diferentes estilos CSS en el texto de la misma frase.

Ya sean letras sueltas, palabras o grupos de palabras, pintar partes de una frase en un color diferente o asignarle otro tamaño de letra es un recurso visual con resultados súper profesionales.

Realmente aplicamos estilos diferentes a palabras sin ser muy conscientes de ello. Por ejemplo, cuando asignamos negritas, cursivas o cambiamos de color una cadena de texto dentro de una oración.

Esto es lo mismo pero, en lugar de utilizar formatos predefinidos, lo que haremos es personalizar las letras y palabras de una frase según nuestras necesidades.

Una letra drop cap (capitular o capital) es donde el primer carácter del primer párrafo se hace más grande, ocupando varias líneas de texto o las primeras oraciones. Las mayúsculas se utilizan en varios medios, incluidos libros, artículos de periódicos, documentos y páginas web. Las mayúsculas añaden estilo o captan la atención del lector; estilizarlas confiere una "máxima puntuación" en materia de elegancia y presentación. Por ejemplo::

Aquí hay un párrafo que comienza con una letra capitular. Como puede se ver, la primera letra de la palabra "aquí" es grande y ayuda a enfocar esta sección. A medida que continúa escribiendo, el texto se mueve debajo de la "A" en la primera palabra de este párrafo. Para mayor vistosidad y elegancia se usó fuente Parisienne.

  
  
¿Cómo pudo aplicarse el efeto de agrandamiento sobre la vocal A?. A continuación el HTML que se aplicó:
    
<span style="float:left;font-family:'Parisienne',serif;font-size:75px;line-height:70px;padding-right:8px;">A</span>
   

Como lo dejó ver el anterior ejemplo, para producir el efecto dropcap hay que introducir la letra que pretendemos modificar (en este caso la primera) dentro de una etiqueta <span>.

Por otra parte, si quisiéramos que el efecto afectara a la palabra entera, solo habría que rodearla con la etiqueta para que también se viera modificada por la regla:

Queda claro la importancia de aplicar dicho recurso, que es indudable que tendrá un efecto poderoso en cuanto a atraer la atención del lector.

En Relaciones Humanas se destaca la importancia de cuidar la primera impresión, lo cual llevado al campo de la presentación de textos, se aplica en el cuidado de la redacción de las primeras 20 palabras y al estilizar la primera letra del párrafo (haciendo arreglos en fuente, color y tamaño), los resultados son predecibles.

La práctica de usar una letra grande para marcar el comienzo de un texto existe desde hace casi dos mil años. Las mayúsculas ilustradas aumentaron la usabilidad al marcar pasajes importantes y guiar a los lectores a través del texto. A diferencia de sus contrapartes históricas, las mayúsculas en la Web no agregan valor en términos de facilidad de uso o legibilidad, y son difíciles de controlar para los desarrolladores web, ya que a menudo se muestran de manera diferente en los navegadores.

La práctica de usar una letra grande para marcar el comienzo de un texto existe desde hace casi dos mil años. Las mayúsculas ilustradas aumentaron la usabilidad al marcar pasajes importantes y guiar a los lectores a través del texto. A diferencia de sus contrapartes históricas, las mayúsculas en la Web no agregan valor en términos de facilidad de uso o legibilidad, y son difíciles de controlar para los desarrolladores web, ya que a menudo se muestran de manera diferente en los navegadores.

Sin embargo, los diseñadores de front-end y los clientes a menudo quieren usar capitulares como elementos decorativos. ¿Cómo deberíamos implementarlos? Así como los escribas, artesanos y los primeros impresores tenían una variedad de métodos para crear mayúsculas iniciales, los diseñadores web tenemos múltiples métodos para elegir. Podemos usar una imagen de una letra, crear una clase para agrandar y colocar una letra, o usar first-child:first-letter para agrandar y colocar la primera letra del primer párrafo.

Quiero destacar que para realizar este post, descargué el CSS suministrado en la página https://www.campusmvp.es y allí el ejemplo usa la letra Parisienne, pero tuve que descargarla. Hago la aclaratoria porque si tu navegafor no tiene instalada esa fuente se verá asi:

En caso que la tenga instalada, o que la hayas bajado desde la página mencionada, se verá así:

Es indudable que el bloguero usará una fuente que tenga soporte en todos los navegadores. Pero, hago la aclaratoria para el lector de diseño gráfico que quiera trabajar con esa fuente. que reitero. la puedes descargar desde la página https://www.campusmvp.es que es la número uno de la bibliografía de esta publicación.

2. Método básico (<span>) 👀

La forma más directa de abordar el problema es separar la primera letra en un elemento span con una clase o identificador y aplicarle el estilo CSS apropiado. Tenemos dos opciones, bien hacer la inicial más grande en la misma posición (conocida como raised cap) o bien que esta ocupe varias líneas y se adentre en el párrafo de texto (denominada drop cap). Para el primer caso basta con aumentar el font-size de la letra en cuestión y ajustar line-height en caso de que fuera necesario. El segundo es más complicado y requiere del uso de float para mezclar la letra con el texto. Supongamos que tengamos el siguiente marcado HTML:

_______________-

Método <span>

Granada ama lo diminuto. Y en general toda Andalucía. El lenguaje del pueblo pone los verbos en diminutivo. Nada tan incitante para la confidencia y el amor. Pero los diminutivos de Sevilla y los diminutivos de Málaga son ciudades en las encrucijadas del agua, ciudades con sed de aventura que se escapan al mar. Granada, quieta y fina, ceñida por sus sierras y definitivamente anclada, busca a sí misma sus horizontes, se recrea en sus pequeñas joyas y ofrece en su lenguaje diminutivo soso, su diminutivo sin ritmo y casi sin gracia, si se compara con el baile fonético de Málaga y Sevilla, pero cordial, doméstico, entrañable. Diminutivo asustado como un pájaro, que abre secretas cámaras de sentimiento y revela el más definido matiz de la ciudad.

El Html aplicado es el siguiente:

<p><span class="drop-cap">G</span>ranada ama lo diminuto. (...)</p>

El CSS aplicado es el siguiente:

  <style>.drop-cap-span .drop-cap {
  float: left;
  font-size: 5.4em;
  line-height: 1;
  margin-right: .6rem;
   color: crimson;
  font-family: 'Parisienne', sans-serif;
}
</style>
  

Entonces, agrandamos la letra, la convertimos en flotante y realizamos ajustes de margen para que no aparezca demasiado cerca del texto de alrededor:

El resultado de ese código, así como aplicando algo de estilo adicional con un color y otra tipografía, sería el de la siguiente imagen:

Este método tiene ciertos inconvenientes. Por un lado, introduce un elemento de marcado extra (el <span>) que puede que no podamos añadir en determinadas situaciones, por ejemplo, que el texto se cargue de forma dinámica y no se pueda modificar. Además, tiene efectos negativos para la accesibilidad, ya que un lector de textos posiblemente lea la inicial y el resto de la palabra separadas. Por otro lado, utilizar el elemento <span> nos permite personalizar cada una de las iniciales que construyamos, mediante clases distintas.

3.El pseudo-elemento ::first-letter 👀

CSS proporciona un selector que crea un pseudo-elemento en la primera letra (y casi cualquier puntuación que la rodee), pudiendo aplicarle estilos sin necesidad de modificar el marcado HTML, tan solo tenemos que utilizar la pseudoclase ::first-letter y aplicársela a nuestros párrafos, pero no adelantemos acontecimientos… primero vamos con el código.

En este caso, podemos simplemente tener el siguiente código en la página:

<article class="drop-cap">
<p>El diminutivo no tiene más misión que la de limitar(...)</p>
</article>

Y utilizar estas líneas de CSS para activar la inicial decorativa:

.drop-cap p:first-child::first-letter {
  float: left;
  font-size: 5.5em;
  line-height: 1;
  margin: 0.2rem;
  margin-right: 0.6rem;
  padding: 1rem;
  background: #a070c0;
  box-shadow: 0 0 0 .2rem #a070c0;
  border: .2rem solid black;        
}

Ya ves que sencillo es el código, y su explicación también es sencilla. Puedes ver elementos todos conocidos y asiduamente usados en otras veces en nuestros documentos.

Lo primero que tenemos que saber es lo que hace la pseudoclase :first–child, pues bien, lo que hace es seleccionar al primer elemento dentro de otro elemento, por lo que seleccionará la primera letra de la primera palabra del párrafo.

A continuación, ::first–letter aplicará estilos a la primera letra dentro de la primera línea de un elemento de bloque, en este caso un párrafo.

Combinadas estas dos pseudoclases conseguimos que a la primera letra de la primera línea del texto, se agrande al aplicarle código CSS que en este caso modificará dicha letra con un tamaño de 5.5em conjuntamente con las otras declaraciones que aprecias.

Si quieres modificar este texto, puedes cambiar el tipo de letra, el tamaño o el grosor (el peso de la tipografía). Lo único que te aconsejo es que utilices una tipografía gruesa para destacar esa primer letra, pero esto lo dejo a tu gusto 🙂

Ya ves que fácil de comprender es el código, y su explicación también es sencilla.

Vamos al resultado: esta vez hemos añadido un fondo para la letra y un borde, de forma que la letra tiene un espacio propio y queda bien separada del texto normal. El resultado sería el que ves en la imagen:

La ventaja de ::first-letter es que se puede aplicar a cualquier texto, estático o dinámico, y que no empeora la accesibilidad del sitio. Por otro lado, si queremos ajustar el posicionamiento de cada inicial respecto al texto es más difícil hacerlo de forma distinta para cada letra, ya que tenemos un único estilo para todas las iniciales. Esto puede ser incómodo en ciertos casos ya que cada navegador ajusta el elemento flotante de forma distinta y algunas letras pueden quedar demasiado o muy poco separadas del texto, así como desplazar más líneas de texto en unos navegadores que en otros.

4. La propiedad initial-letter 👀

Como hemos visto, las iniciales grandes en la web sufren de un problema de posicionamiento y ajuste a un número determinado de líneas. CSS ha introducido recientemente una nueva propiedad específica para resolverlo, initial-letter. Sin embargo, el soporte de navegadores es muy escaso, únicamente disponible en aquellos que utilicen el motor Webkit (Safari en macOS y Epiphany en Linux) y en ocasiones es necesario el prefijo -webkit. La idea de esta propiedad es que sean los navegadores los encargados de adaptar el tamaño de la letra según el número de líneas que queremos que ocupe. De esta forma siempre se puede ajustar a la línea base o baseline del renglón conveniente.

Los parámetros de la propiedad initial-letter son dos: el número de líneas correspondiente al tamaño que deseamos que tenga la inicial, y el número de líneas que debe "hundirse". Es decir, la inicial puede hundirse tres líneas y sobresalir una si tiene el tamaño de 4 líneas, en cuyo caso la propiedad tendría el valor 4 3. En nuestro caso, para imitar los ejemplos anteriores, haremos que la letra ocupe 4 líneas hacia abajo, lo cual podemos conseguir simplemente con el valor 4:

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
  .drop-cap p:first-child::first-letter {
    -webkit-initial-letter: 4;
    initial-letter: 4;
  }
}

Puesto que el soporte de esta propiedad aún no está muy extendido hemos utilizado una query de tipo @supports para que nos permita implementarlo con mejora progresiva: usando la propiedad nueva sólo si está soportada, y en otro caso podríamos usar el método anterior. El resultado debe ser parecido al de la imagen, renderizado en Epiphany (el soporte en Epiphany es aún experimental y podría cambiar ligeramente):

Fuentes y más información:

• Drop Caps: Historical Use And Current Best Practices With CSS - Smashing Magazine
• Drop Caps on the Web Using Initial Letter - Layout Land

Fecha de publicación: 6 de noviembre de 2018

5. El recurso de los símbolos para letras capital 👀

ℛecuerda: Internet nunca dejará de sorprendernos por la vastedad de recursos que nos ofrece. En concreto me refiero a que cuentas con una opción mucho más fácil.

Me refiero a que la "R" capitular del párrafo anterior se hizo con el auxilio del símbolo respectivo, que es: &#8475;   y que se obtiene de los símbolos de la URL siguiente: www.mclibre.org/   y para que resaltara un poco más, se le encapsuló con un font de 30px.

El HTML es el siguiente: <span style="font-size:30px">&#8475;</span>

6. Usando íconos de bootstrap: 👀

Otra metodología interesante es a través del uso de íconos de bootstrap El asunto es recurrir a algún símbolo de alguna librería de bootstrap para añadirle mensaje. Acá un ejemplo:

ransition. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

El html aplicado es el siguiente:

<i class="bi bi-align-top" style="display: inline;text-align: center; clear:left; font-size:30px;color:lime;background: yellow; border: 3px solid black; float: center;">ransition.</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

El asunto con esta metodología radica en que hay que recurrir a la fuente de alguna librería de íconos de bootstrap y además, añadir el link en el html.

En el ejemplo expuesto, se usó la librería que aparece en la siguiente URL.

Debes insertar en la plantilla el siguiente link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Finalizando. Digo que con este breve tutorial, te ha llegado el momento estelar de añadir un toque de elegancia a tus post. No procrastines más la oportunidad de la excelencia en presentación que es necesaria para afectar positivamente tu SEO Todos los usuariios de internet, siempre escogemos las webs que se esmeran en la calidad. Es momento de empezar a usar los recursos de esta lección.

7 Fuentes consultadas: 👀

https://www.campusmvp.es/

https://www.computerhope.com/

https://apuntesdebootstrap.blogspot.com/