Il y en a un tas différentes façons soulignant la conception. Vous vous souvenez peut-être de l'article de Marcin Vichari « Crafting link underlines » sur Medium. Les développeurs de Medium n'essaient pas de faire quelque chose de fou, ils veulent juste créer une jolie ligne sous le texte.

C'est le trait de soulignement le plus simple, mais il a bonne taille et il ne chevauche pas les extensions de lettres. Et c'est certainement mieux que le trait de soulignement par défaut dans la plupart des navigateurs. Medium a dû relever des défis pour parvenir à son style sur le Web. Deux ans plus tard, nous avons toujours du mal à créer de beaux soulignements.

Objectifs

Quel est le problème avec la décoration de texte habituelle : souligner ? Dans un scénario idéal, le trait de soulignement devrait effectuer les opérations suivantes :

• position en dessous de la ligne de base ;
• ignorer les légendes ;
• changer la couleur, l'épaisseur et le style de la ligne ;
• travailler avec du texte multiligne ;
• travailler sur n’importe quel fond.

Je pense que ce sont toutes des exigences raisonnables, mais autant que je sache, il n'existe aucun moyen intuitif d'y parvenir avec en utilisant CSS.

Approches

Alors qu'est-ce que c'est différentes manières, que nous pouvons utiliser pour implémenter le soulignement sur le Web ?

Voici ceux que je considère :

• décoration de texte ;
• Bordure du bas ;
• boîte ombre ;
• image de fond ;
• Filtres SVG ;
• Souligner.js(toile);
• texte-décoration-* .

Examinons ces méthodes une par une et parlons des avantages et des inconvénients de chacune d'elles.

décoration de texte

la décoration du texte est la plus manière évidente souligner le texte. Vous appliquez une propriété et c'est suffisant. Avec des polices de petite taille, cela peut sembler correct, mais augmentez la taille de la police et le soulignement commence à paraître gênant.

Le plus un gros problème avec la décoration de texte, c'est un manque de paramètres. Vous êtes limité à la couleur et à la taille de la police du texte et il n'existe aucun moyen multi-navigateur de modifier cela. Nous en parlerons plus en détail plus tard.

• facile à utiliser;
• positionné en dessous de la ligne de base ;
• ignore les légendes par défaut dans Safari et iOS ;
• met l'accent sur le texte multiligne ;
• fonctionne sur n’importe quel arrière-plan.

• ne saute pas les pieds de page dans tous les autres navigateurs ;
• ne vous permet pas de modifier la couleur, l'épaisseur ou le style du trait.

Bordure du bas

border-bottom établit un bon équilibre entre simplicité et personnalisation. Cette approche utilise la bonne vieille propriété CSS border, ce qui signifie que vous pouvez facilement modifier la couleur, l'épaisseur et le style.

Voici à quoi ressemble border-bottom pour les éléments en ligne.

Le principal inconvénient est la distance entre le soulignement et le texte : il se trouve entièrement en dessous des légendes. Vous pouvez résoudre ce problème en définissant les éléments sur inline-block et en diminuant la line-height , mais vous perdrez alors la possibilité d'envelopper le texte. Idéal pour les lignes individuelles, mais ne convient nulle part ailleurs.

De plus, nous pouvons utiliser text-shadow pour masquer la partie de la ligne à côté des éléments en ligne, en simulant cela en utilisant la même couleur que l'arrière-plan. Autrement dit, cette technique ne fonctionne que sur un simple fond monochrome, sans dégradés, motifs ni images.

Sur ce moment Nous utilisons déjà jusqu'à quatre propriétés pour concevoir une ligne. C'est trop plus de travail que de simplement ajouter du texte-decoration .

• peut ignorer les légendes en utilisant text-shadow ;
• peut changer la couleur, l'épaisseur et le style de ligne ;
• vous permet d'utiliser des transitions et des animations de couleur et d'audace ;
• fonctionne avec du texte multiligne à moins que le bloc en ligne ne soit appliqué ;
• Fonctionne sur n'importe quel arrière-plan tant que vous n'utilisez pas text-shadow .

