Faut-il souligner le conflit avec les descendants de texte?

Le module de décoration de texte de CSS3 comprend une propriété text-underline-position , qui spécifie si le soulignement doit être placé sous le texte entier:

ou juste en dessous de la ligne de base, en la laissant entrer en conflit avec les descendants de texte:

D'accord, nous savons tous comment le soulignement ne doit être utilisé qu'en dernier recours, mais… si vous allez l'utiliser, quelle est la façon la plus courante de le faire? Quels sont les avantages et les inconvénients de chaque style souligné?

Qu'est-ce qui est le plus courant?

Eh bien, certains typographes diront que le soulignement devrait probablement être évité tous ensemble , et que le soulignement ne convient que pour une utilisation sur des machines à écrire ou sur des hyperliens sur le Web. Cependant, j'ajouterais que la créativité consiste à voir les opportunités d'enfreindre les règles de manière créative, alors combien vous laissez ce guide vous appartient.

Sur le Web, il est plus courant de l'avoir juste en dessous de la ligne de base, les descendants qui se chevauchent. Mais c'est uniquement parce que cela a toujours été le rendu par défaut pour les principaux navigateurs jusqu'à ce point.

Sur les machines à écrire, soulignant les chevauchements descendants, mais légèrement différemment: il se situe à mi-chemin entre vos deux exemples ( exemple ). Si vous regardez la ligne de base du descendeur, comme la boucle inférieure de gou l'empattement inférieur de p(dans une police empattement), c'est là que se trouve le soulignement. Il "rejoint donc" le bas des descendeurs.

Avantages et inconvénients

L'avantage du chevauchement du soulignement avec vos descendants est qu'il n'affecte pas du tout l'espacement des lignes (ou "interligne") - vous n'avez pas à augmenter l'écart entre les lignes pour tenir compte du soulignement.

L'avantage de l'avoir complètement éloigné de vos descendeurs est la lisibilité, si cela est important. Mais vous auriez l'inconvénient de devoir augmenter l'espacement entre les lignes. Si votre situation permet un bon nombre d'espacement de ligne de toute façon, alors allez-y par tous les moyens.

Si vous utilisez le Web, le soulignement est fortement associé aux hyperliens. Ainsi, toute utilisation de soulignement doit être évitée pour le texte qui ne fait pas partie d'un lien. Indiquez ce que vous souhaitez signifier par d'autres moyens - en utilisant à la place le gras , l' italique ou TOUS LES MAJUSCULES.

Je pense que tout texte souligné est généralement si mineur que la différence est inexistante pour le lecteur. C'est l'une de ces choses dont le concepteur peut se soucier beaucoup , mais les lecteurs ne le font jamais. C'est plus un choix stylistique à mon avis.

Je préfère de loin le positionnement de base avec une pause au niveau des descendants: c'est-à-dire text-decoration-skip: ink;cependant que ce n'est pas vraiment supporté actuellement. Je suis allé jusqu'à avoir deux classes et à ajouter un span aux descendants pour en retirer le soulignement. (le texte remplace via php donc ce n'est pas beaucoup de code à créer).

Je n'utiliserai jamais l'astuce border-bottom (ou l'attribut bottom) à cause du décalage. Je trouve, avec mes lecteurs, que le décalage du soulignement est beaucoup, beaucoup, beaucoup plus distrayant pour eux qu'autre chose.

J'essaie de passer en gras, en italique, en italique gras ou en variations de couleur, plutôt que de le souligner dans la mesure du possible.

La description de latext-decoration: underline spécification CSS 2.1 définit son effet tout comme le soulignant, sans détails, mais les navigateurs l'implémentent comme apparaissant juste un peu en dessous de la ligne de base. Ainsi, il coupe souvent les descendants (et les marques diacritiques placées sous une lettre).

Dans le projet de texte CSS3, il y a la text-underline-positionposition, mais elle ne semble être prise en charge par aucun navigateur. (Selon css666.com info , il est pris en charge par IE, mais au moins sur IE 9, la prise en charge semble se limiter à reconnaître la propriété et à accepter la valeur auto, la valeur initiale - donc ce n'est vraiment pas la prise en charge.) Mise à jour : En fait , IE (à partir de la version 6) a un peu plus de support , mais il vous permet vraiment de placer le soulignement au-dessus du texte (!) Et non en dessous.

Comme décrit dans la réponse de Scott et le commentaire de Joonas, vous pouvez utiliser une bordure inférieure pour simuler un soulignement, puis vous avez un assez bon contrôle sur le style «souligné». Cela peut convenir, par exemple, pour les liens soulignés qui sont autonomes et non en ligne. Pour le texte en ligne, où vous souhaiterez peut-être souligner, par exemple parce que vous imprimez du HTML contenant des soulignements, le soulignement CSS normal est probablement meilleur - car un tel soulignement correspond plus ou moins aux traditions de l'impression.