text-decoration-inset es como relleno para decoración de texto

este text-decoration-inset La propiedad CSS resuelve un problema que ha existido desde los albores de la Web, donde las decoraciones de texto, como los subrayados, se extienden más allá del primer y último carácter (específicamente, hasta los bordes del cuadro de contenido), lo que provoca una desalineación vertical.

Digo que este es un problema que “nosotros” tenemos porque tal vez a usted, como a algunos usuarios, en realidad no le importe. Pero si eres un conejito divertido como yo (creo que “diseñador” es un término técnico), es probable que te vuelva loco.

Dicho esto, este no es un problema que esté tratando de resolver porque no vale la pena exprimir el jugo. La mejor solución podría ser text-decoration: none y ::after Al tener un fondo personalizado, pero eso puede ser un poco complicado, prefiero usar todas las funciones que vienen con la decoración de texto nativo, p. text-decoration-thickness, text-underline-position (Esto nos permite cambiar la posición del subrayado en relación con las métricas internas de la fuente, como la línea de base), y text-underline-offset (Esto determina el desplazamiento Eso Ubicación).

Entonces, ¿cómo text-decoration-inset ¿Trabajar? Bueno, si recorto el subrayado para que se alinee verticalmente con el texto, termino con esto (por cierto, esto solo funciona en Firefox 146):

Sin embargo, puedes recortar las decoraciones según sea necesario, lo que nos permite crear algunas decoraciones realmente geniales e incluso realizar transiciones o animarlas. Echemos un vistazo rápido, ¿de acuerdo?

text-decoration-inset Uso básico

text-decoration-inset, antes text-decoration-trimpermitiéndonos recortar desde el final del guión bajo o en otro lugar text-decoration-line ser calculado. Esta es la sintaxis:

text-decoration-inset: <left-inset> <right-inset>;

Sí, esto significa que podemos establecer diferentes valores de inserción para los lados izquierdo y derecho.

Estos valores deben ser <length>s, pero podemos usar longitudes relativas, p.e. em unidades, en relación con el calculado font-size. Entonces si font-size A medida que cambia, la ilustración se escala en consecuencia. Por ejemplo, en la demostración anterior, 0.076em (Esto es lo que puse en la ilustración de la izquierda) significa 7,6% del cálculo. font-sizeque es el valor que alinea el recuadro izquierdo a la izquierda Seco La letra “N” y otras raíces izquierdas. Este valor se determina mediante prueba y error, pero solo es necesario determinarlo una vez para cada fuente.

¿Qué pasa si la primera letra es W? Sí, entonces la ilustración no se alineará, así que no es perfecto solución. Yo diría que es adecuado cuando sabes cuál es el contenido.

Quizás el W3C encuentre una solución para una alineación vertical automática y precisa de decoraciones de texto y texto de varias líneas. Hasta entonces, esta sigue siendo una solución interesante que nos permite crear efectos perfectamente alineados como este (esta demostración utiliza líneas superpuestas). y Un guión bajo y un “lotta” completo text-decoration-thickness ciertamente):

Animación text-decoration-inset

text-decoration-inset Se vuelve más interesante cuando empezamos a pensar en transiciones/animaciones. A menudo hacemos animaciones subrayadas, o debería decir falsas. ::after Subrayado, pero con text-decoration-inset Podemos hacerlo localmente. En el siguiente ejemplo, he multiplicado la ilustración por diez. :hover. Nada demasiado loco, pero recuerda que solo podemos usar <length> valor, así que intenta usar em unidades, o al menos probar texto con diferentes tamaños de fuente.

Nuevamente, actualmente requiere Firefox 146+:

a {
  transition: 300ms;
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    text-decoration-inset: calc(0.046em * 10);
  }
}

Cada vez más ambiciosa, la próxima demostración utiliza CSS @keyframes Animar para crear un efecto de subrayado de estrella fugaz. Cómo funciona es que empujamos la ilustración de la izquierda hasta el otro lado, pero <length>Eso es todo, ¿recuerdas? no podemos usar 100% Aquí, estoy seguro de que el ancho del elemento es 4.5em y utilícelo como valor (cuanto más precisos seamos, mejor será la animación o transición). Consulte los comentarios del código para obtener una explicación completa:

a {
  /*
    The value at the start and end of the
    animation, as well as the default value
  */
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    animation: 1s next-level;
  }
}

@keyframes next-level {
  /* By half-way through the animation... */
  50% {
    /*
      ...the left inset has shifted 4.5em, 
      which is the full width of the element
    */
    text-decoration-inset: 4.5em 0.009em;

    /* It’s faded out as well */
    text-decoration-color: transparent;
  }

  /* Immediately after that... */
  50.999% {
    /* ...both insets are set to the left */
    text-decoration-inset: 0.046em 4.5em;
  }

  /* Then it animates back to the default value */
}

integral, text-decoration-inset es una buena característica. No está exento de defectos, pero ninguna característica es perfecta. Personalmente, cualquier cosa que pueda ayudarme a refinar los detalles localmente es muy bienvenida y text-decoration-inset Podemos mejorar dos: la alineación de la decoración del texto (en relación con el texto) y la transición o animación de la decoración del texto.