• positionné trop bas et bouge d'une manière compliquée;
• de nombreuses propriétés supplémentaires sont utilisées pour bon fonctionnement;
• lorsque vous utilisez text-shadow, la mise en surbrillance du texte semble moche.

boîte ombre

box-shadow dessine un indice en utilisant deux ombres intérieures: l'un crée un rectangle, et le second en cache une partie. Cela signifie que vous avez besoin fond uni pour que cela fonctionne.

Vous pouvez utiliser la même astuce avec text-shadow pour combler les espaces entre les soulignements et les légendes. Mais si la couleur de soulignement est différente de la couleur du texte - ou si elle est juste assez fine - la ligne n'entrera pas autant en collision avec les légendes qu'avec text-decoration .

• vous permet de changer la couleur et l'épaisseur du trait ;
• fonctionne avec du texte multiligne.

• ne vous permet pas de modifier le style de soulignement ;
• Ne fonctionne sur aucun arrière-plan.

image de fond

La méthode de l'image d'arrière-plan est la plus proche de ce que nous souhaitons et présente le moins d'inconvénients. L'idée est d'utiliser un dégradé linéaire et une position d'arrière-plan pour créer une image qui se répète sous les lignes de texte.

Pour que cette approche fonctionne, le texte doit être en affichage standard : en ligne ; .

L'option suivante se passe de gradient linéaire, pour les effets, vous pouvez ajouter votre propre image d'arrière-plan.

• peut être positionné en dessous de la ligne de base ;
• peut ignorer les éléments de légende en utilisant text-shadow ;
• fonctionne avec des images personnalisées ;
• encapsule plusieurs lignes de texte ;
• Fonctionne sur n'importe quel arrière-plan tant que vous n'utilisez pas text-shadow .

• La taille de l'image peut varier en fonction de la résolution de l'écran, du navigateur et du grossissement.

Filtres SVG

J'ai pas mal joué avec cette méthode. Vous pouvez créer un filtre de ligne SVG qui dessine une ligne, puis développe le texte pour masquer la partie de la ligne que nous souhaitons rendre transparente. Vous pouvez ensuite donner un identifiant au filtre et le référencer en CSS quelque chose comme filter: url('#svg-underline') .

L'avantage de cette approche est que la transparence est obtenue sans utiliser text-shadow , ce qui signifie que nous laissons les légendes apparaître sur n'importe quel arrière-plan, y compris les dégradés et images d'arrière-plan! Cela ne fonctionne que sur une seule ligne de texte, alors gardez cela à l'esprit.

Voici à quoi cela ressemble dans Chrome et Firefox :

La prise en charge dans IE, Edge et Safari est problématique. Il est difficile de tester la prise en charge du filtre SVG en CSS. Vous pouvez utiliser la directive @supports avec filter , mais cela vérifiera uniquement la fonctionnalité de la référence du filtre, pas la fonctionnalité du filtre lui-même. Mes tentatives se sont soldées par une détermination fastidieuse des capacités du navigateur, c'est un inconvénient notable de la méthode.

• peut être positionné en dessous de la ligne de base ;
• peut ignorer les éléments d'extension ;
• permet des changements de couleur, d'épaisseur et de style de ligne ;
• fonctionne sur n’importe quel arrière-plan.

• ne fonctionne pas avec du texte multiligne ;
• ne fonctionne pas dans IE, Edge et Safari, mais vous pouvez utiliser la décoration de texte comme solution de secours, cela semble correct dans Safari.

Souligner.js (Toile)

Underline.js est fascinant. Je trouve impressionnant ce que Wenting Zhang a accompli avec sa maîtrise de JavaScript et son souci du détail. Si vous n'avez pas vu la démo technique Underline.js, arrêtez de lire et donnez-lui une minute. Elle explique également pendant neuf minutes comment cela fonctionne, mais je serai bref : le soulignement est dessiné à l'aide d'éléments. . Il s’agit d’une nouvelle approche qui fonctionne étonnamment bien.

Malgré son nom accrocheur, Underline.js n'est qu'une démo technique. Cela signifie que vous ne pouvez pas simplement le brancher sur votre projet sans modifier le code.

