Caractère répétitif en début de chaque ligne.

**phil7578** · 28/05/2010, 09h53

Bonjour,

Je travaille sur la mise en forme d'anciens romans. Parfois, je trouve une lettre/missive/correspondance, au milieu du texte principal. Dans ce cas, les anciens typographes faisaient précéder chaque ligne par un guillemet français ouvrant.

Existe-t-il une méthode simple en CSS qui permette d'avoir le même effet? Je voudrais créer une classe de paragraphe qui crée une marge à gauche et y place le caractère de mon choix.

Merci d'avance de votre aide.

**Erwan31** · 28/05/2010, 22h10

Bonsoir,
en terme d'accessibilité, il vaut mieux insérer le caractère directement dans le HTML (pour qu'il soit encore présent si CSS est désactivé, sans un navigateur texte ou si le texte est lu par une synthèse vocale).

Mais si ça représente trop de contrainte et si leur présence n'est pas nécessaire à la compréhension du contenu, tu as toujours la solution du contenu généré :

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.taclass:before {content:"<"} 
.taclass:after {content:">"}
<p class="taclass">...</p>

Mais attention ça ne fonctionnera pas sous IE6 et 7 sauf si tu utilises un script (peut poser quelques problèmes...) comme celui de Dean Edwards : IE9.JS.

**phil7578** · 29/05/2010, 07h49

Bonsoir et merci de la réponse.

J'ai bien sûr essayé cette méthode, mais elle ne fonctionne que pour le début et la fin de chaque paragraphe, alors que je cherche une astuce pour chaque *ligne* de ce paragraphe (indépendamment de la portabilité du code, qui est accessoire à mes yeux).

La seule solution qui fonctionne sûrement est de composer les lignes de manière statique (et je me prive de la souplesse de CSS).

J'ai également pensé à créer une table de deux colonnes, avec le texte dans la colonne de droite. La colonne de gauche aurait une largeur d'un caractère seulement, de même police et de même taille que pour la colonne de droite, et répéterait le guillemet ouvrant. Mais il faudrait que le contenu de cette colonne soit généré dynamiquement, jusqu'à atteindre la hauteur de la colonne de droite.

Une autre possibilité serait une bordure dont je spécifierais le caractère (seules les lignes, de trait et d'épaisseur variables peuvent être spécifiés)

J'en arrive doucement à la conclusion que mon problème n'a pas de solution en CSS.