Using The Best Blockquote Available

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.

Eruditi appellantur aut ne deterruisset alios a studiis.

La combinaison des deux donne un style sympa.

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.

Eruditi appellantur aut ne deterruisset alios a studiis.

Une écriture cursive pas si cursive.

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.

Le site CSS Tricks affiche les blocs de citation de manière bien stylisée.

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é.

Eruditi appellantur aut ne deterruisset alios a studiis.

Afficher une belle écriture sur un site Web c'est possible.

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.

L'affichage du bloc de texte n'est pas trop mal, mais c'est perfectible.

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.

Les marges du texte doivent être resserrées.

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é :

Pas mal non?


Commentaires

1. Commentaire de mutuelle et maternité le vendredi 27 avril 2012

Salut !
Merci du passage sur mon article et de votre message,
votre article est extrèmement bien fait également,
A bientôt !

Audrey

2. Commentaire de université mutuelles le mercredi 2 mai 2012

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

3. Commentaire de www.hugavenue.com le dimanche 29 décembre 2013

Charmant message. j’aime la forme d'écriture: pur ou joyeux. Avec l'impatience de dévorer les prochains!


About the Author

Ted Marklor est un web designer, un web developer et un génie de la nature. Transcendant le web depuis bientôt 15 ans, Ted est une source d’inspiration et de conseil pour toute une génération de jeunes programmeurs. Le Web 2.0, c’est lui. Dans la vie, il aime aussi faire des avions en papier, s’inventer des pseudonymes et une vie de winner, et surtout parler de lui à la troisième personne. Ça se fait en ce moment sur les blogs…


Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.