Faire des lettres initiales Partie I : Initiales en relief

Les lettres initiales, telles que les initiales en relief et les initiales en creux, ne servent pas uniquement à styliser la typographie imprimée. Sur le web, les initiales peuvent contribuer à rompre la monotonie d'une mise en page unique, où, au lieu d'avoir des caractères identiques du début à la fin, vous ajoutez une typographie de taille supérieure à votre palette. Ce sont les petites choses - ou, dans ce cas, les grandes choses, les lettres majuscules - qui peuvent impressionner vos lecteurs et les inciter à revenir encore et encore.

Lettres initiales d'hier et d'aujourd'hui

Les scribes utilisaient de grandes initiales dans les manuscrits qu'ils écrivaient à la main, certaines remontant au Ve siècle. Les initiales ornementales ont continué à être utilisées du 8e siècle au 15e siècle, lorsque les caractères mobiles ont permis la production de textes en masse. Qu'elles soient écrites ou imprimées, les lettres s'imposent d'elles-mêmes, au premier plan du texte, mais elles sont parfois accompagnées de dessins illustratifs qui les entourent, représentant des personnes, des lieux et des choses en rapport avec les mots religieux ou historiques qu'elles introduisent.

Les initiales en relief et les initiales en creux sont toujours utilisées aujourd'hui et se retrouvent dans les bulletins d'information, les magazines et les livres, ainsi que dans la typographie numérique sur le web ou dans les applications. Vous pouvez même les voir dans les publicités et les enseignes. Les initiales en relief, parfois appelées initiales collées, sont placées sur la même ligne de base que le reste du texte qui suit. Les initiales abaissées, parfois appelées "drop caps", sont placées sous la ligne de base, parfois en couche derrière le reste du corps de texte, ou avec le reste du corps de texte enroulé autour d'elles.

Ce premier article sur les lettres initiales sur le Web traite des initiales en relief, qui sont les plus faciles à définir parce qu'elles reposent sur une base commune et ne flottent généralement pas en dehors des marges - des questions qui nécessitent un réglage beaucoup plus fin et qui seront plus faciles à comprendre une fois que vous aurez compris les principes de base des initiales en relief.

Utilisation des classes

Comme pour tout ce qui se passe sur le web, il y a plus d'une façon d'écorcher un chat, ou dans ce cas, d'écorcher une lettre majuscule. Les concepteurs qui maîtrisent déjà les éléments, les sélecteurs et les classes CSS savent qu'ils peuvent créer une classe distincte qui sert de désignateur de la majuscule initiale.
Votre CSS avec un élément de paragraphe et une classe de majuscule initiale apparaîtrait comme...

p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;}
.myinitialcaps {font-size:48px; font-family: Didot;}

Et votre HTML apparaîtrait comme...

<p><span class="myinitialcaps">M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

En vous donnant...

Cela semble facile ? C'est le cas, dans une certaine mesure. Vous devrez procéder à des ajustements en fonction des lettres en relief que vous avez, car chaque lettre majuscule nécessite un crénage particulier. Une fois que vous avez établi vos choix typographiques, en l'occurrence la police Didot®pour les initiales en relief et la police Georgia®pour le corps du texte, vous devez créer des classes distinctes pour chaque initiale en relief. Dans la feuille de style CSS ci-dessous, la classe .myinitialcapsi a une marge négative sur sa droite, afin de combler l'écart entre la classe I et n.

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}

<p><span class="myinitialcaps">I</span>n this case, there&rsquo;s some extra space between the &ldquo;I&rdquo; and &ldquo;n.&rdquo;</p> <p><span class="myinitialcapsi">I</span>ncluding a new class with a negative margin pulls it closer.</p>

En fonction de la résolution de l'écran sur lequel les utilisateurs verront votre site, l'exemple ci-dessus peut donner l'impression que le I et le n se fondent l'un dans l'autre en raison de l'empattement du Isur le n. Effectuez donc des tests sur différents appareils, du mobile à la tablette en passant par le site desktop , pour voir ce que cela donne avant de finaliser votre feuille de style CSS.

Citations et autres détails

Et il n'y a pas que les lettres que vous pouvez rendre grandes. Vous pouvez créer une autre classe pour qu'un guillemet de grande taille mène la charge. Dans ce cas, la classe de guillemets n'est pas dimensionnée à 48 pixels ni à 20 pixels, comme c'est le cas pour l'initiale en relief et le corps du texte, mais plutôt à une taille intermédiaire : 30 pixels. Le guillemet a même été repoussé de 4 pixels vers le bas, pour s'aligner optiquement avec le I et équilibrer la mise en page.

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}

<p><span class="myinitialcapsq">&ldquo;</span><span class="myinitialcapsi">I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

Vous devrez faire preuve de discernement lorsque vous définirez chaque initiale dans votre backend ainsi que vos guillemets, ce qui signifie que vous devrez ajuster chaque lettre optiquement afin de vous assurer qu'elle est créninée et alignée sur l'environnement, tel que vos marges. Par exemple, la lettre T devra flotter vers la gauche, en dehors de la marge, afin que sa barre transversale s'intègre optiquement dans la mise en page. Les lettres rondes telles que C, G, O et Q devront également être traitées de la même manière. Et même si les tailles 20, 30 et 48 ont été utilisées dans ce cas, vous devrez créer des tailles en fonction des polices de caractères que vous choisissez, de votre mise en page et des tailles et résolutions d'écran sur lesquelles votre site sera consulté. N'oubliez pas : En cas de doute, testez-le.

