Créer des lettres initiales - Partie II : Initiales tombées

Les initiales en relief et les initiales en creux peuvent toutes deux donner du punch à un site web, en offrant aux lecteurs une lettre monumentale pour commencer la lecture. Après avoir découvert les initiales en relief et leur style pour le web dans la première partie de cette série, les lecteurs devraient être prêts à relever les défis plus importants qui les attendent avec les initiales en creux, communément appelées "drop caps".

HTML et CSS, sans JavaScript

Tout au long de cette série de lettres initiales, nous nous sommes mis au défi de rendre les initiales en relief et les majuscules en utilisant uniquement HTML et CSS, sans aucun JavaScript™ pour les requêtes média sur les petits et les grands écrans ou pour ajuster dynamiquement la taille des caractères et l'interlignage. Bien que JavaScript puisse être utile, ne pas l'utiliser nous permet de déployer une solution légère avec moins de ressources, et une mise en page qui ne rencontrera pas de problèmes si l'utilisateur a désactivé JavaScript.

Comme pour les initiales en relief, il est plus facile de créer et de gérer des majuscules tombantes à l'aide d'une feuille de style CSS distincte, dans laquelle vous indiquez la police, la taille, la hauteur de ligne (en tête) et le style. Dans le cas des majuscules, il faut ajouter une propriété float. Nous utiliserons premier enfant et première lettrecomme dans la première partie de cette série, pour générer automatiquement des bouchons sans avoir à ajouter des balises span dans le code HTML.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3.3em;}

p:first-child::first-letter { font-family: Didot; font-size: 10.2em; float: left; text-transform: uppercase; margin-top:0.13em; margin-right:0.05em; margin-left:-0.03em; }

em { color:#930;}

<p>here is a conventional drop cap sized large, and sitting beneath the first line of text. The top of the <em>H</em> aligns with the top of the first line of text, but the bottom of the <em>H</em> aligns with a lower baseline.</p>

Les H agit comme un bouchon de chute en raison de la premier-enfant::première-lettre l'affectation et la majuscule. Grâce à la Didot®, il peut se tenir debout sans que ses empattements n'alourdissent la mise en page.

La création de lettrines et leur alignement dans les limites rectangulaires du texte environnant, comme illustré ci-dessus, n'est qu'une approche parmi d'autres. C'est une approche élégante, qui rappelle certaines méthodes plus traditionnelles utilisées dans la conception de documents imprimés. Mais il ne s'agit pas de conception imprimée, il s'agit de conception Web, et si les conventions sont utiles, vous pouvez les enfreindre tant que la lisibilité est maintenue pour une expérience positive de l'utilisateur.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:0.08em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>here is a drop cap created with a pair of pseudo-classes. Note how the next line of type flows underneath the letter <em>H</em>, effectively wrapping around the drop cap. The negative-left margin helps align the serif of the <em>H</em> with the paragraph. A little bit of math and testing helps us align the base of the <em>H</em> with the second line of our paragraph.</p>

<p>With a new paragraph created, we get a normal-sized <em>W</em> at the beginning of the sentence.</p>

Cette majuscule s'aligne sur la ligne de base, mais se glisse au-dessus de la première ligne de texte. Même si le H n'a pas besoin d'être mis en majuscule dans le code HTML puisque le CSS le met en majuscule, remarquez que le W doit être mis en majuscule dans le deuxième paragraphe.

Nous avons vu ce que cela donne lorsque nous cassons la ligne de chapeau de la première ligne de texte, voyons maintenant ce qui se passe si le chapeau tombe sur une ligne de base. Oui, l'alignement des capitales sur une ligne de base est considéré comme une pratique acceptable, voire traditionnelle, dans la conception d'imprimés, mais mélangeons les choses et amusons-nous un peu. Après tout, nous sommes sur le web.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; }

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; color:#066; margin-left:–0.15em; margin-top:–0.1em}

