Modificando letras específicas con CSS y JavaScript

 

 

 


Índice
  1. CSS
  2. javascript
  3. nota final

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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La anatomía de un componente Tablist en Vanilla JavaScript versus React
  2. Trabajar con consultas de medios JavaScript
  3. Uso de JavaScript para ajustar la saturación y el brillo de los colores RGB
  4. Los tipos de programación orientada a objetos (en JavaScript)

Modificando letras específicas con CSS y JavaScript

Modificando letras específicas con CSS y JavaScript

CSSjavascriptnota finalTal vez te puede interesar:Índice CSS

programar

es

https://pseint.es/static/images/programar-modificando-letras-especificas-con-css-y-javascript-1725-0.jpg

2024-06-13

 

Modificando letras específicas con CSS y JavaScript
Modificando letras específicas con CSS y JavaScript

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences