Using The Best Blockquote Available
samedi 14 janvier 2012
Il y a quelques années, Dan Cederholm a écrit un article pour inciter les développeurs Web à utiliser la meilleure version possible du symbole & (l’esperluette pour les francophones, et l’ampersand pour les anglophones).
Dans le même ordre d’idée, je me suis demandé s’il n’était pas possible d’essayer d’améliorer un élément aussi utile qu’important : le blockquote. Le bloc de citation permet d’ajouter du texte extérieur au document ce qui en fait un élément courant du lexique HTML. Par défaut, les blockquotes ont un style très simple : un simple espacement sur la gauche permet de signaler que la zone contient du le texte cité. Ce n’est pas terrible terrible quoi…
En parcourant le Web, je me suis rendu compte que la grande majorité des sites Internet modifient les styles CSS pour améliorer ce composant et le rendre plus lisible, plus compréhensible.
Parmi les modifications que l’on rencontre le plus :
La police
Le texte est souvent mis en italique, dans une police avec empâtements (c'est-à-dire dite serif). Cette mise en forme revient quasiment systématiquement quand les blocs de citations sont stylisés.
L’italique apporte une touche manuscrite qui confirme l’idée de citation. La police la plus souvent utilisée est une famille de polices serif.
font-family: Georgia, "Times New Roman", Times, serif;
Il est très rare que les designers utilisent la famille cursive. En effet, par défaut la police utilisée est très moche et ne corresponds par vraiment à l’idée que l’on peut se faire d’une écrite manuscrite.
Le style de la zone
Le plus souvent, la zone se détache visuellement par une bordure ou un background. Parfois, il y a aussi un liseret. Dans tous les cas, la zone est espacée du reste du document.
Une icône
Une petite icône de guillemets en haut à droite de la zone, et parfois une autre en bas à droite pour fermer. Le plus souvent, il s’agit de guillemets style anglo-saxon (c'est-à-dire " plutôt que «) ou bien d’une petite bulle de discutions (comme dans les BD).
Une légende
Dans le cas des forums de discutions ou des réseaux sociaux, un texte de légende indique quel est l’auteur du texte cité, et la date à lequel il à été écrit. Parfois la source d’où est extraite la citation complète cette légende.
Une nouvelle donne
Depuis quelques années, les percées dans le domaine du hack CSS et dans l’optimisation du code pour les différents navigateurs permettent d’améliorer encore la qualité du rendu visuel des pages Web. Ainsi, il n’est plus impossible aujourd’hui d’utiliser des polices exotiques. Et il est tout a fait faisable d’effectuer des rotations sur des éléments HTML en utilisant les CSS 3.
Voyons ce qui peut nous servir :
Les Google Web Fonts
Google met en ligne un service gratuit qui permet de télécharger des polices d’écritures compatibles avec l’ensemble des navigateurs. Simplement en rajoutant une balise <link>, il est désormais possible d’utiliser une très grande collection de polices sur un site Web.
La liste est longue, mais il est possible de filtrer par type de famille. Je me suis principalement intéressé aux polices de la famille cursive, car c’est un gout personnel : je trouve les écrits manuscrits très agréables à lire, et certaines écritures forment de véritables dessins visuellement très complexes. Le problème, c’est la lisibilité. Déjà, toutes les polices de Google Web Font n'ont pas un rendu très soigné sur les écrans. Certaines ne semblent pas bénéficier d'un traitement anti-aliasing. Ensuite, les polices manuscrites sont souvent plus irrégulières, ce qui diminue la lisibilité.
Après de nombreux essais, mon choix s’est arrêté sur la police Nothing You Could Do de Kimberly Geswein. Je trouve la lisibilité acceptable (pour peu que l'on augmente un peu la taille du corps) et le tracé des lettres sympa.
Pour charger la police, il suffit d'ajouter le code suivant dans la partie <head> du fichier HTML :
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
Ensuite, le code CSS suivant modifie les styles des blocs de citations :
blockquote { font-family: 'Nothing You Could Do', Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: 1.1333em; text-indent: 50px; }
Il est possible que l'utilisation de la police par Google Web Font ne fonctionne pas sur le navigateur, ou bien que la transmission échoue. Dans ce cas, c'est la police Georgia qui est utilisée. On parle ici de graceful degradation : faire en sorte que l'affichage se fasse au mieux même si toutes les bonnes conditions d'utilisation ne sont pas remplies.
Pour améliorer encore l'esthétique de l'affichage, j'ai rajouté une petite indentation de 50 pixels : c'est un goût personnel.
Les CSS 3
La version 3 des scripts CSS permet de réaliser des effets de mise en forme complexes sur les éléments de la page HTML. Ici, j'aimerais rajouter deux petites icônes pour représenter les guillemets d'ouverture et de fermeture de la citation. Mais grâce aux CSS 3, il est possible de faire cela sans modifier le code HTML, c'est à dire sans rajouter ni image ni balise.
blockquote:before, blockquote:after { content: " "; display: block; width: 23px; height: 18px; background: url(blockquote.png); }
Je compte afficher cette image à chaque
extrémité de la zone. Pour cela, j'utilise les pseudo-classes :before
et :after
qui
permettent de rajouter du contenu avant et après la zone. A ce stade, il y a donc deux images : en haut
à gauche et en bas à gauche. De plus, ces deux images sont identiques.
L'objectif suivant est :
- d'aligner la deuxième icône à droite
- de lui faire faire une rotation de 180°
Grâce aux CSS encore une fois, tout cela est possible :
blockquote:after { float: right; -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) }
Premièrement on aligne l'icône à droite. Ensuite, on applique la rotation. On remarque ici qu'il faut 4 lignes de code et 3 instructions propriétaires pour y parvenir : c'est la grande joie de CSS 3 que de multiplier des préfixes de vendeur. Bref, ça marche, c'est déjà ça. Pour les très anciens navigateurs comme IE 6, la librairie CSS3 Pie permet de faire en sorte que ça marche.
Alors, ça donne quoi ?
A ce stade, le texte est affiché avec la nouvelle police. Les deux icônes de guillemets s'affichent de chaque côté de la zone.
Cependant, il y a encore certains problèmes. Premièrement, le texte a besoin d'un peu de marges pour respirer un peu. Ensuite, le signe & (l'esperluette) est plutôt moche avec cette police.
Le code CSS utilisé à ce stade pour la modification des marges est détaillé à la fin de l'article.
La petite touche finale
L’article de Drew McLellan sur l’utilisation de
la propriété CSS @unicode-range
ouvre une voie très intéressante pour customiser des jeux
de caractères particuliers. Cette astucieuse utilisation de cette propriété CSS permet dans notre cas
de figure de perfectionner l'affichage de l’esperluette.
Voici le code finalisé :
/* Creating Custom Font Stacks with Unicode-Range http://24ways.org/2011/unicode-range */ @font-face { font-family: 'Ampersand'; src: local('Baskerville'), local('Palatino'), local('Book Antiqua'); unicode-range: U+26; } @font-face { font-family: 'Ampersand'; src: local('Arial'); unicode-range: U+270C; } /* Using The Best Blockquote Available http://blog.evolya.fr/ */ blockquote { font-family: 'Ampersand', 'Nothing You Could Do', Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: 1.1333em; padding: 0 20px; text-indent: 50px; } blockquote:before, blockquote:after { content: " "; display: block; width: 23px; height: 18px; background: url(blockquote.png); margin: 0 0 5px -20px; } blockquote:after { float: right; margin: 5px -20px 0 0; -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) }
Et l'affichage finalisé :
Commentaires
Salut !
Merci du passage sur mon article et de votre message,
votre article est extrèmement bien fait également,
A bientôt !
Audrey
Coucou tout le monde, l'article m'a bien servis je vous en remercie.
Le mien sera bientôt en ligne et j'espère qu'il sera aussi jolie que le votre !
Bisous
Andrea
Charmant message. j’aime la forme d'écriture: pur ou joyeux. Avec l'impatience de dévorer les prochains!