O sublinhado deve colidir com os descendentes de texto?

O módulo de decoração de texto do CSS3 inclui uma propriedade text-underline-position , que especifica se o sublinhado deve ser posicionado abaixo de todo o texto:

ou logo abaixo da linha de base, deixando-a em conflito com os descendentes de texto:

Certo, todos sabemos como o sublinhado deve ser usado apenas como último recurso, mas ... se você vai usá-lo, qual é a maneira mais comum de fazer isso? Quais são os prós e os contras de cada estilo de sublinhado?

O que é mais comum?

Bem, alguns tipógrafos dizem que o sublinhado provavelmente deve ser evitado por completo , e que o sublinhado é apropriado apenas para uso em máquinas de escrever ou em hiperlinks na web. No entanto, gostaria de acrescentar que a criatividade significa ver oportunidades de violar regras de maneiras criativas, de acordo com o quanto você decide sobre este guia.

Na web, é mais comum tê-lo logo abaixo da linha de base, sobrepondo descendentes. Mas isso ocorre apenas porque essa sempre foi a renderização padrão para os principais navegadores até o momento.

Nas máquinas de escrever, o sublinhado sobrepõe os descendentes, mas de maneira um pouco diferente: fica entre os dois exemplos ( exemplo ). Se você observar a linha de base do descendente, como o loop inferior gou o serifa inferior de p(em uma fonte com serifa), é aí que está o sublinhado. Por isso "junta-se" à parte inferior dos descendentes.

Prós e contras

O benefício de sobrepor o sublinhado aos descendentes é que ele não afeta o espaçamento entre as linhas (ou "à esquerda") - você não precisa aumentar o espaço entre as linhas para acomodar o sublinhado.

O benefício de deixá-lo completamente claro de seus descendentes é a legibilidade, se isso for importante. Mas você teria a desvantagem de precisar aumentar o espaçamento entre linhas. Se a sua situação permitir muito espaçamento de qualquer maneira, faça-o de qualquer maneira.

Se você estiver usando a Web, o sublinhado está fortemente associado aos hiperlinks. Portanto, qualquer uso de sublinhado deve ser evitado em textos que não fazem parte de um link. Signifique o que você deseja significar de outras maneiras - usando negrito , itálico ou TODOS OS CAPS.

É minha convicção que qualquer texto sublinhado é geralmente tão pequeno que a diferença é inexistente para o leitor. Essa é uma das coisas com as quais o designer pode se importar muito , mas os leitores nunca o fazem. É tudo mais uma escolha estilística na minha opinião.

Eu prefiro o posicionamento da linha de base com uma pausa nos descendentes: ou seja text-decoration-skip: ink;, no entanto, isso não é realmente suportado atualmente. Cheguei ao ponto de ter duas classes e adicionar um intervalo aos descendentes para remover o sublinhado deles. (o texto é substituído via php, portanto, não é muito código para criar).

Nunca usarei o truque de borda inferior (ou atributo inferior) por causa do deslocamento. Acho que, com meus leitores, o deslocamento do sublinhado é muito, muito, muito mais perturbador para eles do que qualquer coisa.

Tento mudar para negrito, itálico, negrito itálico ou variações de cores, em vez de sublinhado sempre que possível.

A descrição datext-decoration: underline especificação do CSS 2.1 define seu efeito como sublinhado, sem detalhes, mas os navegadores o implementam como aparecendo um pouco abaixo da linha de base. Assim, muitas vezes corta descendentes (e marcas diacríticas colocadas abaixo de uma letra).

No rascunho de texto CSS3, existe a text-underline-positionposição, mas ela não parece ser suportada por nenhum navegador. (De acordo com informações css666.com , ele é suportado pelo IE, mas pelo menos no IE 9, o apoio parece ser limitada ao reconhecimento da propriedade e aceitar o valor auto, o valor inicial - para que ele realmente não é apoiar.) Atualização : Na verdade , O IE (da versão 6) tem um pouco mais de suporte , mas permite colocar o sublinhado acima do texto (!) E não abaixo dele.

Conforme descrito na resposta de Scott e no comentário de Joonas, você pode usar uma borda inferior para simular um sublinhado e ter um controle bastante bom sobre o estilo "sublinhado". Isso pode ser adequado, por exemplo, para links sublinhados que são independentes e não incorporados. Para texto embutido, onde você pode sublinhar, por exemplo, porque você está imprimindo um tamanho HTML que contém sublinhado, o sublinhado CSS normal é provavelmente melhor - porque esse sublinhado corresponde mais ou menos às tradições de impressão.