Entités HTML et typographie française

tags:

La typographie française a des règles qui ne sont pas toujours pratiques à mettre en œuvre sur un site web.

Espaces insécables

Rares sont les CMS qui font pour vous des espaces insécables avant les signes doubles de ponctuation. Plume CMS a annoncé que cela serait fait un de ces jours, chic! NB : On dit une espace insécable (féminin), en bonne typographie.

Avant un signe double de ponctuation, il faut une espace et bien sûr il faudra que cette espace soit insécable (non breaking, en anglais) pour que le point d'exclamation ! par exemple, ne se retrouve pas tout seul en début de ligne.

Pour faire une espace insécable, on utilise une entité HTML, un symbole propre à ce langage, avec des lettres ou avec des chiffres. Les entités numériques ont l'inconvénient d'être difficile à mémoriser mais elles sont plus universelles que les lettres qui n'existent pas dans certaines langues comme le japonais.

Entité pour l'espace insécable

C'est   (sorte d'abréviation de non breaking space) et l'entité numérique est  .

Cette entité peut être utilisée chaque fois que vous voulez être sûrs que deux mots ne seront pas séparés par un retour à la ligne.

Mais les espaces insécables avant les signes doubles de ponctuation sont moins grandes que les espaces entre les mots et il existe une entité pour l'espace fine.

Entité pour l'espace fine

C'est   (sorte d'abréviation de «thin space») et l'entité numérique est  .

Mais cette entité ne fait pas une espace insécable.

Entité pour l'espace fine insécable

C'est tout simple, vous ajoutez cette entité numérique devant vos signes doubles de ponctuation : 

Voici un exemple :

Elle dit : « Vive GNU/Linux !»

Le point d'exclamation ne sera jamais séparé du mot le précédant même en cas de passage à la ligne.

Cette entité est jolie et pratique, et elle passe bien sur Firefox. Mais pas du tout sur un navigateur textuel comme Links2 ou Elinks. Sur Lynx, l'espace disparaît.

Donc, on se demande quoi faire. Si l'espace disparaît, ce n'est pas encore trop grave mais si l'entité est rendue comme une suite de caractère apparaissant à l'écran ou lu par le synthétiseur vocal, là on est dans de beaux draps, nous qui voudrions faire un site accessible aux navigateurs textuels.

En ce sens l'entité pour l'espace insécable   et son équivalent numérique est   ont de beaux jours devant eux (les beaux jours, c'est mieux que les beaux draps, à tout prendre).

Mais cette espace fine insécable est si ravissante à l'affichage que cela fait de la peine de devoir l'abandonner, à peine l'a-t-on découverte.

La différence entre l'espace fine insécable et l'espace insécable est minime mais je la vois. La voyez-vous ?

  1. « œ »
  2. « œ » — espace fine insécable
  3. Mon œil !
  4. Mon œil ! — espace fine insécable

Guillemets à la française

Ah, ces fichus mais élégants guillemets à la française ! Il n'y a guère que le CMS SPIP qui vous offre un raccourci mais le clavier Dvorak-bépo a ces guillemets. Je les tape donc directement, comme dans l'exemple ci-dessus.

Sinon, il faut passer par les entités HTML ou par les CSS, les CSS étant bien plus commodes mais vous l'aurez deviné, Internet Explorer ne reconnaît pas cet élément des feuilles de style. Dans le fond peu importe, M$ appartient au siècle dernier et les webmestres ne devraient plus perdre de temps à travailler pour l'affichage des sites web sur IE.

Et quelle barbe de taper tout ça à chaque fois ! Il y a une solution : l'extension QuickNote pour Firefox ou SeaMonkey.

Extension Quicknote pour Firefox

Tapez ou copiez tous les codes qu'il vous faut dans un onglet de Quicknote que vous réservez à cet usage (vous avez droit à quatre onglets), un par ligne, en sautant une ligne par souci de clarté et il ne vous reste plus qu'à faire du copier-coller. Vous pouvez agrandir la taille des caractères pour y voir plus clair et ne pas vous tromper de ligne.

Mon œil ! caractère spécial

Eh bien, même sous SPIP (au moins jusqu'à la version 1.9), il va falloir taper du code HTML pour avoir un vrai caractère « œ » qui passe à la validation du W3C. Le raccourci de SPIP vous fait un truc invalide.

Même s'il existe une entité HTML pour faire un joli « œ », le clavier Dvorak-bépo et même l'Azerty sous GNU/Linux le font très bien avec les touches ALT GR-O.

Commentaires

Le plugin "Couteau Suisse" pour SPIP propose plusieurs options de remplacement de caractères ce qui permet de traiter les guillemets typographiques à la française et même le œ.

En plus des mécanismes automatiques prévus, il existe aussi un raccourci typographique pour l'espace insécable : ~ et même le tiret cadratin : --

Alors bien sur il ne gère pas le tiret semi-cadratin ni le demi-espace que l'on doit utiliser pour les nombres, mais après il faut déjà trouver des contributeurs qui savent comment les utiliser.