Je pensais mentionner cela comme une preuve de concept qui a le potentiel de créer de superbes soulignements interactifs, mais vous devez écrire votre propre JavaScript pour le faire fonctionner.

Nouvelles propriétés de décoration de texte

Vous vous souvenez que j'avais promis de parler davantage de décoration de texte. Le temps est venu.

Cette propriété fonctionne très bien seule, mais vous pouvez ajouter quelques propriétés expérimentales pour la modifier. apparence soulignant.

• texte-décoration-couleur
• sauter la décoration du texte
• style de décoration de texte

Mais ne soyez pas trop excité... La prise en charge du navigateur est comme toujours. Ainsi va.

texte-décoration-couleur

La propriété text-decoration-color vous permet de modifier la couleur de soulignement séparément de la couleur du texte. La prise en charge de cette propriété est meilleure que ce à quoi vous pourriez vous attendre : elle fonctionne dans Firefox et avec le préfixe dans Safari. Voici le problème : si vous avez des légendes, Safari placera un soulignement au-dessus du texte.

sauter la décoration du texte

La propriété text-decoration-skip permet d'ignorer les légendes dans le texte souligné.

Cette propriété n'est pas standard et ne fonctionne actuellement que dans Safari, avec le préfixe -webkit-. Safari active cette propriété par défaut, de sorte que les légendes ne sont pas toujours barrées.

Si vous utilisez Normaliser, veuillez noter que dernières versions désactivez cette propriété pour un comportement cohérent du navigateur. Et si vous souhaitez que le soulignement n’affecte pas les légendes, vous devez l’activer manuellement.

style de décoration de texte

La propriété text-decoration-style offre les mêmes options de style que propriétés de bordure-style , en ajoutant en plus le style ondulé.

Voici une liste des valeurs disponibles :

• en pointillés
• pointé
• double
• solide

Actuellement, la propriété text-decoration-style ne fonctionne que dans Firefox, en voici une capture d'écran :

Que manque-t-il

La série de propriétés text-decoration-* est beaucoup plus intuitive à utiliser que les autres propriétés de décoration soulignées CSS. Mais si nous y regardons de plus près, il n’existe pas suffisamment de moyens de définir l’épaisseur ou la position de la ligne pour satisfaire nos besoins.

Après quelques recherches, j'ai trouvé quelques propriétés supplémentaires :

• texte-souligné-largeur
• position de soulignement du texte

Celles-ci semblent être les premières versions de CSS, mais n'ont jamais été implémentées dans les navigateurs en raison d'un manque d'intérêt.

conclusions

Alors, quelle est la meilleure façon de souligner ?

Pour les petits textes, je recommande d'utiliser text-decoration en ajoutant avec optimisme text-decoration-skip . Cela semble un peu ringard dans la plupart des navigateurs, mais le soulignement a toujours été ainsi dans les navigateurs et les gens ne le remarqueront tout simplement pas. De plus, il y a toujours une chance que, si vous faites preuve de patience, ce soulignement s'affichera bien un jour sans que vous ayez à modifier quoi que ce soit comme le font les navigateurs.

Pour le corps du texte, il est logique d'utiliser background-image . Cette approche fonctionne, a fière allure et il existe des mixins Sass pour cela. Vous pouvez, en principe, ignorer l'ombre du texte si le soulignement est fin ou d'une couleur différente de celle du texte.

Pour des lignes de texte uniques, utilisez border-bottom avec n'importe quelle ligne de texte. propriétés supplémentaires.

Et si vous avez besoin que des légendes apparaissent sur un arrière-plan dégradé ou d'image, essayez d'utiliser des filtres SVG. Ou évitez simplement d'utiliser des traits de soulignement.

À l'avenir, lorsque la prise en charge du navigateur s'améliorera, la seule réponse sera l'ensemble de propriétés text-decoration-*.

Je recommande également de jeter un œil à l'article CSS Underlines Suck de Benjamin Woodroffe, qui aborde les mêmes problèmes.

Permet de créer différents soulignements en HTML : soulignement, surlignement, texte interligne, etc. Combinons cette fonctionnalité avec la précédente et obtenons :

La deuxième ligne montre comment tout est écrit sur une seule ligne avec une décoration de texte.

