¿Debería subrayar el choque con los descendientes de texto?

El módulo de decoración de texto de CSS3 incluye una propiedad text-underline-position , que especifica si el subrayado debe colocarse debajo del texto completo:

o justo debajo de la línea de base, dejando que choque con los descendientes de texto:

De acuerdo, todos sabemos cómo el subrayado solo debe usarse como último recurso, pero ... si lo vas a usar, ¿cuál es la forma más común de hacerlo? ¿Cuáles son los pros y los contras de cada estilo de subrayado?

¿Qué es lo más común?

Bueno, algunos tipógrafos dirán que el subrayado probablemente debería evitarse por completo , y que el subrayado solo es apropiado para usar en máquinas de escribir o en hipervínculos en la web. Sin embargo, agregaría que la creatividad se trata de ver oportunidades para romper las reglas de manera creativa, así que cuánto dejas que esta guía dependa de ti.

En la web, es más común tenerlo justo debajo de la línea de base, descendientes superpuestos. Pero esto es solo porque esta siempre ha sido la representación predeterminada para los principales navegadores hasta este momento.

En las máquinas de escribir, el subrayado se superpone a los descendientes, pero de forma ligeramente diferente: se ubica en parte entre sus dos ejemplos ( ejemplo ). Si observa la línea de base del descender, como el bucle inferior go el serif inferior de p(en una fuente serif), ahí es donde se encuentra el subrayado. Entonces "se une con" el fondo de los descendientes.

Pros y contras

El beneficio de que el subrayado se superponga con sus descendientes es que no afecta su espacio entre líneas (o "interlineado"): no tiene que aumentar el espacio entre líneas para acomodar el subrayado.

El beneficio de tenerlo completamente libre de descendientes es la legibilidad, si eso es importante. Pero tendría el inconveniente de necesitar aumentar el espacio entre líneas. Si su situación permite un gran espacio entre líneas de todos modos, entonces hágalo.

Si está utilizando la web, entonces el subrayado está muy asociado con los hipervínculos. Por lo tanto, debe evitarse el uso de subrayado para el texto que no es parte de un enlace. Indique lo que quiere significar de otras maneras, usando negrita , cursiva o TODAS LAS MAYÚSCULAS.

Creo que cualquier texto subrayado es generalmente tan pequeño que la diferencia es inexistente para el lector. Esta es una de esas cosas por las que el diseñador puede preocuparse mucho , pero los lectores nunca lo hacen. Es más una elección estilística en mi opinión.

Prefiero el posicionamiento de línea de base con un descanso en los descendientes: es decir text-decoration-skip: ink;, sin embargo, eso no es realmente compatible actualmente. He ido tan lejos como para tener dos clases y agregar un lapso a los descendientes para eliminar el subrayado de ellos. (el texto se reemplaza a través de php, por lo que no es mucho código para crear).

Nunca usaré el truco del borde inferior (o atributo inferior) debido al desplazamiento. Encuentro, con mis lectores, que el desplazamiento del subrayado les distrae mucho, mucho, mucho más que cualquier otra cosa.

Intento cambiar a negrita, cursiva, negrita cursiva o variaciones de color, en lugar de subrayar siempre que sea posible.

La descripción de latext-decoration: underline especificación CSS 2.1 define su efecto como subrayado, sin detalles, pero los navegadores lo implementan como un poco por debajo de la línea de base. Por lo tanto, a menudo corta descendientes (y marcas diacríticas colocadas debajo de una letra).

En el borrador de texto CSS3, existe la text-underline-positionposición, pero no parece ser compatible con ningún navegador. (Según la información de css666.com , es compatible con IE, pero al menos en IE 9, el soporte parece estar limitado a reconocer la propiedad y aceptar el valor auto, el valor inicial, por lo que realmente no es compatible). Actualización : en realidad , IE (a partir de la versión 6) tiene un poco más de soporte , pero realmente le permite colocar el subrayado encima del texto (!) Y no debajo.

Como se describe en la respuesta de Scott y el comentario de Joonas, puede usar un borde inferior para simular un subrayado, y luego tiene un control bastante bueno sobre el estilo de "subrayado". Esto podría ser adecuado, por ejemplo, para enlaces subrayados que son independientes, no en línea. Para el texto en línea, donde es posible que desee subrayar, por ejemplo, porque está imprimiendo HTML con material impreso que contiene subrayado, el subrayado CSS normal es probablemente mejor, porque dicho subrayado corresponde más o menos a tradiciones de impresión.