Modificando letras específicas con CSS y JavaScript

Cambiar caracteres específicos puede ser un desafío en CSS. A menudo, nos vemos obligados a implementar los cambios deseados uno por uno en HTML, tal vez usando el elemento span. Pero, en algunos casos específicos, aún puede ser posible una solución centrada en CSS. En este artículo, comenzaremos analizando algunos enfoques basados ​​en CSS para cambiar caracteres, antes de considerar un escenario en el que necesitamos recurrir a JavaScript.

CSS

En este momento, CSS no destaca por apuntar a caracteres específicos sin realizar modificaciones en el HTML. Sin embargo, hay algunos escenarios en los que CSS podría ser la opción ideal.

@font-face

La @font-faceregla se utiliza habitualmente para crear fuentes personalizadas, pero su unicode-rangepropiedad también puede permitirnos apuntar a caracteres específicos.

Por ejemplo, imagine que nuestro sitio a menudo contiene símbolos en sus títulos. En lugar de utilizar la fuente del encabezado, queremos algo un poco más extravagante. Podemos buscar el valor Unicode de un signo comercial ( U+ 0026) y usarlo unicode-rangepara apuntar a este carácter específico.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300');h1, h2, h3, h4, h5, h6 {  font-family:  'Ampersand', Montserrat, sans-serif;}@font-face {  font-family: 'Ampersand';  src: local('Times New Roman');  unicode-range: U+0026;}

Pruebe esto con el siguiente HTML para verlo en acción:

h1Jane Austen Novels/h1h2Pride  Prejudice/h2h2Sense  Sensibility/h2

::first-letter

El ::first-letterpseudoelemento se diseñó principalmente teniendo en cuenta las mayúsculas y es compatible con los principales navegadores.

p::first-letter {  font-size: 125%;  font-weight: bold;}

Por supuesto, esto sólo es útil en un número relativamente limitado de escenarios. Ha habido varias solicitudes para un ::nth-letterpseudoelemento (incluso aquí en CSS-Tricks) pero, en este momento, ¡eso es solo una quimera!

::after

Usando el ::afterpseudoelemento y contentla propiedad, podemos lograr un efecto similar para el carácter final, siempre que ese carácter sea siempre el mismo. Por ejemplo, así es como podríamos agregar un signo de exclamación llamativo en cursiva después de cada h2elemento:

h2::after {  content: '021';  color: red;  font-style: italic;}

font-variant-alternates

Finalmente, está la font-variant-alternatespropiedad. Esto solo es compatible con Firefox, por lo que no se recomienda para producción, pero puede valer la pena conocerlo para escenarios realmente específicos: si una fuente contiene glifos alternativos, podemos usar esta propiedad con la character-variant()función para seleccionar un glifo preferido para una personaje de nuestra elección.

javascript

Pasar a JavaScript no tiene por qué suponer un coste para el rendimiento, especialmente si ejecutamos funciones de modificación de HTML en el momento de la compilación. El caso de uso más común probablemente sea buscar y reemplazar caracteres específicos en nuestro HTML con un elemento span. En aras de la simplicidad, comenzaré con un ejemplo en el lado del cliente y luego veremos cómo ejecutarlo en la compilación con webpack.

Buscar y reemplazar en tiempo de ejecución

Imaginemos que, siempre que tenemos el texto “LOGO” en un encabezado de nuestro sitio, queremos agregar un estilo especial solo al primer carácter “O”, envolviéndolo en un spanelemento con la clase .special-o.

const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");for (const heading of headings) {  heading.innerHTML = heading.innerHTML    .replace(/bLOGOb/g, 'LspanO/spanGO');}

En el JavaScript anterior, estamos realizando una búsqueda y reemplazo en cada etiqueta de encabezado.

Nuestra expresión regular utiliza el metacarácter bpara garantizar que LOGO sea siempre una palabra, en lugar de un elemento de una palabra más grande. Por ejemplo, no queremos hacer coincidir el plural "LOGOS". En este momento, sería imposible hacer esto con CSS, sobre todo porque solo queremos apuntar a la primera "O" de la secuencia.

El mismo principio se aplica si queremos reemplazar la “O” (o incluso la palabra completa “LOGO”) con una imagen.

Buscar y reemplazar en la compilación

Existen muchas herramientas de compilación, pero como el paquete web es tan popular, lo usaremos para nuestro ejemplo y, afortunadamente, hay un complemento para lo que necesitamos llamado string-replace-loader. Para aquellos nuevos en webpack, se utiliza un cargador para preprocesar archivos. Aquí, podemos realizar una búsqueda y reemplazo en archivos específicos como parte de nuestra compilación.

Primero, necesitamos instalar el complemento:

npm install --save-dev string-replace-loader

Luego, dentro webpack.config.jsagrega:

module.exports = {  // ...  module: {    rules: [      {        test: /.html$/i,        loader: 'string-replace-loader',        options: {          search: '/bLOGOb/g',          replace: 'LspanO/spanGO',        }      }    ]  }}

Al cambiar el testvalor de la propiedad, podríamos apuntar a JSX, TSX, PUG, Manillar o cualquier otro formato de archivo de plantilla:

/.html$/i # HTML/.[jt]sx$/i # JSX or TSX/.pug$/i # PUG/.handlebars$/i # Handlebars

La ventaja de este enfoque es que no se ejecutará ningún JavaScript innecesario en el navegador de nuestro cliente.

nota final

Finalmente, si se siente cómodo creando y editando fuentes y prefiere evitar CSS o JavaScript, una fuente personalizada podría ser una solución para muchos de los escenarios descritos anteriormente. Hay muchas herramientas gratuitas de edición de fuentes, como Font Forge o Birdfont, para aquellos que quieran probar este enfoque más centrado en el diseño.