text-decoration-style — style de soulignement du texte

L'option spécifie l'apparence de la ligne décorative du lien /. Les nouvelles directives CSS ont ajouté des valeurs ondulées et doubles, il y en a donc désormais 5 :

• solide - ligne continue ;
• double - double (du premier exemple ci-dessus) ;
• pointillé - consiste en une séquence de points ;
• dashed - vous permet de créer un soulignement CSS en pointillés ;
• ondulé - une ligne ondulée spectaculaire.

text-underline-position - Positionnement du soulignement CSS

Grâce à cette propriété, vous pouvez contrôler la position de la ligne par rapport au glyphe de la police.
Au total, 4 options sont disponibles :

• auto — est situé aussi près que possible de la ligne de base du texte ;
• sous - en dessous de la bordure inférieure de la police ;
• gauche et droite – gauche/droite pour les messages affichés verticalement.

Voici une différence visuelle entre souligner du texte avec under et auto :

La différence, je pense, est assez évidente.

text-decoration-skip - supprime le soulignement des éléments

Grâce à cette option, vous pouvez annuler (ignorer) la décoration de certains éléments dans Ligne HTML. Pour mieux comprendre valeurs valides espaces, objets, décoration de boîte, bords, encre Je vais dupliquer l'image du post précédent :

Autrement dit, en utilisant de l'encre, vous pouvez créer un trait de soulignement en CSS qui ne croiserait pas les caractères. Les objets de valeur vous permettent d'ignorer les éléments en ligne (inline-block) - insérez une étendue et la ligne continue se brisera à l'endroit approprié :

Les paramètres box-decoration, Spaces, Edges sont beaucoup moins bien supportés par les navigateurs, leurs résultats diffèrent donc parfois de ceux attendus. Voici l’état de compatibilité/support de la décoration de texte au moment de la rédaction :

Astuces supplémentaires pour souligner les liens

Les utilisateurs débutants en demandent souvent questions typiques sur le sujet, nous avons donc également décidé de les considérer. Exemple général est tout en bas après les explications.

Comment supprimer le soulignement du lien

a:hover ( text-decoration: souligné; )

Les deux exemples ci-dessous permettent de comprendre la logique du fonctionnement du survol : soit vous pointez initialement vers CSS souligné liens, puis supprimez-le en survol, ou vice versa.

Si vous avez d'autres questions sur le sujet, posez-les dans les commentaires. Nous essaierons d'y réfléchir plus tard ou de vous donner quelques indices dans les réponses. L'essentiel dans ce domaine est la pratique - essayez d'ajouter différentes propriétés pour l'option de décoration de texte directement dans les exemples ou créez votre propre fichier de test. Nous espérons que tout est devenu clair sur le thème du soulignement du texte et des liens en CSS/HTML.

Avec l'avènement de CSS3, HTML5 et l'inclusion de polices Web, les sites sont devenus dynamiques, beaux et plus avancés technologiquement dans le processus de développement. Beaucoup de gens n'aiment pas souligner les liens et dans une certaine mesure, je les comprends. Des lignes assez épaisses aident cependant l’utilisateur à naviguer sur le site et à distinguer un lien du texte normal. Mais ils rendent la lecture quelque peu difficile.

Avec l'avènement du format RVBA(Alpha rouge vert bleu) en CSS3, ce problème peut être considéré comme résolu. En utilisant un format avancé de représentation des couleurs, les concepteurs Web ont désormais la possibilité d'utiliser la transparence alpha pour la couleur.

Contrairement à la propriété opacité, elle peut être appliquée à la police, aux bordures et à l'arrière-plan d'un bloc sans modifier la transparence du contenu du bloc. Les valeurs de couleur RGBA sont une continuation valeurs de couleur RVB avec seulement un canal alpha - qui détermine l'opacité de l'objet.

Syntaxe

couleur : rgba (0,96,160) ; /* Couleur bleue*/ couleur : rgba (0,96,160,0.2 ) ; / *couleur bleue avec transparence */

La valeur de couleur RGBA est donnée par : RGBA (rouge, vert, bleu, alpha).
Le paramètre alpha représente un nombre à partir de 0,0(complètement transparent) jusqu'à 1,0(complètement opaque).

