6 conseils rapides pour les sites Web internationaux

Vendredi 31 mai 2013

Note des rédacteurs : après avoir examiné précédemment différentes manières de gérer
l’internationalisation pour la recherche Web de Google,
voici un article rédigé par des membres de l’équipe Google Web Studio contenant des conseils pour les développeurs Web.

De nombreux sites Web existent en plusieurs langues, et de plus en plus de sites sont disponibles en
plusieurs langues. Pourtant, créer un site Web multilingue ne se résume pas à
la traduction ou à la localisation (L10N). Cela demande un peu plus d’efforts, qui sont tous
liés à l’internationalisation (I18N). Dans cet article, nous partageons quelques conseils pour les sites Web
internationaux.

Rendez les pages compatibles I18N dans le balisage, pas dans les feuilles de style

La langue et la directionnalité sont inhérentes au contenu du document. Par conséquent, si possible, vous devez toujours utiliser le balisage, et non les feuilles de style, à des fins d’internationalisation. Utilisez
@lang et @dir, au moins sur l’élément html :

Évitez de créer vos propres solutions telles que des classes ou des ID spéciaux.

En ce qui concerne l’I18N dans les feuilles de style, vous ne pouvez pas toujours compter sur CSS : la spécification CSS définit que les agents utilisateurs conformes
peuvent ignorer des propriétés telles que direction ou unicode-bidi.
(Pour XML, la situation change à nouveau. XML ne propose pas de balisage d’internationalisation spécial, il est donc
conseillé d’utiliser CSS ici.)

Utilisez une seule feuille de style pour tous les paramètres régionaux

Au lieu de créer des feuilles de style séparées pour la directionnalité LTR et RTL, ou même pour chaque langue,
regroupez le tout dans une seule feuille de style. Cela rend vos règles d’internationalisation beaucoup
plus faciles à comprendre et à maintenir.

Ainsi, au lieu d’intégrer une feuille de style alternative telle que

utilisez simplement votre

feuille existante.

Si vous adoptez cette approche, vous devrez compléter les règles CSS existantes par leurs équivalents internationaux : Utilisez le sélecteur d'attribut [dir=’rtl’]

Puisque nous vous recommandons de conserver la feuille de style que vous possédez déjà (astuce n° 2), vous avez besoin d’une autre méthode pour sélectionner les éléments dont vous devez modifier le style pour l’autre directionnalité. Comme le contenu RTL nécessite un balisage spécifique (astuce n° 1), cela devrait être simple : pour la plupart des navigateurs modernes, nous pouvons simplement utiliser
[dir='rtl'].

Voici un exemple :

Utilisez la :lang() pseudo-classe

Pour cibler des documents d’une langue particulière, utilisez la :lang() pseudo-classe. (Notez
que nous parlons ici de documents et non d’extraits de texte, car cibler des extraits d’une langue particulière
rend les choses un peu plus complexes.)

Par exemple, si vous constatez que le formatage en gras ne fonctionne pas très bien pour les documents en chinois
(ce qui est effectivement le cas), utilisez ce qui suit :

Miroir des valeurs liées à la gauche et à la droite

Lorsque vous travaillez avec des contenus LTR et RTL, il est important de mettre en miroir toutes les valeurs qui modifient la directionnalité. Parmi les propriétés à surveiller figurent tout ce qui concerne les bordures, les marges
et les remplissages, ainsi que les propriétés liées à la position, floatou
text-align.

Par exemple, ce qui est text-align: left en LTR doit devenir
text-align: right en RTL.

Il existe des outils pour faciliter l’inversion de la directionnalité. L’un d’eux est
CSSJanus, bien qu’il ait été écrit
pour le domaine de la « feuille de style séparée » et non de la « même feuille de style ».

Gardez un œil sur les détails

Faites attention aux éléments suivants :

• Les images conçues pour la gauche ou la droite, comme les flèches ou les arrière-plans, les sources lumineuses dans
  box-shadow et text-shadow values, ainsi que le positionnement et les animations JavaScript :
  Ceux-ci peuvent nécessiter d’être inversés et adaptés pour la directionnalité opposée.
• Les tailles de police et les polices, en particulier pour les alphabets non latins : selon le script et la police, la taille de police par défaut
  peut être trop petite. Envisagez d’ajuster la taille et, si nécessaire, la police.
• Spécificité
  CSS:
  Lorsque vous utilisez le sélecteur [dir='rtl'] (ou [dir='ltr']) (astuce n° 2), vous
  utilisez un sélecteur de plus haute spécificité. Cela peut entraîner des problèmes. Soyez simplement vigilant et
  ajustez en conséquence.

Si vous avez des questions ou des commentaires, consultez le
forum d’aide pour webmasters de l’internationalisation,
ou laissez vos commentaires ici.

Écrit par
Jens O. Meiert
et
Tony Ruscoe,
responsables techniques, Google Web Studio