Caractères spéciaux

Des pages web visibles par tous

Les webmestres qui travaillent dans le code source le savent bien: on n'écrit pas dans le code source de la même manière qu'on écrit dans un éditeur HTML WYSIWYG (ex: Dreamweaver). En plus de la mise en forme, il faut convertir les caractères spéciaux et accentués pour que vos pages web soient interprétées et affichées correctement par tous les navigateurs.

Quels sont les caractères à coder ?

On sait que les 128 premiers caractères de base forme l'ASCII codés de 0 à 127. Ils ont été définis de façon universelle. Il n'est donc pas nécessaire des les coder puisqu'ils s'afficheront correctement partout.

Chaque langue possède ses propres caractères spéciaux; le japonais, l'arabe, le russe, le français... Pour les afficher correctement, le navigateur repère le jeu de caractère dans le code source HTML. La langue française utilise le jeu de caractère latin-1 appelé aussi ISO-8859-1. Dans ce type de codage, les caractères spéciaux doivent être remplacés par leur entité nomée ou numérique (é - é). Mais ce n'est pas l'idéal.

Le jeu de caractère UFT-8 reconnaît plus de 65.000 caractères. Ce qui est largement suffisant pour regrouper tous les caractères de toutes les langues à ce jour et même d'ajouter des caractères particuliers sans rapport avec les caractéristiques linguistiques. Dans ce cas, il n'y a aucune raison de coder les caractères spéciaux dans son code source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Votre titre</title>
  <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
</head>
<body>…Contenu…</body>
</html>

Ascii, Ansi, Unicode... kezako ?

ASCII

L'American Standard Code for Information Interchange (ASCII) - prononcé [asky]- est le permier jeu de caractère apparu. Il était codé sur 8 bits (256 possibilités) mais comportait un bit de parité. Par conséquent, seulement 7 bits pouvaient contenir de l'information (128 possibilités). Disposer de 128 caractères pour échanger de l'information est certainement suffisant en anglais mais très insuffisant pour couvrir les besoins des autres langues du monde occidental.

ASCII étendu

On décida alors d'étendre ce jeu de caractères en remplacant le bit de parité par un bit utilisable. Les 128 premiers caractères sont donc commun à tous les jeux de caractères, les 128 caractères suivant sont destinés aux signes spécifiques à une langue. Chaque nouveau jeu de caractère a été normalisé par l'Organisation internationale de normalisation (ISO). Ainsi est né l'ISO-8859-1 ou ISO-Latin1 qui correspond au jeu de caractère de la langue française.

Petite anecdote, l'ISO-8859-15 est un ISO-8859-1 modifié pour prendre en compte des caractères « oubliés » comme le sigle € ou la ligature œ.

ANSI (Windows-1252)

L'American National Standard Institute (ANSI) est un organisme de normalisation américain, constitué de producteurs, de consommateurs et de groupes d'intérêt général. Il est le représentant américain à l'ISO. De nouveau, les 128 premiers caractères sont ceux du code ASCII alors que les 128 suivants sont différents de l'ASCII étendu. Windows utilise ce standard.

Unicode

Du premier jeu de caractère à 128 combinaisons, on est passé à 256 en espérant couvrir une large gamme de caractères. Cependant, cela reste insuffisant pour certaines langues comme le japonais. Impossible donc pour un amoureux du pays du soleil levant de faire une page web avec un lexique franco-japonais.

Pour palier à ce besoin, l'Unicode Transformation Format (UFT-8) a vu le jour. Codé sur 24 bits, il accèpte plus de 16 millions de caractères. Le consortium Unicode est chargé de la standardisation des caractères, de sorte que tous les caractères de chaque langue puissent réellement être représentés et soient définis par un code unique qui remplacerait les tables ASCII ou ANSI.

Plus d'infos : Unicode

Comment insérer un caractère spécial dans une page web ?

1. Via le code source