Compatibilité

Les valeurs de couleur RGBA sont prises en charge par les navigateurs : IE9+, Firefox 3+, Chrome, Safari et Opera 10+.

Qui a mis en œuvre

Lebedev Studio, Artyom Gorbunov Design Bureau, Ilya Birman ont immédiatement profité de cette opportunité... Sur leurs sites, le soulignement des liens est resté, mais il est devenu plus élégant.

patpitchaya/

Salutations à tous ceux qui ont soif de nouvelles connaissances et qui lisent mon blog. Publication aujourd'hui Je souhaite me consacrer à un sujet très simple, qui soulève néanmoins régulièrement un certain nombre de questions de la part des débutants : « Comment supprimer ou ajouter un trait de soulignement en HTML ».

Comme vous le savez déjà, le trait de soulignement lui-même peut être défini manuellement, mais pour les liens, il est défini par défaut. C'est pourquoi, dans cet article, je vais vous rappeler comment souligner les titres, vous expliquer comment définir la ligne du bas sur toute la largeur du bloc et également comment gérer le formatage standard des liens. Eh bien, commençons !

Soulignons cela !

Il existe une balise spéciale associée pour souligner le texte : mot.

Cependant, les maquettistes professionnels utilisent les mécanismes des tables de style en cascade, c'est-à-dire css, pour concevoir l’apparence de tout. Et c'est vrai. Cette approche sépare le balisage du style et rend le formatage flexible et pratique. De plus, il est plus facile de détecter les bugs (erreurs) dans le code.

Les propriétés suivantes sont principalement utilisées pour mettre en valeur le contenu du texte : frontière Et décoration de texte.

Élément frontière est responsable de la définition d'un cadre autour du bloc spécifié et vous permet également de définir l'épaisseur de la ligne et son style.

Cette unité linguistique est assez flexible, puisque vous pouvez spécifier le formatage pour chaque côté de la frontière. Ceci est réalisé en utilisant les propriétés :

1. frontière-droite(sur la droite)
2. frontière-haut(au-dessus de)
3. frontière-gauche(gauche)
4. frontière-bas(bas)

Utilisant également frontière vous pouvez définir :

• point ( pointé)
• pointillé ( en pointillés)
• linéaire ( solide)
• double ( double)
• encadrement volumétrique de blocs ( rainureencartcrête etdébut)

N'oubliez pas que vous pouvez toujours répéter les paramètres de style du bloc parent en utilisant mot-clé hériter.

Parlons maintenant de la propriété langage CSS décoration de texte. Cet objet est responsable des décorations de texte supplémentaires.

Ceux-ci inclus:

1. clignotant ( clignoter)
2. ligne au-dessus du texte ( surligner)
3. objets barrés ( ligne à travers)
4. héritage de style ( hériter)
5. annulation de toutes les décorations supplémentaires ( aucun)
6. le soulignement dont nous avons besoin ( souligner)

Il est temps de s'entraîner

Maintenant, je veux que vous consolidiez les connaissances acquises et que vous essayiez pratiquement l'exemple que j'ai donné code de programme. Pour ceux qui connaissent ce sujet, cela sera également utile. Comme nous le savons tous : « La répétition est la mère de l’apprentissage ! »

Ce code implémente une stylisation modifiée des liens et définit également le soulignement du titre sur toute la largeur du bloc.

Intitulons le texte avec un titre souligné.

Sur cette note, je termine cette publication pédagogique. Il couvre tout outils nécessaires pour mettre l'accent sur le contenu du texte, sachant que vous pouvez créer vos propres options de conception pour les pages du site Web.

N'oubliez pas de rejoindre les rangs de mes abonnés, car il y a encore de nombreux sujets intéressants et utiles à venir, et partagez également le lien du blog avec vos amis. Bye Bye!

Cordialement, Roman Chueshov

De l'auteur : Le style des soulignements de liens est assez délicat et j'oublie toujours quelle méthode est la meilleure dans quelle situation. Heureusement, John Jameson va nous aider à comprendre rapidement cela dans son article.

