5.12.1 Le pseudo−élément :first−line
Le pseudo−élément :first−line produit un style particulier sur la première ligne formatée d'un paragraphe. Par exemple :
P:first−line { text−transform: uppercase }
La règle précédente signifie "mettre les lettres de la première ligne de chaque paragraphe en majuscule".
Cependant, le sélecteur "P:first−line" ne correspond à aucun élément HTML réel. Celui−ci correspond en fait à un pseudo−élément que l'agent utilisateur conforme va insérer au début de chaque paragraphe.
Noter que la longueur de la première ligne dépend de plusieurs facteurs, dont la largeur de la page, la taille de la police, etc. Ainsi un paragraphe quelconque en HTML tel que :
<P>Voici un paragraphe HTML plutôt long qui va être découpé en plusieurs lignes. La première ligne sera identifiée à l'aide d'une séquence de balises fictives.
Les autres lignes vont rester ordinaires dans la suite du paragraphe.</P>
Celui−ci va apparaître avec le découpage des lignes suivant :
VOICI UN PARAGRAPHE HTML PLUTÔT LONG qui va être découpé en plusieurs lignes.
La première ligne sera identifiée à
l'aide d'une séquence de balises fictives.
Les autres lignes vont rester ordinaires dans la suite du paragraphe.
Un agent utilisateur pourrait le "récrire" et y inclure la séquence de balises fictives pour le pseudo−élément :first−line. Cette séquence fictive aide à représenter comment les propriété sont héritées.
<P><P:first−line>Voici un paragraphe HTML plutôt long </P:first−line>qui va être découpé
en plusieurs lignes. La première ligne sera identifiée à l'aide d'une séquence de balises fictives. Les autres lignes vont rester ordinaires dans la suite du paragraphe.</P>
Quand un pseudo−élément coupe un élément réel, on peut souvent décrire l'effet désiré avec une séquence de balises fictives qui ferment puis ré−ouvrent cet élément. Ainsi, si on balise le paragraphe de l'exemple avec un élément SPAN :
<P><SPAN class="test">Voici un paragraphe HTML plutôt long qui va être découpé en plusieurs lignes.</SPAN>
La première ligne sera identifiée à l'aide d'une séquence
de balises fictives. Les autres lignes vont rester ordinaires dans la suite du paragraphe.</P>
L'agent utilisateur pourrait générer la séquence de balises fictives, ouvrantes et fermantes, de façon appropriée, pour l'élément SPAN au moment d'insérer celle du pseudo−élément :first−line.
<P><P:first−line><SPAN class="test"> Voici un paragraphe HTML plutôt long</SPAN></P:first−line><SPAN class="test"> qui va être découpé en plusieurs lignes.</SPAN> La
première ligne sera identifiée à l'aide d'une séquence de
balises fictives. Les autres lignes vont rester ordinaires dans la suite du paragraphe.</P>
Dans le cas où une certaine première ligne est aussi la première d'un certain élément de type bloc A et en même temps que l'ancêtre B de celui−ci, la séquence de balise fictive devient :
<B>...<A>...<B:first−line><A:first−line>Voici la première ligne</A:first−line></B:first−line>
Toutes les balises fictives se trouvent dans le plus petit des élément de type bloc, l'ordre d'imbrication des balises fictives A:first−line et B:first−line correspondant à celui des éléments A et B.
La "première ligne mise en forme" d'un élément de type bloc correspond à la première ligne dans le flot de l'élément, ignorant ainsi d'éventuels éléments flottants ou en position absolue. Par exemple :
<div>
<p style="float: left">Paragraphe flottant...</p>
<p>La première ligne commence ici...</p>
</div>
Un sélecteur 'div:first−line' s'appliquerait à la première ligne du second paragraphe, car le premier paragraphe se trouve en dehors du flot normal.
Le pseudo−élément :first−line ne peut s'attacher qu'à un élément de type bloc.
Le pseudo−élément :first−line est similaire à un élément de type en−ligne, avec certaines restrictions. Seules les propriétés suivantes peuvent lui être appliquées : les propriétés de police, les propriétés de couleur, les propriétés d'arrière−plan, 'word−spacing', 'letter−spacing', 'text−decoration', 'vertical−align', 'text−transform', 'line−height', 'text−shadow' et 'clear'.
5.12.2 Le pseudo−élément :first−letter
Le pseudo−élément :first−letter peut être employé pour faire des capitales initiales et des lettrines, ce sont des effets typographiques courants. Ce genre de lettre initiale est assimilé à un élément de type en−ligne quand la valeur de sa propriété 'float' est 'none', et assimilé à un élément flottant autrement.
Le pseudo−élément :first−letter admet ces propriétés : les propriétés de police, les propriétés de couleur, les propriétés d'arrière−plan, 'text−decoration', 'vertical−align' (seulement si la valeur de la propriété 'float' est 'none'), 'text−transform', 'line−height', les propriétés de marge, les propriétés d'espacement, les propriétés de bordure, 'float', 'text−shadow' et 'clear'.
Cette feuille de style produit une lettrine qui s'étend sur deux lignes :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Lettrine</TITLE>
<STYLE type="text/css">
P { font−size: 12pt; line−height: 12pt } P:first−letter { font−size: 200%; font−style: italic;
font−weight: bold; float: left } SPAN { text−transform: uppercase } </STYLE>
</HEAD>
<BODY>
<P><SPAN>Les premiers</SPAN> mots parmi ceux d'un article de journal.</P>
</BODY>
</HTML>
Ce qui pourrait apparaître de cette manière :
La séquence de balises fictives en est :
<P>
<SPAN>
<P:first−letter>
L
</P:first−letter>es premiers
</SPAN>
mots parmi ceux d'un article de journal.
</P>
Noter que les balises du pseudo−élément :first−letter (c.à.d., le premier caractère) viennent buter contre le contenu, alors que la balise ouvrante du pseudo−élément :first−line s'insère juste après celle ouvrante de l'élément auquel il est accolé.
Pour obtenir le formatage des lettrines traditionnelles, les agents utilisateurs peuvent approcher les tailles des polices, par exemple dans l'alignement des lignes de base. Le contour des glyphes peut aussi intervenir dans le formatage.
Les caractères de ponctuation (c.à.d. les caractères définis en Unicode [UNICODE] dans les classes de ponctuation "open" (Ps), "close" (Pe) et "other" (Po) ), qui précèdent la première lettre, ceux−ci devraient être pris en compte, comme ici :
Le pseudo−élément :first−letter ne peut correspondre qu'avec une partie d'un élément de type bloc.
Certaines combinaisons de lettres, dans une langue donnée, peuvent obéir à des règles particulières. En hollandais, par exemple, quand la combinaison "ij" survient au début d'un mot, le pseudo−élément :first−letter devrait les prendre en compte ensemble.
Exemple(s) :
L'exemple suivant illustre l'interaction de pseudo−éléments qui sont enchevêtrés. La première lettre de chacun des éléments P sera verte et aura une taille de police de '24pt'. La suite de cette première ligne sera bleue, le reste des lignes du paragraphe sera rouge.
P { color: red; font−size: 12pt }
P:first−letter { color: green; font−size: 200% } P:first−line { color: blue }
<P>Voici un morceau de texte qui est formaté sur deux lignes.</P>
En supposant qu'un retour à la ligne survient avant le mot "sur", la séquence de balises fictives en serait :
<P>
<P:first−line>
<P:first−letter>
V
</P:first−letter>oici un morceau de texte qui est formaté
</P:first−line>
sur deux lignes.
</P>
Noter que l'élément P:first−letter se tient à l'intérieur de l'élément P:first−line. Le pseudo−élément :first−letter hérite des propriétés appliquées au pseudo−élément :first−line, cependant, si on lui spécifie une même propriété, c'est la valeur de cette dernière qui sera retenue.
5.12.3 Les pseudo−éléments :before et :after
Les pseudo−élément ':before' et ':after' servent à insérer un contenu généré avant ou après celui d'un élément. Le chapitre sur le texte généré en donne une explication.
Exemple(s) :
H1:before {content: counter(chapno, upper−roman) ". "}
En combinaison avec les pseudo−éléments :first−line et :first−letter, les pseudo−éléments :before et :after s'appliquent à la première lettre ou la première ligne, y compris le texte inséré.
Exemple(s) :
P.special:before {content: "Spécial ! "}
P.special:first−letter {color: gold}
Ceci donnera une couleur or au "S" de "Spécial ! ".