Diseñar los subrayados que se encuentran debajo de los enlaces puede ser un asunto complicado, y olvido constantemente cuál es el mejor enfoque según la situación. Afortunadamente, sin embargo, John Jameson nos pone al día en esta publicación de invitado.
Hay muchas formas diferentes de aplicar estilos a los subrayados. Tal vez recuerde el artículo Subrayado del enlace de elaboración en Medio. Medium no estaba tratando de hacer nada loco; solo querían crear una línea de aspecto bastante normal debajo de su texto.
Un subrayado fino y negro con espacio alrededor de los descendientes, a través de Marcin Wichary, subrayado del enlace de elaboración en medio
Es un subrayado bastante básico, pero tiene un buen tamaño y también salta los descensos. Definitivamente mejor que la mayoría de los navegadores predeterminados. Bueno, resulta que Medium tuvo que pasar por muchos problemas para conseguir ese estilo en la web. Dos años después, sigue siendo igual de difícil diseñar un subrayado atractivo.
Objetivos
¿Qué hay de malo en usar text-decoration: underline? Si estamos hablando del escenario ideal, un subrayado debería poder hacer lo siguiente:
- Situarse por debajo de la línea de base
- Saltar descendentes
- Cambiar color, grosor y estilo
- Repetir en el texto envuelto
- Trabaja en cualquier fondo
Creo que todas estas son cosas bastante razonables para pedir, pero hasta donde yo sé, no hay una forma intuitiva de lograrlas todas en CSS.
Enfoques
Entonces, ¿cuáles son las diferentes formas en que podemos subrayar texto en la web?
Aquí están los que puedo pensar:
text-decorationborder-bottombox-shadowbackground-image- Filtros SVG
- Underline.js (lienzo)
text-decoration-*
Repasemos la lista uno por uno y hablemos de las partes buenas y malas de cada enfoque.
decoración de texto
text-decoration es la forma más sencilla de subrayar texto. Aplica una sola propiedad y eso es todo. En tamaños más pequeños, puede verse bastante decente, pero aumente el tamaño de fuente y la misma línea comienza a sentirse torpe.
Vea la demostración.
El mayor problema con text-decoration es su falta de personalización. Utiliza el color y el tamaño de fuente de cualquier texto al que se aplique y no hay una forma de cambiar el estilo en varios navegadores. Más sobre eso más tarde.
Bien
- Fácil de usar
- Colocado debajo de la línea de base
- Omite descendentes de forma predeterminada en Safari e iOS
- Envuelve las líneas
- Funciona en cualquier fondo
Malo
- No se pueden omitir los descendentes en otros navegadores
- No se puede cambiar el color, el grosor o el estilo
borde inferior
border-bottom ofrece un buen equilibrio entre ser rápido y personalizable. Este enfoque utiliza un borde CSS probado y verdadero, lo que significa que puede cambiar el color, el grosor y el estilo con facilidad.
Esto es lo que border-bottom parece en inline elementos:
Vea la demostración.
El gran problema es lo lejos que está el subrayado del texto: está completamente debajo de los descendientes. Puedes abordar eso creando elementos inline-block y reduciendo line-height, pero luego pierde la capacidad de ajustar el texto. Bueno para líneas simples, pero no mucho más.
Vea la demostración.
Además, puede utilizar text-shadow para cubrir partes de la línea cerca de los descendentes, pero debes simularlo usando el mismo color que el fondo en el que se encuentra. Eso significa que solo funciona para fondos de colores sólidos y no para degradados o imágenes.
Vea la demostración.
En este punto, hay cuatro propiedades que dan estilo a un solo subrayado. Eso es mucho más trabajo que text-decoration.
Bien
- Puede omitir descensores usando
text-shadow - Puede cambiar de color, grosor y estilo.
- Puede hacer la transición y animar el color y el grosor.
- Envuelve de forma predeterminada a menos que sea un
inline-block - Funciona en cualquier fondo a menos que use
text-shadow
Malo
- Colocado lejos y difícil de reposicionar
- Muchas propiedades no relacionadas para hacerlo bien.
- Selección de texto Janky al usar
text-shadow
sombra de la caja
box-shadow dibuja un subrayado con dos sombras de recuadro insertadas: una para crear un rectángulo y una segunda para cubrirlo. Eso significa que necesitará una base sólida para que esto funcione.
Vea Pen Underlines 5: box-shadow de John D. Jameson (@johndjameson) en CodePen.
Puedes usar el mismo text-shadow truco para simular espacios entre el subrayado y los descendientes del texto. Pero si la línea es de un color diferente al del texto, o incluso lo suficientemente delgada, realmente no choca como text-decoration lo hace.
Bien
- Puede colocarse debajo de la línea de base
- Puede omitir descensores usando
text-shadow - Puede cambiar de color y grosor.
- Envuelve las líneas
Malo
- No puedo cambiar de estilo
- No funciona en ningún fondo
imagen de fondo
background-image es lo más cercano a todo lo que queremos y con la menor cantidad de trampas. La idea es que uses linear-gradient y background-position para crear una imagen que se repita horizontalmente a través de líneas de texto.
Tendrás que display: inline; este enfoque también.
Vea la demostración.
Este enfoque no tiene por qué utilizar linear-gradient cualquiera. Puede traer su propia imagen de fondo para algunos efectos geniales.
Vea la demostración.
Bien
- Puede colocarse debajo de la línea de base
- Puede omitir descensores usando
text-shadow - Puede cambiar el color, el grosor (permite la mitad de píxeles) y el estilo
- Funciona con imágenes personalizadas
- Envuelve las líneas
- Funciona en cualquier fondo a menos que use
text-shadow
Malo
- La imagen puede cambiar de tamaño de manera diferente según las resoluciones, los navegadores y los niveles de zoom.
Filtros SVG
Aquí hay un enfoque con el que he estado jugando: filtros SVG. Puede crear un SVG en línea filter elemento que dibuja una línea y luego expande el texto para enmascarar partes de la línea que queremos que sean transparentes. Entonces puedes dar el filter un an id y hacer referencia a él en CSS con algo como filter: url(‘#svg-underline’).
La ventaja aquí es que el filtro agrega transparencia sin depender de text-shadow. Eso significa que puede omitir descendentes sobre cualquier fondo, incluidos degradados e imágenes de fondo. Sin embargo, este funciona solo en una sola línea de texto, así que tenga cuidado con eso.
Vea la demostración.
Así es como se ve en Chrome y Firefox:
La compatibilidad del navegador en IE, Edge y Safari es problemática. Es difícil probar la compatibilidad con el filtro SVG en CSS. Puedes usar @supports con filter, pero eso solo prueba si la referencia funciona, no el filtro aplicado en sí. Mi enfoque termina haciendo un rastreo bastante asqueroso del navegador, así que doble aviso sobre eso también.
Pros
- Colocado debajo de la línea de base
- Salta descendentes
- Capaz de cambiar de color, grosor y estilo
- Funciona en cualquier fondo
Contras
- No envuelve las líneas
- No funciona en IE, Edge o Safari, pero puede recurrir a
text-decoration. Los subrayados de Safari se ven bien de todos modos.
Underline.js (lienzo)
Underline.js es fascinante. Creo que es muy impresionante lo que Wenting Zhang pudo hacer con JavaScript y algo de atención a los detalles. Si no ha visto la demostración técnica de Underline.js antes, definitivamente deje de leer por un minuto y compruébelo. Hay una charla fascinante de nueve minutos sobre cómo funciona, pero les daré la versión corta: dibuja subrayados con <canvas> elementos. Es un enfoque novedoso que funciona sorprendentemente bien.
A pesar del nombre llamativo, Underline.js es un demostración técnica solo. Eso significa que no podrá colocarlo en ningún proyecto sin modificarlo un montón primero.
Vale la pena mencionarlo aquí como prueba de concepto. <canvas> tiene el potencial de crear subrayados atractivos e interactivos, pero tendrá que escribir algo de JavaScript personalizado para que funcionen.
text-decoration- * propiedades
¿Recuerda la parte de “más sobre eso más tarde”? Bueno aquí estamos.
text-decoration funciona bien por sí solo, pero puede agregar algunas propiedades experimentales para personalizar su apariencia:
text-decoration-colortext-decoration-skiptext-decoration-style
No se emocione demasiado. Ya sabes, soporte de navegador.
color-decoracion-texto
text-decoration-color le permite cambiar el color de un subrayado por separado de su color de texto. La propiedad incluso tiene un soporte de navegador mejor de lo esperado: funciona en Firefox y tiene el prefijo Safari. Aquí está el truco: si no está limpiando descendentes, Safari coloca la línea encima del texto. 🙃
Firefox:
Safari:
Saltar decoración de texto
text-decoration-skip alterna el salto de los descendientes en texto subrayado.
Esta propiedad no es estándar y solo funciona en Safari en este momento, por lo que necesita el -webkit- prefijo para usarlo. Sin embargo, Safari habilita esta propiedad de forma predeterminada, por lo que subraya los descendientes de omisión incluso en sitios web que no la especifican.
Si está utilizando Normalize, sepa que las versiones recientes deshabilitan la propiedad para mantener la coherencia entre los navegadores. Tienes que volver a encenderlo si quieres esos subrayados de ensueño.
estilo de decoración de texto
text-decoration-style ofrece el mismo tipo de líneas que esperarías de border-style, pero agrega wavy líneas también.
Estos son los diferentes valores que puede usar:
dasheddotteddoublesolidwavy
Ahora, text-decoration-style funciona solo en Firefox, así que aquí hay una captura de pantalla:
Una variedad de estilos de subrayado de color sólido
¿Parecer familiar?
¿Qué falta?
El text-decoration-* Las propiedades son mucho más intuitivas que el uso de otras propiedades CSS para aplicar estilos a los subrayados. Pero si echamos otro vistazo a nuestros requisitos anteriores, estas propiedades no ofrecen una forma de especificar el grosor o la posición de la línea.
Después de investigar un poco, encontré estas dos propiedades:
text-underline-widthtext-underline-position
Parece que se incluyeron en borradores anteriores de CSS, pero nunca se implementaron debido a la falta de interés. Oye, no me culpes.
Para llevar
Entonces, ¿cuál es la mejor manera de subrayar el texto?
Depende.
Para texto pequeño, recomiendo usar text-decoration y luego aplicar con optimismo text-decoration-skip en la parte superior. Parece un poco soso en la mayoría de los navegadores, pero los subrayados se han visto así desde siempre y a la gente no parece importarle. Además, siempre existe la posibilidad de que, si eres lo suficientemente paciente, todos tus subrayados se verán geniales más adelante sin que tengas que cambiar nada.
Para el texto del cuerpo, probablemente use el background-image Acercarse. Funciona, se ve muy bien y hay mezclas de Sass para eso. Probablemente puedas omitir text-shadow si el subrayado es fino o de un color diferente al del texto.
Para líneas individuales de texto, use border-bottom y cualquier otra propiedad que desee acompañar.
Y para omitir descendentes en la parte superior de una imagen de fondo o degradado, intente usar filtros SVG. O simplemente evite usar un subrayado por completo.
En el futuro, cuando la compatibilidad con el navegador sea mejor, la respuesta es text-decoration-* todo el camino.
También vea la publicación CSS Underlines Suck de Benjamin Woodruff, que casualmente pisa este terreno de una manera similar.