Du fait de la jeunesse du média et d’un manque d’information, la ponctuation sur le Web est souvent malmenée. Vous trouverez dans le tableau suivant les règles qu’il faut employer et les solutions que j’utilise pour respecter au mieux ces dernières (tout en assurant une compatibilité navigateur importante).
| Signes | Espace avant | Espace après | Code HTML |
|---|---|---|---|
| point | aucun | espace (sauf en fin de paragraphe) | . |
| point-virgule | espace fine insécable | espace | ; voire<span class="fine"> </span>; |
| deux-points | espace insécable | espace | : |
| point d’exclamation | espace fine insécable | espace | ! voire<span class="fine"> </span>!; |
| point d’interrogation | espace fine insécable | espace | ? voire<span class="fine"> </span>?; |
| virgule | aucun | un espace | , |
| trait d’union | aucun | pas d’espace | - |
| tiret | espace insécable | espace insécable | – |
| tiret long | espace insécable | espace insécable | — |
| guillemet ouvrant | espace | espace insécable | « |
| guillemet fermant | espace insécable | espace | » |
| barre de fraction | espace fine insécable | espace fine insécable | / voire<span class="fine"> </span>/<span class="fine"> </span> |
| apostrophe | aucun | pas d’espace | ’ |
| points de suspension | aucun | un espace | … |
| parenthèse ouvrante | espace | pas d’espace | ( |
| parenthèse fermante | aucun | espace | ) |
| crochet ouvrante | espace | pas d’espace | [ |
| crochet fermante | aucun | espace | ] |
Notez que :
- on associera si besoin dans notre feuille de style cette règle :
.fine{font-size:30%} - les espaces insécables différent des espaces normaux car ils ne peuvent pas être séparés des mots qu’ils séparent par un éventuel retour à la ligne ;
- l’apostrophe et le trait d’union, ne sont pas des ponctuations mais des signes grammaticaux ;
- l’encodage des entités ne pose aucun problème dans la balise
<title>et l’attributaltpar exemple ; - l’apostrophe français s’écrit
’et non'; - les guillemets français s’écrivent
« »et non" "; - les points de suspension s’écrivent
…et non...; - les différences entre les tirets et le trait d’union pourra faire l’objet d’un petit billet ;
- tout comme il est prévu également un billet sur les signes diacritiques, les symboles typographiques, mathématiques et monétaires.
Et attention à ne pas croire que ces règles relèvent du détail, l’affichage est est parfois fortement impacté. Katsoura écrivait récemment un billet à ce sujet.
On trouve d’ailleurs de plus en plus de CMS ou d’outils qui respectent automatiquement ces règles (SPIP, Dotclear, Markdown).
8 commentaires ↓
Très interessant !
Mais pourquoi ne pas utiliser
 à la place de<span class="fine"> </span>?Le support des navigateurs tout bêtement. Voir cet article pour plus de détails.
« les règles qu’il fait employer » => faUt ? Certes il y a des règles mais si tu consultes plusieurs ouvrages tu remarqueras que les règles ne sont pas identiques partout. De même, à l’époque du caractère typographique, il y avait des variantes selon les maisons d’imprimerie. Outre cette difficulté d’une référence, il n’est pas toujours souhaitable de les respecter. Le plus important est de garder une certaine homogénéité dans son travail.
Très étonné par ton avis katsoura, d’autant que tu es bien plus au fait que moi sur ce sujet.
Ces « règles » ne sont-elles pas là avant tout pour permettre une certaine facilité de lecture ? J’imagine qu’elles ont étés pensées et réfléchies dans ce sens.
Comme dans tous les procédés complexes, il vient un moment où il faut mettre un peu d’ordre sinon ça devient le bordel. Si tu prends l’exemple de la caroline, Charlemagne avait confié à un moine le privilège d’imposer une seule et unique graphie des lettres dans tous le royaume afin d’uniformiser les formes. Les règles d’orthotypographie sont également passées par une réflexion pour adopter un seul et unique code (ce fameux code typographique). De cette manière, ça permet d’avoir une référence, un guide pour les néophytes. Après avoir pris connaissance du code, libre à chacun d’adapter selon ses affinités. Tout le problème réside alors dans la justification. Si tu contournes une « règle », tu dois pouvoir défendre ton point de vue en connaissant la norme.
Reste à savoir si beaucoup sont au courant de ces règles et là je crois qu’une grosse majorité ignore tout. D’où l’importance de les faire connaître comme tu le fais
On en apprend tous les jours.
1/ Je pensais qu’on disait UN espace, mais visiblement quand il s’agit de typographie on dit UNE espace.
2/ Je ne connaissais pas la différence entre une espace « normale » et une espace « fine ».
3/ En parcourant Wikipédia, j’ai également appris qu’on pouvait distinguer espace fine sécable et espace fine insécable.
Merci pour ce billet, c’était vraiment très intéressant !
Je ne sais pas si il fait référence en la matière mais pour ma part, je pensais suivre les recommandations du lexique des règles typographiques en usage à l’imprimerie nationale.
Ma référence concernant les différents tirets, le trait-d’union, le signe moins est et reste http://www.tutoweb.be/typographie/tiret/.
Laisser un commentaire