2.3.4Entrez l’alinéa ou centrez un bloc de vers
“Les vers sont généralement composés avec une justification à gauche, et la citation de vers ne devrait pas se départir de cette mise en forme. Mais pour distinguer des citations de vers de la prose associée, elles devraient être rentrées ou centrées sur la plus longue ligne.”
Lorsque l’on met en page des vers, sur le web ou ailleurs, la priorité est de ne pas les priver de leur “forme choisie”, notamment en ce qui concerne les espacements et la structure visuelle (car dans beaucoup de travaux de poésie, c’est aussi important que le choix des mots eux-mêmes). L’élément pre est donc le plus apte à accueillir les vers.
<blockquote class="verse">
<pre>God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.</pre>
</blockquote>
Dans sa forme par défaut, l’élément pre est rendu en utilisant une fonte monospace, donc il faudra choisir une fonte plus adaptée. Appliquer un héritage au font-family sera un bon début :
.verse pre {
font-family: inherit;
}
La façon logique de centrer les vers par rapport à la plus grande ligne serait tout simplement de spécifier width:auto et margin:0 auto. Malheureusement, à cause de la façon dont les navigateurs affichent les éléments pré-formatés pre, il sera toujours assumé que l’élément comprend des lignes de pleine largeur, et aucun centrage ne se fera. Il existe cependant une astuce permettant de s’en sortir, en demandant à l’élément pre de s’afficher en tant que tableau, comme suit :
.verse pre {
font-family: inherit;
display: table;
width: auto;
margin: 0 auto;
}
La règle précédente permettra d’obtenir le résultat désiré dans Firefox, Safari et Opera 9. Par contre, margin: 0 auto ne sera pas compris par Internet Explorer 6 ou 7 si une largeur spécifique n’est pas déclarée. Pour ce faire, il faut inclure un élément span dans l’élément pre :
<blockquote class="verse">
<pre><span>God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.</span></pre>
</blockquote>
Ce span peut alors être centré par Internet Explorer en appliquant un text-align: center à l’élément pre, et en annulant cette règle dans le span :
.verse pre {
text-align: center;
}
.verse pre span {
text-align: left;
}
Tout comme les autres navigateurs, Internet Explorer considère que le contenu des élément pré-formatés a des lignes de pleine largeur ; pour contrer cela, le span peut être déclaré comme ayant un display: inline-block. Cela a pour conséquence d’annuler le formatage des espaces dans Internet Explorer, donc nous devons redéfinir white-space: pre sur le span. Ce qui nous donne :
.verse pre {
text-align: center;
}
.verse pre span {
text-align: left;
display: inline-block;
white-space: pre;
}
La ligne display: inline-block dans la règle précédente a pour conséquence un mauvais rendu du contenu dans les navigateurs Gecko comme Firefox ou Camino. Fort heureusement, ces règles ne sont nécessaires qu’à Internet Explorer, donc nous pouvons les inclure dans une autre feuille de style dont le lien sera compris dans un commentaire conditionnel (voir Quirksmode pour plus d’informations, en anglais) :
<!-[if lte IE 7]>
<link rel="stylesheet" type="text/css"
href="ie-lte-7.css" />
<![endif]->