Il existe de nombreuses façons de styliser les soulignements. Vous vous souvenez peut-être de l'article « Création de soulignements de liens sur Medium ». Medium n'essayait pas de faire quoi que ce soit qui sorte de l'ordinaire, ils voulaient juste créer des soulignements attrayants dans le texte.

Des soulignements fins et noirs avec des espaces autour des lettres avec des légendes inférieures – travail de Marcine Witchery tiré de l'article Création de soulignements de liens sur support.

Un bon soulignement standard, qui a également bonne taille et saute les lettres inférieures. Bien mieux que la valeur par défaut de la plupart des navigateurs. Il s'avère que Medium a été confronté à de nombreux défis en cours de route. Et même deux ans plus tard, un bon style de soulignement pose encore beaucoup de problèmes.

Objectifs

Pourquoi ne pas simplement utiliser text-decoration: underline ? Si nous parlons d'un scénario idéal, les traits de soulignement devraient :

être situé en dessous de la ligne de base ;

sauter les lettres inférieures ;

changer la couleur, l'épaisseur et les styles ;

aller à nouvelle ligne;

travailler avec n’importe quel arrière-plan.

Je pense qu'il est tout à fait possible pour nous d'exiger toutes ces choses des traits de soulignement, mais autant que je sache, il n'existe aucun moyen intuitif de faire toutes ces choses en CSS.

Approches

Alors, de quelles méthodes disposons-nous pour souligner un texte ? Je me suis souvenu de ce qui suit :

décoration de texte ;

image de fond;

Filtres SVG ;

Souligner.js(toile);

texte-décoration-*

Passons en revue toute la liste et considérons tous les avantages et inconvénients de chaque approche.

propriété de décoration de texte

La propriété text-decoration est le moyen le plus simple de souligner du texte. Il vous suffit d'appliquer une seule propriété. Sur un petit texte, une telle ligne aura fière allure, mais si vous augmentez la taille de la police, elle semblera gênante.

Le plus gros problème avec la propriété text-decoration est le manque de personnalisation. La ligne utilise la couleur et la taille de police du texte auquel elle est appliquée, et il n'existe aucun moyen multi-navigateur de modifier les styles. Nous parlerons plus en détail de cette propriété un peu plus tard.

avantages

facile à utiliser;

situé en dessous de la ligne de base ;

ignore les descendeurs par défaut dans Safari et iOS ;

passe à une nouvelle ligne ;

fonctionne avec n’importe quel arrière-plan.

Inconvénients

n'ignore pas les descendants de lettres dans d'autres navigateurs ;

La couleur, l'épaisseur et les styles ne peuvent pas être modifiés.

propriété de bordure inférieure

La propriété border-bottom est un bon équilibre entre vitesse et personnalisation. Cette approche utilise des cadres CSS éprouvés, ce qui signifie que vous pouvez facilement modifier la couleur, l'épaisseur et les styles. Voici à quoi ressemble la propriété border-bottom sur les éléments en ligne :

Le plus gros inconvénient est la distance entre le soulignement et le texte. Le soulignement est situé sous les descendants des lettres. Ce problème Cela peut être résolu si vous créez un bloc en ligne et réduisez la hauteur de la ligne, mais vous perdez alors la possibilité de passer à de nouvelles lignes. Bon pour les lignes simples, mais pas plus.

Vous pouvez également utiliser text-shadow pour masquer des parties de la ligne autour des légendes inférieures. Dans ce cas, vous devrez imiter la couleur du fond, ce qui signifie que la méthode ne fonctionne que sur des fonds uniformes. Les dégradés et les images ne fonctionneront pas.

Il existe actuellement 4 propriétés pour le style souligné. Bien mieux qu'une simple décoration de texte.

avantages

vous pouvez utiliser la propriété de transition et animer la couleur et l'épaisseur ;

passe aux nouvelles lignes par défaut si l'élément n'est pas un bloc en ligne ;

Inconvénients

la ligne est située très loin et est difficile à déplacer ;

trop de propriétés inutiles doivent être utilisées pour que le soulignement soit beau ;

Mauvaise mise en évidence du texte lors de l'utilisation de Text-Shadow.