Le tableau des caractères regroupe un bon nombre de caractères. Pour les utiliser dans une page web, vous avez trois possibilités:

  • par son entité nommée (&laquo;)
  • par son entité numérique décimale (&#171;)
  • par son entité numérique hexadécimale (&#x00AB;)

La méthode nominale sont des mots mnémotechniques qui s'emploient entre une esperluette (&) initiale et un point-virgule (;) final. Dans &laquo; il s'agit des premières lettres de Left Angle QUOte qui correspond au guillemet gauche.

La méthode numérique décimale reprend le numéro Unicode (jusqu'à 65 000) précédé d'une esperluette et du dièse (&#) et terminé par un point-virgule (;). La méthode numérique hexadécimale débute par une esperluette, un dièse et un x (minuscule ou majuscule) et termine par un point-virgule (;).

Les entités ne sont pas toujours reconnues par les différents navigateurs, ou bien elles ne sont pas toujours correctement rendues (voir le tableau). D'une manière générale, il est plus prudent d'utiliser le méthode numérique que la méthode nommée.

N'oubliez pas non plus que toutes les polices de caractères ne disposent pas des milliers de caractères spéciaux. Si la police choisie ne compte pas ce caractère, le navigateur testera avec la police par défaut ainsi que les autres fontes installées par défaut. Si rien n'est trouvé alors un blanc ou un point d'interrogation apparaîtra selon le navigateur utilisé.

Attention Attention
Les appels d'entité de caractère fonctionnent indépendamment de l'encodage utilisé. Que votre page soit enregistrée suivant l'ISO-8859-1 ou l'UFT-8 cela n'a aucune incidence sur l'affichage du caractère. Tout dépend des polices installées sur votre machine. Sur le site d'Alan Wood vous pouvez voir en haut de page quelle fonte est nécessaire pour les caractères Unicode. Voir les spécifications W3C.

2. Via un logiciel de création de pages web

Si le caractère est accessible via le clavier rien de plus simple; tapez-le et votre logiciel d'édition web indiquera son équivalent HTML dans le code. Si ce caractère est absent du clavier, trouvez la rubrique pour l'ajouter. Pour Dreamweaver MX, affichez la fenêtre "Insertion" (CTRL + F2) - Texte - appuyez sur la petite flèche de la dernière icône, puis "autres caractères".

3. Via Windows

Pour ceux qui sont dans cet environnement, vous pouvez ajouter manuellement le code numérique du caractère. Imaginons que je tape mes pages dans Bloc-notes. Si je maintiens la touche ALT enfoncée et que je tape 0171 (attention à ne pas oublier le 0 avant 171) sur le pavé numérique de droite, j'obtiendrais un guillemet français ouvrant.

Pour avoir un aperçu de tous ces caractères: Démarrer - Programmes - Accessoires - Outils système - Table des caractères. En fonction de la police le tableau sera ± complèt.

Tableau des caractères spéciaux

Si le caractère sélectionné n'a pas de code clavier, il faut regarder son code en bas à gauche (U+00AB) qui correspond à sa position en hexadécimal dans le tableau Unicode. Sur l'exemple 00AB est le code hexadécimal à insérer dans la source d'un document HTML sous forme de &#x00ab; (n'oubliez pas le x).

Comment connaître le code d'un caractère sur une page web ?

Petit exercice, quelle est la valeur numérique de la fraction ⅔ ? Inutile d'aller voir le code source puisque votre navigateur interprète les entités de caractère. Une solution peu pratique c'est de faire un copier-coller dans un logiciel d'édition de page web (WebExpert, Dreamweaver) qui affiche alors l'entité numérique du caractère.

L'autre solution, bien plus facile, est d'aller sur le site Hapax et de coller le caractère dans le champs « Caractère » puis de cliquer en dehors du champs. Il fournit alors toutes les informations utiles.

 

Mis à jour le 8 mai 2005.
haut