12.6 Les marqueurs et les listes
12.6.1 Les marqueurs : la propriété 'marker−offset'
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Voici le premier item.
<LI> Voici le deuxième item.
<LI> Voici le troisième item.
</OL>
</BODY>
</HTML>
ceci devrait donner quelque chose comme :
i. Voici le premier item.
ii. Voici le deuxième item.
iii. Voici le troisième item.
Avec des sélecteurs descendants et des sélecteurs d'enfants, il est possible de spcifier divers types de marqueurs en fonction de la profondeur de listes imbriquées.
12.6.1 Les marqueurs : la propriété 'marker−offset'
On crée un marqueur en spécifiant la valeur 'marker' à la propriété 'display' dans un pseudo−élément :before ou :after. Alors que les contenus de ces pseudo−éléments, ayant les valeurs 'block' et 'inline', font partie de la boîte principale générée par l'élément, un contenu avec la valeur 'marker' est mis en forme dans une boîte indépendante, en dehors de la boîte principale. Les boîtes des marqueurs s'inscrivent dans une seule ligne (c.à.d. dans une boîte de ligne), celles−ci ne sont pas aussi souples d'emploi que les flottants. Une boîte de marqueur n'est créée que si la propriété 'content' du pseudo−élément génère effectivement un contenu.
Les boîtes de marqueurs ont des espacements et des bordures, mais pas de marges.
Avec le pseudo−élément :before, la ligne de base de la boîte de marqueur sera alignée avec celle de la première boîte de ligne de la boîte principale. Si celle−ci ne contient pas de boîte de ligne, ou si celle−ci contient une boîte de bloc se trouvant au−dessus la première boîte de ligne, le bord externe haut de la boîte de marqueur sera aligné avec celui de la boîte principale.
Avec le pseudo−élément :after, la ligne de base de la boîte de marqueur sera alignée avec celle de la dernière boîte de ligne de la boîte principale. Si celle−ci ne contient pas de boîte de ligne, ou si celle−ci contient une boîte de bloc se trouvant en−dessous de la dernière boîte de ligne, le bord externe bas de la boîte de marqueur sera aligné avec celui de la boîte principale.
La hauteur d'une boîte de marqueur est donnée par la propriété 'line−height'. La boîte de marqueur d'un pseudo−élément :before (ou :after) entre dans le calcul de la hauteur de la première boîte de ligne (ou la dernière) de la boîte principale. Ainsi, les marqueurs sont alignés sur la première ligne, ou la dernière, du contenu d'un élément, bien que ceux−ci occupent des boîtes distinctes. Quand il n'y a pas de première boîte de ligne, ou de dernière, la boîte de marqueur établit elle−même sa propre boîte de ligne.
L'alignement vertical d'une boîte de marqueur dans sa boîte de ligne est donné par la propriété 'vertical−align'.
Si la valeur de la propriété 'width' est 'auto', la largeur du contenu de la boîte de marqueur correspond à celle du contenu, et, pour une autre valeur, à celle spécifiée dans la propriété 'width'. Quand la valeur spécifiée par 'width' est inférieure à celle de la largeur effective du contenu, c'est la propriété 'overflow' qui précise la manière du débordement. Les boîtes de marqueurs peuvent recouvrir leur boîte principale. Quand la valeur spécifiée par 'width' est supérieure à celle de la largeur effective du contenu, c'est la propriété 'text−align' qui détermine l'alignement horizontal du contenu de la boîte de marqueur.
La propriété 'marker−offset' spécifie le décalage horizontal entre une boîte de marqueur et la boîte principale à laquelle celle−ci est associée. Ce décalage correspond à la distance entre les bords de leurs bordures les plus proches. Note : Si un marqueur sécoule à la droite d'un flottant dans un contexte de mise en forme de gauche à droite, la boîte principale s'écoulera le long du flanc droit du flottant, mais la boîte de marqueur apparaîtra à la gauche du flottant. Le bord de la bordure gauche de la boîte principale venant contre le bord gauche du flottant (voir la description des flottants), et les boîtes des marqueurs se trouvant en dehors du bord de la bordure de leur boîte principale, le marqueur se trouvera ainsi à gauche du flottant. De la même façon et inversement, dans un contexte de mise en forme de droite à gauche et pour un marqueur s'écoulant à la gauche d'un flottant.
Quand la propriété 'display' a la valeur 'marker' pour le contenu d'un élément, celui−ci ayant une valeur 'display:
list−item', alors c'est une boîte de marqueur générée par le pseudo−élément :before qui remplace le marqueur normal de l'item de liste.
Dans l'exemple, le contenu est centré dans une boîte de marqueur de largeur fixe. Soit le document :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Alignement du contenu dans une boîte de marqueur</TITLE>
<STYLE type="text/css">
LI:before {
celui−ci pourrait être rendu par :
(1) Voici l'item numéro 1.
(2) Voici l'item numéro 2.
(3) Voici l'item numéro 3.
Cet exemple−ci crée des marqueurs avant et après les items d'une liste : Soit le document :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Des marqueurs avant et après les items d'une liste</TITLE>
<STYLE type="text/css">
@media screen, print {
celui−ci pourrait être rendu ainsi (on utilise une représentation en caractères ASCII à la place des images) :
:−) le premier item vient d'abord :−(
:−) le second item vient ensuite :−(
L'exemple suivant utilise des marqueurs pour numéroter des notes (de paragraphes).
Soit le document :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Des marqueurs pour numéroter des notes</TITLE>
<STYLE type="text/css">
P { margin−left: 12 em; }
<P>Voici le premier paragraphe de ce document.</P>
<P CLASS="Note">Maintenant, un paragraphe très court.</P>
<P>Et le paragraphe final.</P>
</BODY>
</HTML>
celui−ci pourrait être rendu ainsi :
Voici le premier paragraphe de ce document.
Note 1 : Maintenant, un paragraphe
très court.
Et le paragraphe final.
'marker−offset'
Valeur : <longueur> | auto | inherit Initiale : auto
S'applique à : ceux des éléments dont la valeur de la propriété 'display' est 'marker'
Héritée : non
Pourcentage : sans objet Médias : visuel
Cette propriété spécifie la distance entre les bords des bordures les plus proche d'une boîte de marqueur et la boîte principale qui lui est associée. Ce décalage peut être définie par l'utilisateur (<longueur>) ou bien par l'agent utilisateur (pour une valeur 'auto'). Les valeurs peuvent être négatives, mais leur interprétation peut dépendre de l'implémentation.
L'exemple suivant montre comment utiliser les marqueurs pour ajouter un point après chaque item numéroté d'une liste. Soit ce document HTML et sa feuille de style :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Exemple 5 avec les marqueurs</TITLE>
<STYLE type="text/css">
P { margin−left: 8em } /* Fait de la place pour les compteurs */
ceci devrait donner quelque chose comme :
Voici le long paragraphe
12.6.2 Les listes : les propriétés 'list−style−type', 'list−style−image', 'list−style−position' et