Pseudo-éléments et pseudo-classes

Avec un pseudo-élément CSS, vous pouvez facilement créer une initiale en relief en ajoutant ::première lettreDans ce cas, il s'agit de l'ajouter à un élément de paragraphe. Utiliser :première lettre (avec deux points) si vous développez pour des navigateurs plus anciens.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}

p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

.initialb {margin-right:-0.1em;}

.initialn {margin-right:-0.15em;}

Le code HTML, dont les classes CSS tiennent compte du crénage des lettres N et B, ressemblerait à ceci...

<p>An inital letter, with the first letter being a capital letter.<br>
With a line break, the next line has no initial cap.</p>

<p><span class="initialn">n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p>

<p><span class="initialb">B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p>

Même avec l'avantage d'un pseudo-élémentPour réaliser ce qui précède, de nombreux petits détails sont entrés en ligne de compte, notamment des styles distincts pour gérer les problèmes de crénage, et l'ajout d'un remplissage pour que chaque nouveau paragraphe avec son Monotype Bernard Condensed® a des espaces supplémentaires entre les lettres. Mais cette méthode met en majuscule la première lettre de chaque nouveau paragraphe. Certains peuvent considérer cette méthode comme nécessaire, ou simplement comme le résultat du fonctionnement du code. Mais l'excès d'une bonne chose peut être mauvais, et dans ce cas, l'excès de majuscules est exagéré.

Combiner les pseudo-classes et les pseudo-éléments pour une mise en page plus intelligente

Ajout d'un :first-child La pseudo-classe permet de résoudre le problème de l'excès de majuscules, en mettant la première lettre, et uniquement la première lettre, en majuscules.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

La mise en place de HTML...

<p>An inital letter, which is also designated as a first-child, is the only letter that gets the raised initial treatment in this layout.</p>

<p>Because just the first-child gets capitalized, notice how my subsequent first letters have to be capitalized now, which is different from how the prior layout handled the typographic assignment of first-letters. Finally with a hard return, and a new paragraph started, we are back to having just the first letter of the layout capitalized, which looks more elegant than having every single letter of a new paragraph capitalized. Do you agree?</p>

La beauté de l'utilisation des pseudo-classes et de leur combinaison réside dans la simplicité et la gestion au cas par cas qu'elles offrent. Qu'en est-il des inconvénients ? Il existe tellement de types différents de pseudo-classes, et vous pouvez les combiner d'une infinité de façons, que cela peut sembler vertigineux. Par exemple, la pseudo-classe :first-child et :premier-de-type Les pseudo-classes peuvent donner les mêmes résultats. Et non seulement vous pouvez attacher le pseudo-classe à votre élément de paragraphe, mais vous pouvez également l'attacher à un élément <section> ou un <div> comme indiqué ci-dessous, avec une valeur initiale élevée dans l'élément Didot au début d'une section. Notez qu'un attribut de marge généreuse a été ajouté à droite de la majuscule. Aqui, sinon, se heurterait à la s au début de section.

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}

section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

Et avec le HTML...

<section>
<p>a section gets a raised capital letter applied to the first letter.</p>

<p>And a new paragraph…</p>
</section>

Vous vous amusez bien ? Si vous vous sentez vraiment l'âme d'un aventurier, rendez-vous sur les sites web des développeurs et recherchez d'autres méthodes que la :first-child et :premier-de-type tels que :nth-of-type ou :nth-of-child pour voir comment ces autres types de pseudo-classes pourrait être utilisé pour des initiales en relief. Vous pouvez également vous en tenir aux principes de base présentés ici et les appliquer à votre propre site. Que vous alliez au-delà des principes de base ou que vous approfondissiez les CSS, une fois que vous saurez comment utiliser les pseudo-classeset s'informer sur :first-child, :premier-de-typeet :première lettre pour votre CSS, il s'agit simplement de l'appliquer correctement à votre HTML.

La fin de l'histoire

L'utilisation de classes distinctes avec pseudo-classes Pour tenir compte des différentes lettres, ainsi que de la ponctuation telle que les guillemets, il faut procéder par essais et erreurs et calculer l'espace positif et négatif. Il faut aussi beaucoup de patience. Des lettres telles que F, G, O, P, Q, T, W, Vet Yentre autres, nécessiteront des classes de crénage distinctes en raison de l'espace négatif qui se trouve en bas à droite de ces caractères.

Mais le plaisir commence vraiment lorsque vous introduisez le site polices dans le mélange et que vous créez des initiales en relief qui sortent de l'ordinaire pour attirer l'attention de vos lecteurs et faire en sorte que votre site se démarque. Soignez les détails pour que tout se passe bien, et vos lecteurs apprécieront le panache que vous avez ajouté à votre site. Les initiales tombantes, également appelées " drop caps", feront bientôt l'objet d'une deuxième partie.

Merci à Peter Mann d'avoir identifié une erreur typographique.