Gérer un site multilingue via PHP et CSS dynamiques

Gérer un site multilingue via PHP et CSS dynamiques (le 19 novembre 2011)

Le site GPaley.ch a été l'occasion pour moi de gérer un site multilingue via une CSS générée dynamiquement.

Les postulats étaient les suivants :

  • Hors de question d'utiliser plusieurs fichiers CSS, tout doit être dans un unique fichier, et le système doit être aussi simple que possible à mettre en place et à maintenir, donc exit les LESS et autres SASS !
  • Hors de question de sacrifier les performances (la mise en cache doit être possible sans pour autant bugger).
  • Les images du bandeau dans chaque langue utiliseront les sprites CSS.
  • La CSS utilisera PHP pour gérer la langue.

Ce n'est pas compliqué, toutefois quelques léger écueils se sont montrés :

  • le bandeau peut avoir des dimensions différentes pour chacun de ses liens : par exemple, là où les textes de la navigation sont très courts en chinois, ils peuvent être très longs en allemand et nécessiter des adaptations.
  • les liens d'évitement qui peuvent être par exemple longs uniquement en russe et également nécessiter une adaptation, etc.

Le fonctionnement est assez simple, la CSS s'appelle donc styles.php, en voici le début :

<?php
header('content-type: text/css');
ob_start('ob_gzhandler');
header('Cache-Control: max-age=31536000, must-revalidate');
// etc.

L'entête (headers) indique que le fichier PHP est bien de type CSS, et les autres permettent la mise en cache, la compression afin que les performances ne soient pas oubliées (en supposant que les fichiers PHP soient paramétrés pour ne pas être mis en cache).

L'appel à la CSS se fera ainsi :
<link href="../layout/css/styles_new.php?lang=cn" rel="stylesheet" type="text/css" media="all" />

La mise en cache se fait sur le querystring, ainsi la CSS mise en cache pour la version chinoise ne viendra pas interférer avec celle de la version anglaise par exemple.

La gestion multilingue dans la CSS s'effectue par exemple ainsi :
styles.php, en voici le début :

<?php
if (!empty($_GET['lang'])){
$lang=$_GET['lang'];
}
else $lang='fr';
?>
#navigation{
height:60px;
<?php
echo ' background:#262223 url(../images/menu-' . $lang . '.jpg) 0 0 no-repeat;';
?>
width:713px;
/* ici les autres propriétés */
}

En supposant que vos images soient bien nommées selon la même logique. Autre cas :

<?php
if ($lang=='en'){
?>
/* ici les coordonnées des sprites CSS pour la version EN */
<?php
}
elseif ($lang=='de'){
?>
/* ici les coordonnées des sprites CSS pour la version DE */
/* etc. */

Ainsi, cela permet d'adapter très simplement les blocs selon chaque langue. Comme la disposition reste sensiblement la même pour chaque langue, les adaptations sont peu nombreuses et rapidement déployées. La possibilité d'utiliser d'autres variables PHP pour les couleurs par exemple est tout à fait envisageable, même si pour cet exemple, je n'en ai pas eu le besoin.

Au final, l'ajout de nouvelles langues est très aisé, et il reste possible de faire des adaptations pour une unique langue le nécessitant.

Le système reste extrêmement simple à maintenir, ne nécessite rien d'autre que des bases en PHP (pas de framework comme SASS).

Bref, soyez fainéant, et vive la simplicité !

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1430


Aucun commentaire pour le moment.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.