Bert
Bos, coordinateur de l'activité
styleCopyright © 1994–2021 W3C® Privacy policy
Created 27 Mar 2011;
Last updated mer. 06 janv. 2021 05:40:49 UTC
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Coralie Mercier
Voir aussi l'index de toutes les astuces.
Les typographes appellent "points de conduite" les lignes de points qui connectent les colonnes d'un tableau, telles que ci-après :
Les points sont les plus ordinaires, mais on peut utiliser d'autres symboles, comme les tirets, une ligne continue munie d'une flèche. Ils servent à connecter visuellement des éléments dans un espace de taille variable.
CSS devrait bientôt disposer de véritables points de conduite, qui peuvent être ajoutés après ou avant un élément afin de le relier à un élément voisin. En attendant, penchons-nous sur une astuce pour les simuler en CSS niveau 2.
La méthode ci-dessous n'est ni la première ni la seule à amener CSS à afficher des points de conduite. Nous devons la première à Tantek Çelik. Il fit son menu du Bella Mia, vous l'aurez deviné, pendant un diner dans un restaurant appelé Bella Mia, cela remonte au moins à l'année 2000. Il existe d'autres exemples par Micah Sittig et Brett Merkey.
Le menu de restaurant de l'exemple est balisé comme une liste :
<ul class=leaders> <li><span>Raviolis au saumon</span> <span>7.95</span> <li><span>Calamars frits</span> <span>8.95</span> <li><span>Cocktail de crevettes aux amandes</span> <span>7.95</span> <li><span>Bruschetta</span> <span>5.25</span> <li><span>Pizza Marguerite</span> <span>10.95</span> </ul>
Le balisage ne présente pas de particularité. J'ai choisi une liste, car la sémantique d'un menu de restaurant est une liste. Les deux colonnes du menu doivent cependant être dans des éléments différents. Dans ce cas, elles sont toutes les deux dans des SPANs.
Nous créons les points de conduite en attachant un pseudo-élément ‘:before’ aux éléments LI. Le pseudo-élément remplit toute la largeur de l'objet de liste avec des points et les SPANs viennent s'ajouter par dessus. Le fond blanc des SPANs cache les points et on s'assure qu'ils ne s'étendent pas au-delà de la liste en ajoutant ‘overflow: hidden’ au UL :
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white}
J'ai choisi 80 points de manière arbitraire, car ils suffisent à remplir un espace de 38em, soit la largeur maximale de la liste. Nous donnons au ‘:before’ une largeur de zéro, de façon à ce qu'il ne prenne aucun espace et que le contenu apparaisse au-dessus des points.
Les règles ‘padding: 0’ et ‘list-style: none’ servent à supprimer le style par défaut des listes : j'ai choisi de baliser ce menu en tant que liste, but je ne veux pas de puces avant les objets.
Un des avantages d'attacher les points à l'objet de liste au lieu d'un des SPANs est de permettre aux points d'être bien alignés verticalement. C'est souvent l'effet recherché si vous avez plusieurs lignes adjacentes avec des points de conduite.
Voici quelques variations utilisant des symboles différents de points de conduite. La première recourt au point médian plutôt que le point. Les règles de style sont les mêmes, mais le texte produit contient “·” au lieu de “.” :
Le symbole de la puce ressemble à un point médian, en plus gros :
Avec le deux-points :
Cette ligne de conduite est constituée de signes plus en couleur sans espace :
La variation finale est un peu différente. La ligne est une flèche et le défi qui se présente à nous est d'empêcher les symboles de s'empiler verticalement, tout en plaçant la pointe de la flèche au bout de l'interstice. Pour cette raison, la ligne n'est pas rattachée à l'objet de liste, mais à l'élément contenant le prix. Consultez la source de la page pour voir comment ceci est réalisé.
Mais que faire si le texte avant les points de conduite est tellement long qu'il tient sur plusieurs lignes? La rangée de points doit être plus basse dans ce cas, non pas à la suite de la première ligne de texte, mais derrière la dernière. Sans les nouvelles fonctionnalités proposées pour CSS niveau 3, nous ne pouvons pas résoudre ceci dans le cas général, mais nous pouvons cependant dans les cas simples donner à cette ligne un aspect raisonnable.
Nous devons alors supposer que le texte après les points de conduite est suffisamment court et qu'il ne passera pas à la ligne. Et puis nous attachons les points non au début du texte (':before'), mais à la fin (':after'), afin qu'ils s'affichent derrière la dernière ligne du texte, au lieu de la première. Voici à quoi ça ressemble :
Les règles CSS sont les mêmes que précédemment, sauf que nous utilisons maintenant le sélecteur 'ul.leaders li:after' au lieu de 'li ul.leaders:before'.
Et il y a une subtilité supplémentaire : parce que les points sont maintenant logiquement après le dernier texte, ils seront dessinés au-dessus, au lieu de dessous. Nous devons forcer ce texte à apparaître au-dessus des points de conduite, afin que ceux-ci n'apparaissent pas là ou est le texte. CSS dispose de la propriété 'z-index' pour cela. Elle ne fonctionne que pour les éléments positionnés, nous avons donc besoin d'ajouter deux déclarations. Les règles complètes sont les suivantes :
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:after {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white;
position: relative;
z-index: 1}
La fonctionnalité des points de conduite est en cours de développement dans CSS niveau 3 (à la date de mars 2011), mais à terme elle rendra la rédaction des exemples ci-dessus bien plus facile.
Le premier exemple se simplifie de la façon suivante :
ul.leaders {
padding: 0;
list-style: none}
ul.leaders span:first-child:after {
content: leader(dotted)}
Ceci permet de pousser le second SPAN au bout de la ligne et évite d'avoir besoin de le rendre flottant.
‘Dotted’ (en pointillé) est un mot-clé prédéfini. Mais n'importe quel symbole peut figurer entre guillemets, par exemple ‘leader("· ")’ pour l'ensemble point médian + espace. Voici les exemples à nouveau, en utilisant les fonctionnalité proposées en CSS niveau 3. Ils sont peu susceptibles de fonctionner à l'heure actuelle. (À dater de novembre 2014, seul Prince et PDFReactor sont réputés en fournir du support expérimental.)
La ligne de conduite munie d'une flèche provient des caractères “horizontal line extension” (extension de ligne horizontale) (\23AF) et flèche (\2192). Ces caractères ne s'alignent pas dans toutes les polices, mais ils le font dans la police Symbol. Néanmoins, il peut y avoir un interstice juste avant la flèche puisque la version préliminaire de document actuelle ne définit pas encore comment aligner la ligne de conduite à la droite. (Nous avons utilisé une astuce ici : un peu de 'letter-spacing' negatif aide à fermer l'interstice, mais ça peut être insuffisant.)
Bert
Bos, coordinateur de l'activité
styleCreated 27 Mar 2011;
Last updated mer. 06 janv. 2021 05:40:49 UTC