em { color:#930;}

<p>over here is a drop cap with a negative left margin hanging the drop cap outward, optically aligning the <em>O</em>. You can even change the color, to make it lighter than your body text, so it recedes into the background. Ordinarily, you&rsquo;ll only need one drop cap, oftentimes placed at the very beginning of your text section. But, if you want to have a raised cap or drop cap in a pull quote, you&rsquo;d need a separate class.</p>

Vous pouvez faire en sorte que le drop cap adhère à la grille de la ligne de base ou qu'il l'enfreigne. Mais tenez toujours compte de l'expérience de l'utilisateur et veillez à ce que le texte soit lisible. Faites des essais avec l'alignement vertical et la hauteur des lignes, ainsi qu'avec la couleur, pour que le chapeau de chute ait l'air grand sans dominer la mise en page.

Veiller aux détails

Chaque lettrage devra être traité différemment en ce qui concerne la taille, l'interligne (hauteur de ligne) et les marges, car chaque lettre a un aspect et une forme différents, et chaque police de caractères est différente. Le nombre presque illimité de sites Web Polices disponibles pour vos lettrines peut compliquer les choses. Vous devrez pousser et tirer sur l'espacement et la taille, en procédant à des ajustements jusqu'à ce que le résultat soit parfait. Et si vous choisissez une autre police de caractères, vous devrez peut-être repartir de zéro pour effectuer ces ajustements. Mais attendez, ce n'est pas tout : Même si le résultat est satisfaisant dans un navigateur, il se peut que vous rencontriez des complications dans un autre navigateur.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:–0.12em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>and here is a drop cap <em>A</em> set among body text with less leading, known as line-height in CSS. The drop cap still aligns to the second line of text, but the first line could benefit from some kerning.</p>

À première vue, la majuscule Didot est élégante, mais au fur et à mesure que vous lisez la première ligne du paragraphe - ou plus exactement, que vous butez sur le premier mot -, vous êtes de plus en plus gêné par l'espace dans le mot " Et".

Vous pouvez utiliser des marges négatives pour supprimer l'espace entre les lettres et combler les lacunes. Notez la différence entre la propriété margin-right de l'exemple précédent et celle de l'exemple ci-dessous, ainsi que la mise en page qui en résulte.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; margin-top:–0.25em; margin-left:–0.01em; margin-right:–0.1em;}

em { color:#930;}

<p>and here is a drop cap <em>A</em> that sits ever so gently below the baseline, and it has better kerning between the <em>A</em> and the <em>nd</em> that follows. The sacrifice? We had to make the drop cap smaller and perform some calculations to get the kerning just right.</p>

Avec une propriété de marge droite négative, l'And se referme et se lit mieux, mais nous avons dû laisser flotter le capuchon de chute entre les lignes de base.

Même si le résultat est satisfaisant dans le navigateur Firefox™, comme le montre l'exemple précédent, le navigateur Chrome™ de Google - illustré ici - rendra un And froissé qui a l'air terrible en raison de la propriété margin-right négative.

Nous pourrions faire plusieurs choses pour tenir compte des différences de rendu entre les navigateurs. Nous pourrions passer à une taille absolue, en utilisant des pixels au lieu d'ems, pour voir si nous pouvons mieux gérer l'espacement, et de manière plus précise. Nous pourrions également choisir une autre police de caractères pour voir quels résultats nous obtiendrons. Nous en sommes là avec les ems, alors prenons le chemin de la moindre résistance, et considérons un caractère qui a moins d'angularité puisque l'espacement inter-lettres est le problème que nous voulons résoudre. Nous abandonnerons la famille Didot au profit d'une police plus anguleuse, comme la police Bauhaus® du CCI.

body { font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: "Bauhaus W01 Heavy"; font-size: 9em; float: left; text-transform: uppercase; margin-top:–0.14em; margin-right:0.01em; margin-left:–0.05em; }

em { color:#930;}

<p>and here the drop cap is set in the ITC Bauhaus typeface, which has a more rectangular <em>A</em> that aligns with its surrounding text cleanly.</p>

Si une police de caractères ne fonctionne pas pour votre chapeau, essayez-en une autre. Le caractère fort et gras de l'ITC Bauhaus donne une autre saveur aux choses, et il s'harmonise mieux avec son environnement ici dans le navigateur Firefox.

Le même code HTML et CSS est rendu de manière légèrement différente dans Chrome. Oui, nous obtenons un meilleur espacement entre les lettres A et nd, mais la hauteur des lignes et les marges sont rendues différemment.

Travaux en cours

Les exemples présentés ici et dans la première partie reposent tous purement sur HTML et CSS, sans JavaScript. Bien que l'utilisation de JavaScript pour ajuster les détails de manière dynamique puisse s'avérer utile, il se peut qu'avec le temps, la typographie sur le web offre une meilleure gestion des lettres initiales. Si les nouvelles normes HTML et CSS sont mises en œuvre et deviennent utilisables dans les navigateurs Web, elles pourraient permettre de désigner plus facilement les initiales en relief et les majuscules sans pseudo-classes et sans JavaScript en arrière-plan. Mais même dans ce cas, il est fort probable que des tests rigoureux devront être effectués, d'un navigateur à l'autre ( Suivante).

Dans la troisième partie de cette série de lettres initiales, nous nous pencherons sur les tests entre navigateurs à l'aide de HTML et de CSS, sur le dimensionnement avec des pixels et sur le dépannage des bizarreries des navigateurs à l'aide de hauteur de ligne et rembourrage. Nous approfondirons également le site Web Polices et ajouterons du style aux mises en page avec des scripts et des swashs, ainsi qu'avec les fameux de grande taille lettre initiale. Expérimenter des polices de caractères jusqu'à ce que vous trouviez celle qui convient à votre chapeau, tout en veillant à ce qu'elle soit cohérente d'un navigateur à l'autre, fait partie du plaisir. Il en va de même pour la recherche de la bonne adresse police. Appréciez le processus.