propriété box-shadow

La propriété box-shadow dessine un soulignement à l'aide de deux ombres intérieures : une qui crée le rectangle et une qui le masque. Cela signifie que pour que la méthode fonctionne correctement, un arrière-plan uniforme est nécessaire.

La même astuce texte-ombre peut être utilisée pour simuler le saut des légendes inférieures des lettres. Si la couleur de la ligne est différente de celle du texte ou si elle est suffisamment fine, il ne devrait y avoir aucun problème, comme c'est le cas avec la décoration du texte.

avantages

peut être placé en dessous de la ligne de base ;

vous pouvez ignorer les légendes en utilisant text-shadow ;

vous pouvez changer la couleur et l'épaisseur ;

passe à de nouvelles lignes.

Inconvénients

les styles ne peuvent pas être modifiés ;

Ne fonctionne pas avec tous les arrière-plans.

propriété d'image d'arrière-plan

La propriété background-image résout mieux nos problèmes et présente très peu d’inconvénients. L'idée est de créer une image en utilisant un dégradé linéaire et une position d'arrière-plan qui se répètent sur un axe horizontal le long des lignes de texte. L'élément doit être display: inline;.

La démo ci-dessous n'utilise pas de dégradé linéaire. Pour créer un effet sympa, vous pouvez utiliser votre propre image.

avantages

peut être positionné en dessous de la ligne de base ;

vous pouvez ignorer les légendes du bas en utilisant text-shadow ;

vous pouvez changer la couleur, l'épaisseur (même d'un demi-pixel) et les styles ;

fonctionne avec des images personnalisées ;

passe à de nouvelles lignes ;

fonctionne avec n'importe quel arrière-plan tant que vous n'utilisez pas d'ombre de texte.

Inconvénients

La taille de l'image peut varier en fonction de la résolution, du navigateur et du niveau de zoom.

Filtres SVG

C'est la méthode avec laquelle j'ai joué. Vous pouvez créer un élément de filtre SVG en ligne qui tracera la ligne et développera le texte pour masquer les parties de la ligne qui doivent être transparentes. Le filtre peut recevoir un identifiant et être référencé en CSS en utilisant filter: url('#svg-underline').

Ce qui est génial, c'est que le filtre ajoute de la transparence sans s'appuyer sur l'ombre du texte. Cela signifie que vous pouvez ignorer les ballons de lettres sur n'importe quel arrière-plan, y compris les dégradés et les images ! L'exemple ci-dessous ne fonctionne qu'avec une seule ligne de texte, alors soyez prudent.

Et voici à quoi cela ressemble dans Chrome et Firefox :

Il existe des problèmes de support dans IE, Edge et Safari. Il est difficile de tester la prise en charge des filtres SVG en CSS. Vous pouvez utiliser la règle @supports sur le filtre, mais cela vérifiera uniquement si le lien lui-même fonctionne, et non si le filtre est appliqué ou non. Ma méthode est assez rude pour les navigateurs, alors soyez doublement prudent.

avantages

situé en dessous de la ligne de base ;

saute les leaders inférieurs ;

Vous pouvez modifier la couleur, l'épaisseur et les styles ;

fonctionne sur n’importe quel arrière-plan.

Inconvénients

ne saute pas vers de nouvelles lignes ;

ne fonctionne pas dans IE, Edge et Safari, mais vous pouvez spécifier la décoration de texte comme solution de secours. Les soulignements dans Safari sont superbes en eux-mêmes.

Souligner.js (Toile)

Underline.js est une bibliothèque étonnante. Je suis impressionné par ce que Wenting Zhang a pu faire avec JS et par l'attention portée aux détails. Si vous n'avez pas encore vu la démo technique Underline.js, arrêtez-vous une minute et jetez-y un œil. Il existe en ligne un merveilleux discours de neuf minutes sur les principes du travail, je vais vous le raconter rapidement maintenant. Les soulignements sont dessinés à l'aide de toile. Une toute nouvelle approche qui fonctionne étonnamment bien.

Malgré le nom attrayant, il ne s'agit que d'une démo technique. Autrement dit, vous ne pourrez pas intégrer immédiatement la bibliothèque dans le projet sans toute une série de modifications.

