Modificación de letras específicas con CSS y JavaScript | Programar Plus

Cambiar caracteres específicos puede ser un desafío en CSS. A menudo, nos vemos obligados a implementar nuestros cambios deseados uno por uno en HTML, quizás 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 debemos recurrir a JavaScript.

CSS

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

@font-face

El @font-face regla se usa regularmente para crear fuentes personalizadas, pero su unicode-range La propiedad también puede permitirnos apuntar a caracteres específicos.

Por ejemplo, imagine que nuestro sitio a menudo contiene símbolos de unión en sus encabezados. En lugar de usar la fuente del encabezado, queremos algo un poco más extravagante. Podemos buscar el valor Unicode de un ampersand (U+0026) y use unicode-range para apuntar a este personaje específico.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]');

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;
}

Prueba esto con el siguiente código HTML para verlo en acción:

<h1>Jane Austen Novels</h1>
<h2>Pride & Prejudice</h2>
<h2>Sense & Sensibility</h2>

::first-letter

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

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

Por supuesto, esto solo es útil en un número relativamente limitado de escenarios. Ha habido varias llamadas para una ::nth-letter pseudo-elemento (incluido aquí en CSS-Tricks) pero, en este momento, ¡eso es solo un sueño imposible!

::after

Utilizando el ::after pseudo-elemento y content 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 y en cursiva después de cada h2 elemento:

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

font-variant-alternates

Finalmente, está el font-variant-alternates propiedad. 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 el character-variant() función para seleccionar un glifo preferido para un carácter 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 es probablemente encontrar y reemplazar caracteres específicos en nuestro HTML con un elemento de intervalo. 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 el paquete web.

Buscar y reemplazar en tiempo de ejecución

Imaginemos que, cada vez 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 span elemento 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, 'L<span class="special-o">O</span>GO');
}

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

Nuestra expresión regular usa el metacarácter b para 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” en la secuencia.

El mismo principio se aplica si queremos reemplazar la “O”, o incluso la palabra “LOGO” completa, 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 usa 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

Entonces, dentro webpack.config.js agregar:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.html$/i,
        loader: 'string-replace-loader',
        options: {
          search: '/bLOGOb/g',
          replace: 'L<span class="special-o">O</span>GO',
        }
      }
    ]
  }
}

Al cambiar el test valor de propiedad, podríamos apuntar a JSX, TSX, PUG, Handlebars 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á 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.