H* et text-decoration: underline

Bonjour,

Est-il possible de gérer l'espace entre le txt et l'underline dans un H6 par exemple ?

Mise à part des méthodes plus que brouillonnent.... Je n'ai pas trouvé une solution potable

Alors la réponse est qu'il sera possible de le faire, grâce aux propriétés suivantes:

text-underline-position: ce sur quoi le soulignement s'aligne: ligne de base, bas de ligne, etc.
text-underline-offset: une distance par rapport à l'alignement
text-underline-width: l'épaisseur

Mais tout cela n'est implémenté à ce jour par aucun navigateur, à ma connaissance.

Donc pour gérer cela il faut enlever le soulignement, et le remplacer par une bordure, par exemple: https://codepen.io/anon/pen/zVdwrG

Ce n'est pas parfait, loin de là.

Bonjour,

wow Firefox m'a gardé cette réponse en cours de rédaction depuis hier

il y a des propriétés disons inattendues (voir le reste de la liste à gauche ) mais pour ce qui est de la distance au texte (qui dépend forcément de la fonte demandée enfin plutôt finalement affichée), tu auras plus de contrôle avec box-shadow ou border-bottom + padding-bottom qu'avec text-decoration…

En cas de border-bottom, attention à abbr avec attribut title et Firefox qui fait rien comme tout le monde.

EDIT: un SVG en image de fond, inline (base64 ou pas). Cette perspective me remplit d'effroi
Modifié par Felipe (26 Jun 2019 - 10:14)

HS

Felipe a écrit :

wow Firefox m'a gardé cette réponse en cours de rédaction depuis hier

Ouais enfin le forum alsa l'a gardé en local storage #IKnowMyOwnTools
/HS

Felipe a écrit :
qui dépend forcément de la fonte demandée enfin plutôt finalement affichée

Plutôt du navigateur, en fait la plupart de fontes n'implémentes pas ces fonctionnalités, hormis celles de haute facture (et de haut coût), qui sont rarement utilisées et souvent amputées de ces fonctionnalités dans leur version web.

Et quand bien même elles le feraient, le support est très partiel: https://www.harbortype.com/blog/the-state-of-underlines-and-strikethroughs .