Cette bibliothèque ne mérite d'être mentionnée qu'à titre de preuve de concept. Canvas a le potentiel de créer de superbes surlignages interactifs, mais vous devrez écrire du code JS supplémentaire pour qu'il fonctionne correctement.

Propriétés texte-décoration-*

Vous vous souvenez quand j'ai dit que nous aborderions plus en détail quelque chose un peu plus tard ? Maintenant, faisons ceci. La propriété text-decoration fonctionne bien seule, mais nous pouvons ajouter quelques propriétés expérimentales pour une valeur ajoutée. meilleure vue:

texte-décoration-couleur

sauter la décoration du texte

style de décoration de texte

Ne vous réjouissez pas à l’avance, vous connaissez la prise en charge des navigateurs.

propriété text-decoration-color

La propriété text-decoration-color vous permet de modifier la couleur de soulignement séparément de la couleur du texte. La propriété dispose même d’un bon support de navigateur. Cela fonctionne dans Firefox et préfixé dans Safari. Il y a un inconvénient : si vous ne supprimez pas la ligne autour des légendes, dans Safari, elle se trouvera au-dessus du texte. Firefox :

propriété text-decoration-skip

La propriété text-decoration-skip est chargée de sauter les bulles de pied de page dans le texte souligné.

La propriété n’est pas standard et ne fonctionne actuellement que dans Safari. Pour travailler dans d'autres navigateurs, vous devez utiliser le préfixe –webkit-. Dans Safari, cette propriété est activée par défaut, c'est pourquoi les traits de soulignement sautent les pieds de page même sur les sites où cette propriété n'est pas spécifiée.

Si vous utilisez Normalize, vous devez savoir que les versions récentes désactivent la propriété pour fonctionnement normal dans tous les navigateurs. Si vous souhaitez récupérer ces soulignements presque magiques, vous devez activer cette propriété.

propriété de style de décoration de texte

La propriété text-decoration-style offre le même ensemble de soulignements que la propriété border-style, mais ajoute également le nouveau genre– ondulé. Valeurs possibles:

Pour le moment, la propriété text-decoration-style ne fonctionne que dans Firefox, voici une capture d'écran :

Ensemble de soulignements monochromes Ressemble-t-il ?

Qu'est-ce qui ne va pas?

Les propriétés text-decoration-* sont plus intuitives que les autres propriétés de style souligné. Cependant, si vous examinez différemment les exigences que nous avons présentées précédemment, vous remarquerez qu'en utilisant ces propriétés, vous ne pouvez pas modifier l'épaisseur et la position. Après quelques recherches, j'ai trouvé ces deux propriétés :

texte-souligné-largeur

position de soulignement du texte

On dirait que ces propriétés ont été jetées première version CSS en raison du manque d'intérêt pour eux. Ils n'ont jamais été utilisés. Hé, ce n'est pas ma faute.

conclusions

Alors, quelle est la meilleure façon de souligner du texte ? Tout dépend de divers facteurs.

Pour les petits textes, je recommande d'utiliser text-decoration et la propriété expérimentale text-decoration-skip, en espérant que cela fonctionnera. Dans la plupart des navigateurs, cela semble moyen, mais cela a toujours été ainsi et les gens n'y ont pas prêté attention. Si vous êtes assez patient, il y a de fortes chances que bientôt tous vos soulignements s'affichent correctement sans que vous ayez à changer quoi que ce soit.

Pour le corps du texte, utilisez background-image. La méthode fonctionne, est magnifique et il existe des mixins Sass pour cela. Si le soulignement est fin ou si la couleur est différente de celle du texte, vous pouvez probablement ignorer la méthode texte-ombre. Pour le texte sur une seule ligne, utilisez border-bottom et toute autre propriété.

Et pour ignorer les légendes de lettres sur des arrière-plans ou des images dégradés, essayez d'utiliser un filtre SVG. Ou tout simplement ne mélangez pas ces arrière-plans avec des soulignements. À l'avenir, lorsque la prise en charge du navigateur s'améliorera, il sera possible d'utiliser les propriétés text-decoration-*.