Le problème d’encodage : Des accents en points d’intérrogation

Le problème

Samuel ROZE
sroze
3 min readJul 21, 2008

--

Jamais il vous ai arriver pendant la création d’un script (surtout avec des langages dynamiques) d’avoir à la place des accents normaux (é, è, à, ô…) des points d’intérogations :

O? ?aient les p?uches ?

C’est simpa comme texte… Parce qu’en plus, il vous bouffe la lettre d’après — quand il y en a une. Ce cas de figure apparaît quand la page est encodée en ISO-8859–1 mais que dans les entêtes ou dans la balise méta (nous allons voir ça plus bas), il est indiqué que la page est en UTF-8). Mais rassurez-vous, on peut aussi avoir des signes encores plus originaux :

Où étaient les péruches ?

Et ceci dans le cas où la page est encodée en UTF-8 mais que dans les entêtes ou dans la balise méta, il est indiqué que la page est en ISO-8859–1 par exemple.

Pourquoi ?

Ce problème de présentation des accents viens du fait qu’il y a plusieurs méthodes d’encodage contenant pas toutes les mêmes caractères. C’est-à-dire que je l’encodage européen par défaut (OSI-8859–1) ne contient que des lettres “européennes” (avec les accents bien entendu). Cet encodage ne contient pas les caractères chinois ou arabes par exemple. Par conséquent, lorsque le navigateur a eu l’ordre de décoder la page avec tel ou tel encodage, si ce n’est pas le bon, évidement, il y a des gros problèmes !

La solution

La solution est très simple : indiquer au navigateur quel encodage il doit choisir pour décoder la page. Pour celà, on a plusieurs méthodes : les entêtes HTTP ou les balises méta, nous allons voir les deux.

Nous allons prendre un exemple concret. Nous avons une page web appelée “encodage.html”. Dedans ce trouve un texte avec des accents. Ils sont mal affichés… C’est donc que le navigateur internet n’utilise pas le bon “décodeur” pour lire la page…

Déterminer l’encodage de la page

Dans un premier temps, il se peut que vous ne connaissiez pas l’encodage des pages que vous produisez, c’est pourquoi, il y a une méthode très simple pour connaitre l’encodage.

Dans Mozilla Firefox (version 3 en ce qui me concerne), rendez-vous sur la page qui pose problème.

Une fois sur la page, et que vous voyez la page avec de gros problèmes sur les accents, saisissez votre souris et cliquez sur AffichageEncodage des caractères. Vous aurez une (petite) liste des encodages les plus utilisés. Choisissez-les les uns après les autres en regardant à chaque fois si les accents sont correctements affichés.

Lorsque vous avez votre page avec les accents affichés correctements, regardez quel encodage avez-vous choisi et, c’est celui de la page.

Maintenant, il faut dire au navigateur que c’est cet encodage pour ne pas que tous les visiteurs qui tombent sur la page aient à choisir l’encodage qui convient et que le navigateur le choisisse tout seul !

Les balises méta

Dans le code sources des pages Web, les sous-balises de la balise “head” ne servent pas à rien ! Certes, il y a “title” mais les autres ont aussi toutes une importance.

Le navigateur lis toutes ces lignes avant d’afficher la page à l’écran. C’est dans cette balise (head) que l’on peut lui indiquer quel encodage il doit choisir. Il faut que l’on créer une balise méta qui contiendrais les données. La voici :

Ici, le charset que le navigateur va choisir est l’UTF-8. Maintenant, il faut copier / coller cette ligne dans votre page (dans la balise head) en faisant attention de remplacer “UTF-8” par le nom de l’encodage de votre page déterminé précédement.

Enregistrez la page, si besoin, uploadez-la sur le serveur et rechargez la page, normalement, tous les accents sont correctements affichés ! Sinon, vous avez fait une erreur quelque part.

Les entêtes avec PHP

Si vous avez beaucoup de pages sur lequelles vous n’avez pas de balise méta mais que vous pouvez y mettre un code PHP, alors, rien de plus simple !

Avant tout code HTML (avant même la balise “<html>”), ajouter ce code :

Encore une fois, remplacez bien "UTF-8" par l'encodage déterminé plus haut.

Voilà, normalement, le problème de l'encodage n'est plus un secret pour vous et vous pouvez afficher des pages avec des accents bien formés sans aucun problème !

--

--

Samuel ROZE
sroze

Software Engineering. Containers. APIs & IPAs.