Ponctuation Marginale
Lien original de référence : http://realworldstyle.com/hang_punct.html
Un des usages les plus puissants des CSS est de contrôler la typographie de votre document. Des choix de polices jusqu'aux titres, espacement de mot et des lettres, l'utilisation d'une feuille de style vous offre beaucoup plus de contrôle sur le rendu de votre page dans un navigateur, sans recourir à des bidouillages hideux qui détruisent la structure de votre page et souvent son accessibilité.
Quand Adobe fut le premier à y venir avec InDesign, une de ses caractéristiques hautement racolante était sa capacité à gérer la ponctuation marginale. Quand vous avez une ponctuation qui apparaît au début d'une ligne dans un paragraphe justifié à gauche, cela rend le document irrégulier.
La ponctuation marginale met la ponctuation en marge gauche de telle façon que le texte s'aligne verticalement.
En utilisant les CSS, nous pouvons émuler ce comportement pour la balise BLOCKQUOTE. L'idée de base est de créer une linge en retrait négatif, ou un décalage à gauche, pour la première ligne de la citation BLOCKQUOTE. Le calage à gauche dépend de la police, mais parfois 0.5em fonctionne normalement. Utiliser des unités em préserve le montant relatif de la taille de police, permettant le réajustement du texte tout en maintenant un calage à gauche adéquat.
Voilà la CSS très basique :
blockquote, blockquote p {
text-indent: -0.5em;
}
La balise au dessus blockquote p est
nécessaire si vous estampillez les documents en XHTML
strict (comme ce document... ndt : document original bien
sûr). La DTD stricte exige que les BLOCKQUOTEs ne
contiennent que des éléments de niveau (ndt block
level element), comme P, aussi j'ai ajouté le second
sélecteur pour fixer à la règle pour les
pages qui utiliseront XHTML 1/1.1 strict.
La principale chose à retenir dans votre code est de toujours utiliser des guillemets au début du texte BLOCKQUOTE :
“Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that ‘all men are created equal’....”
Usages et avertissements
Vous pouvez utiliser cette technique pour toute sorte de glyphe qui pourrait nuire à l'harmonie graphique le long du côté gauche d'un bloc de texte. Je fais cela avec les liens permanents sur mon blogue que j'ai paramétré entre une paire de double-marques anguleuses de citations »plink« (un cauchemar d'accessibilité, je suis sûr, depuis qu'ils pointent aussi dans la mauvaise direction). Et vous pouvez observer une application similaire dans la navigation en haut de cette page (ndt : voir le lien original).
Cette technique est compatible NN4, elle dégénère dans Opéra. Au lieu de décaler correctement à gauche la première ligne, Opéra applique le retrait de ligne négatif comme si c'était un retrait de ligne positif, créant ainsi un problème encore pire que s'il ignorait tout retrait de ligne. Heureusement ce sera réparé bientôt. De toutes les façons, si vous codez en XHTML strict, les contenus de BLOCKQUOTE doivent être des éléments de niveau bloc, et marquer les citations de textes avec des balises P (incluant la règle ci-dessus dans votre CSS) aidera Opéra à ne pas casser si salement.
“Ndt : Traduction en cours christophe ducamp - 1/09/02 • Merci Dolorès.
Tiens ce pourrait être l'occasion de faire un essai de blockquote avec une phrase très longue en ouvrant des guillemets à gauche et en les fermant à droite ?
Je ne comprends toujours pas la chute de cet article ?”
Valide?