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

Le problème

Samuel ROZE
Jul 21, 2008 · 3 min read

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 :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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 :

<?phpheader('Content-type: text/html; charset=UTF-8');?>

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 !

sroze

Samuel Rozé’s blog.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store