La composition de belles pages sur l’Internet est donc possible, si toutefois le rédacteur veut s’en donner la peine.
De la même manière, il est possible de contrôler les espaces1 insécables puisque le code html est l’espace insécable ! La codification html permet de saisir certains caractères qui ne seraient pas accessible directement au clavier et, surtout, de les valider quel que soit l’encodage de la page. En effet, si l’on oublie d’encoder la page avec la balise meta <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">, les caractères accentués risquent fort d’être interprétés de manière erronée par certains navigateurs et sur certaines plates-formes.
La typographie est le gros dilemme que rencontre aujourd’hui le créateur de pages destinées à la lecture via Internet. Il faut trouver un compromis entre la belle mise en pages et l’interopérabilité entre plates-formes et navigateurs. Aussi, si l’on se cantonne aux codes purement html, il devient tout à fait possible d’obtenir de très beaux résultats tout en franchissant avec succès le test du w3c2, j’en ai fait l’heureuse expérience.
Il est évident qu’apprendre par cœur tous les codes devient très vite fastidieux, mais avec un peu de pratique, la saisie de ces codes devient souvent automatique.
Une autre amélioration facilite désormais les mises en page et permet aujourd’hui d’unifier les compositions par l’application de chartes graphiques, ce sont les feuilles de style en cascade (CSS pour Cascade Style Sheet) que l’on définira dans un fichier séparé et que l’on appellera au fur et à mesure des besoins, un peu à la manière des bibliothèques de fonctions en programmation.
Certains projets libres sur Internet, tels que Wikipédia3, s’efforcent d’appliquer les règles typographiques à la rédaction de leurs articles. Cette tâche a été rendue un peu plus facile grâce justement aux codifications html standards. Mais la connaissance de toutes les règles typographiques, lorsque l’on n’est pas issu d’un des métiers de l’imprimerie, est rarement totale et il est besoin alors de faire appel à un relecteur afin de minimiser le risque de fautes impardonnables.
Outre la ponctuation bien mise à mal sur la plupart des pages, il existe des ligatures élégantes qui sont trop souvent oubliées. En particulier, le oe lié comme dans œuf, œnologie mais aussi le ae lié comme dans Ægyptus... Pour les obtenir, il suffit tout simplement de se souvenir de leur code html æ par exemple pour ae ligature...
Je vais maintenant tenter de faire un descriptif exhaustif des ponctuations et de leur utilisation, ainsi que la façon de les placer.
Il existe, dans la langue française, différents types de ponctuation. On les classe dans deux familles généralistes : les ponctuations simples et les ponctuations doubles.
La ponctuation simple se colle généralement au texte qui la précède puis est suivi d’une espace. Pour exemple, toutes les virgules et les points de cette page répondent à cette règle.
La ponctuation double, elle, est flanquée d’une espace. C’est le cas des points d’exclamation et d’interrogation, du point-virgule, du « deux points ». Généralement, on accole la ponctuation double au mot qui la précède par une espace insécable4 afin de la rendre solidaire de ce dernier mot. Mais les guillemets français sont aussi des ponctuations doubles. Dans ce cas, on doit faire suivre le guillemet ouvrant d’une espace insécable et faire précéder le guillemet fermant d’une espace insécable. Ainsi, on écrira : « guillemets » [« guillemets »]
La majorité des accents internationaux est accessible par sa codification html. Le plus simple est d’en comprendre le fonctionnement. Prenons pour exemple le É : son écriture en code html se fait É. L’ampersand est l’ouverture de code. Le E désigne la lettre à accentuer (ici, e majuscule), acute représente le type d’accent à appliquer et le point virgule ferme la codification. Nous aurons ainsi les types d’accents suivants :
Une fois bien assimilée cette codification, il est dès lors possible de reproduire toutes les lettres accentuées de l’alphabet latin. Exemples : Ÿ = Ÿ - ñ = ñ - Å = Å etc.
| Symbole | Code html | Code ASCII | Désignation | Particularités |
|---|---|---|---|---|
| . | n.c. | 145 | Point | Collé au mot le précédant, espace après. |
| , | n.c. | 147 | Virgule | Collée au mot la précédant, espace après. |
| ’ | ’ | 147 | Apostrophe | Collée aux mots l’entourant. |
| - | n.c. | 147 | Trait d’union | Collé aux mots qu’il rattache. |
| – | – | 147 | Signe moins | Attaché au nombre qui le suit par une espace insécable. |
| — | — | 147 | Tiret d’incise | Attaché à la phrase par une espace insécable. |
| Symbole | Code html | Code ASCII | Désignation | Particularités |
|---|---|---|---|---|
| ¦ | ¦ | 166 | Barre scindée | Barre verticale scindée, différente de | |
| | ­ | 173 | Césure optionnelle | Permet d’insérer une césure optionnelle. |
| ² | ² | 178 | Carré | Remplace avantageusement <sup>2</sup> : m² ≠ m2 |
| ³ | ³ | 166 | Cube | Remplace avantageusement <sup>3</sup> : m³ ≠ m3 |
| ½ | ½ | 166 | Demi | Remplace avantageusement 1/2 |
| ¼ | ¼ | 166 | Quart | Remplace avantageusement 1/4 |
| ¾ | ¾ | 166 | Trois quarts | Remplace avantageusement 3/4 |
| × | × | 166 | Signe multiplié | Bien plus joli que le vulgaire x... |
Pour terminer, voici donc quelques lignes dans lesquelles je vais tenter de respecter les règles typographiques usuelles.
L’homme s’approcha doucement et entra dans l’hacienda. Il interpela la jolie vendeuse dans sa langue natale : « ¡ Hola, señorita !
— Buenas tardes, señor. ¿ Que le puedo ofrecer ? »
— J’aurais voulu savoir si vous aviez une possibilité de m’expliquer la façon de procéder afin de rendre sécable dans des pages html le mot anticonstitutionnellement... (Pour vous amuser, réduisez donc manuellement et progressivement la page pour voir le mot « anticonstitutionnellement » se couper automatiquement en fonction de la place disponible !)