Convertir son site web en UTF-8

UTF-8 est un format de codage de caractères (charset) élargi qui permets l’utilisation de divers caractères de plusieurs langues, contrairement aux formats plus vieux, comme iso-8859-1, qui requiert une forme d’encodage afin d’accepter, par exemple, des lettres accentuées ou des caractères spéciaux. UTF-8 est devenu la norme moderne pour le format de codage des sites web, et la plupart des navigateurs et systèmes d’exploitation actuels peuvent maintenant le supporter sans problèmes, donc il est bon temps de profiter de tous ses avantages.

Voici un exemple de texte français en iso-8859-1 avec des entités de caractère (HTML entities) dans le code HTML pour les lettres accentuées. Prenons la première phrase de l’article Wikipédia sur les entités de caractère:

Une entité de caractère, ou référence de caractère, est un code SGML qui référence un caractère de la norme UCS. Elle permet d’afficher des caractères indépendamment du jeu du document.

Voyez comment les lettres accentuées doivent toutes commencer par le symbole & ? Ça rends le texte un peu difficile à lire quand on travaille dans le code. Et c’est complètement impossible à déchiffrer si le texte est, par exemple, dans une langue non latine comme le japonais. Cette même ligne de texte apparaîtrait ainsi en UTF-8:

Une entité de caractère, ou référence de caractère, est un code SGML qui référence un caractère de la norme UCS. Elle permet d’afficher des caractères indépendamment du jeu du document.

C’est mieux non? Vous êtes donc maintenant convaincu, votre prochain site web sera en UTF-8. Pas si vite. Évidemment, ce n’est jamais exactement aussi simple qu’on le voudrait, comme je m’en suis rendu compte alors que j’avais décidé de convertir un site web qui allait recevoir des versions traduites en plusieurs langues.

La première chose à faire est la plus simple. Il faut indiquer le format de codage de caractères dans l’en-tête (headers) de vos pages comme suit:

Ou si vous convertissez un site, remplacer votre ancienne balise iso-8859-1 (ou autre):

Avec la ligne précédente. Ce qui devrait donner ceci:

Mais ce n’est pas tout de remplacer cette balise, il faut aussi que votre éditeur HTML sauvegarde vos fichiers dans le format indiqué, parce que le code binaire du fichier sera différent en UTF-8. Si le code binaire de votre fichier est dans le format précédant et que votre en-tête HTML indique UTF-8, il y aura des conflits.

La plupart des éditeurs web professionnels (je pense à Dreamweaver) n’auront pas de problèmes et le feront automatiquement, mais un éditeur texte simple comme Notepad ne supporte pas cette option. Un exemple d’éditeur web gratuit qui supporte la sauvegarde en UTF-8 est Notepad++. Pour rester avec Dreamweaver, dans le dialogue au moment de la sauvegarde, il affichera les options « Unicode Normalization Form ». Je choisi normalement cette variante:

Unicode Normalization Form: C (Canonical Decomposition, followed by Canonical Composition)

Et je ne sélecte pas l’option « Include Unicode Signature (BOM) », qui reste décochée.

Si vous tentez de convertir votre site existant en entier en faisant un « Search & Replace » (faites une copie de sauvegarde!), assurez-vous qu’il sauvegarde bien les nouveaux fichiers dans le format UTF-8 après les changements.

Un autre détail pour être sur que tout roule bien, si vous avez des form dans vos pages, il est recommendé d’indiquer le bon charset pour l’information qui sera envoyée avec l’attribut accept-charset="UTF-8", comme suit:

Si votre site est un simple site HTML statique, les étapes précédentes devraient suffire pour fonctionner en UTF-8. Si vous convertissez un site, il vous faudra aussi changer les caractères spéciaux qui étaient auparavant sous la forme d’entités de caractère en caractères normaux.

Bien que la balise en en-tête indique aux navigateurs le format de codage de caractères approprié pour votre page, il se peut, en fait, que votre serveur HTTP soit configuré pour envoyer automatiquement un format de codage autres pour chaque requête (Server Headers). Vous pouvez examiner les requêtes et réponses HTTP d’une page avec web-sniffer.net.

Encore une fois, s’il y a contradiction entre les « Headers » de votre serveur et de votre page, il y a aura des conflits, et le navigateurs vont généralement miser sur la réponse du serveur en priorité pour afficher correctement une page web, car il arrive avant le contenu de la page web.

En cas de conflits, si vous n’avez pas accès à la configuration du serveur HTTP (ce qui est la majorité des cas), vous devrez lui forcer la main avec le fichier .htaccess si ce serveur HTTP est Apache (pour en savoir plus sur htaccess, lire La gestion d’un site avec .htaccess), en ajoutant les instructions suivantes:

AddCharset UTF-8 .html
AddDefaultCharset UTF-8

Si l’extension de vos pages est php, changer .html pour .php.

En fait, une note pour ceux qui utilise PHP: beaucoup de fonctions reliées à des opérations textuelles devront être configurées pour traiter le texte dans le bon format. Par exemple, la fonction htmlspecialchars() devrait avoir une instruction supplémentaire comme suit:

htmlspecialchars($texte, ENT_QUOTES, "UTF-8")

PHP 6 devrait posséder un meilleur support naturel dans le futur pour UTF-8 afin d’éviter tout ces petits désagréments.

Dans le cas ou votre site accède à une base de données comme MySQL, il faut aussi s’assurer que le texte sauvegardé dans cette base de donnée soit faite dans le format UTF-8. Avec phpMyAdmin, il faut sélectionner UTF-8 dans la configuration du MySQL charset et utf8_unicode_ci pour MySQL connection collation en première page. Si vous convertissez un site existant, il faudra manuellement changer la Collation de chacune de vos tables et des colonnes pour utf8_unicode_ci.

Le texte sauvegardé sera maintenant en UTF-8, mais, dépendamment de la configuration du serveur, il faudra peut-être aussi indiquer que le texte envoyé par la base de donnée lors d’un accès est en UTF-8, avec la commande suivante après chaque connexion de type mysql_connect:

mysql_query("SET NAMES 'utf8'", $connexion);

Voici un exemple:

//connexion et sélection de la base de donnée
$connexion = mysql_connect("localhost", "usager", "mot de passe") or die ("Probleme de connexion avec MySQL");
mysql_select_db("base de donnee") or die ("Probleme de selection de la base de donnee");
mysql_query("SET NAMES 'utf8'", $connexion);

Comme on peut voir, le passage à UTF-8 n’est pas sans quelques embûches, et il m’a fallu personnellement plusieurs heures pour rassembler toute cette information la première fois, donc j’espère que cet article vous aura faciliter la tâche. Une fois que tout roule bien, par contre, UTF-8 est la solution idéale pour un site dans une autre langue que l’anglais.

Ajout 20 octobre 2009

J’ai remarqué qu’il fallait aussi modifier la fonction PHP mail() si on voulait recevoir ou envoyer des courriels dans le format UTF-8. Voici comment faire:

$header = "MIME-Version: 1.0\r\nContent-type: text/plain; charset=UTF-8\r\n";
$titre = "=?UTF-8?B?" . base64_encode("Votre titre email") . "?=";

mail($addresse_reception, $titre, $message, $header . "From: " . $addresse_envoi . "\n");

La variable $header, qui indique la version MIME du courriel, est insérée avant la partie de l’adresse d’envoi, et il faut entourer le titre de votre email avec des instructions supplémentaires afin qu’il s’affiche convenablement.