Excluir emojis del recorte de texto transparente

CSS-Tricks tiene esta forma genial de diseñar enlaces flotantes. De forma predeterminada, el texto es de un azul bastante común. Pero al pasar el cursor sobre los enlaces, se rellenan con un degradado lineal.

Bastante bonito, ¿verdad? Y el truco no es tan complicado. En vuelo estacionario…

• darle al enlace un fondo degradado lineal ,
• recortar el fondo al texto y
• Dale al texto un relleno transparente para que se vea el fondo.

Se ve así en CSS:

a {  color: #007db5;}a:hover {  background: linear-gradient(90deg,#ff8a00,#e52e71);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

Observe el -webkit-prefijo, que es obligatorio por ahora. Hay un poco más sobre la implementación real aquí en CSS-Tricks, pero esto nos da lo que estamos buscando.

Pero ese no es el punto aquí. El otro día, Brad Westfall llamó por teléfono para informarnos que esta técnica también tiene efecto en los emojis que, como cualquier otro texto, se rellenan de forma transparente al pasar el mouse.

Se dio cuenta de que esto sucedía en un enlace en una de nuestras publicaciones.

No es lo peor. Y tiene mucho sentido. Quiero decir, un emoji es un glifo como cualquier otro texto en un archivo de fuente, ¿verdad? Resulta que son una fuente de color y toman la forma de una imagen. Por supuesto, serían tratados como cualquier otro glifo en una situación como ésta en la que santificamos el color de relleno.

Pero si mantener el color intacto en los emojis es un requisito, eso se puede resolver envolviendo el emoji en un lapso y estableciendo su relleno nuevamente a su estado inicial.

Pero, ¿quién quiere escribir un lapso cada vez que aparece un emoji en un enlace?

Si está buscando una solución CSS, no tenemos suerte. Dicho esto, la especificación de nivel 4 del módulo de fuentes CSS incluye una definición para una font-variation-emojipropiedad propuesta. Sin embargo, no hay mucho sobre él (que pueda encontrar) en este momento y no parece estar diseñado para este tipo de cosas. Un vistazo rápido a algunas discusiones relacionadas con la propuesta sugiere que se trata más de la forma en que algunos navegadores o Los sistemas convierten automáticamente Unicode a emoji y cómo controlar ese comportamiento.

También está la definición propuesta font-paletteen el mismo borrador de especificación que parece una forma de controlar las fuentes de color: eso es lo que son los emojis al final del día. Pero ésta tampoco es la solución.

Parece que la única forma de evitar que se cambie el relleno de un emoji sin un lapso es algún tipo de solución de JavaScript. Mire servicios como WordPress, Dropbox, Facebook y Twitter. Todos implementan sus propios conjuntos de emoji personalizados. ¿Y qué usan? Imágenes.

That would be one way to do it. If the emoji is replaced with an image (an SVG in this specific example), then that would certainly exclude it from being filled along with the link text.

Or, hey, why not prevent ourselves from getting into the situation at all and place that dang thing outside of the link?

That’s probably the route we should have taken all along. But an emoji might not come at the beginning or end of a link, but somewhere in the middle. It just underscores the point that there are cases where having some sort of control here could come in handy.