Dimanche 11 septembre 2011
Vous souhaitez conquérir le marché mondial et avez besoin que votre site Web soit à la hauteur de vos ambitions. Vous pensez peut-être qu'il suffit d'en traduire le contenu. Mais ce n'est pas aussi simple que cela. L'équipe Google pour les webmasters crée fréquemment des sites localisés dans plus de 40 langues. Voici donc quelques éléments que nous prenons en compte lorsque nous publions nos pages dans d'autres langues et régions.
(Même si vous pensez ne pas être concerné par ces problèmes parce que vous n'offrez que du contenu en anglais, il est possible que des visiteurs non anglophones aient recours à des outils tels que Google Traduction pour consulter votre contenu dans leur langue. Ce trafic devrait figurer dans votre tableau de bord de données analytiques. Vous pouvez donc déterminer combien de visiteurs ne voient pas votre site comme ils le devraient.)
Plus de langues ne veut pas forcément dire plus de modèles HTML
Nous ne le dirons jamais assez : réutilisez le même modèle pour toutes les versions linguistiques et essayez toujours d'en simplifier le code HTML.
L'utilisation d'un code HTML similaire pour toutes les langues facilite la maintenance. Le "bidouillage" du code HTML de chaque langue pour corriger les bugs est contre-productif. Le code de vos pages doit être le plus propre possible. Quant aux problèmes de style, résolvez-les directement avec les feuilles CSS. Pour ne citer qu'un avantage d'un code propre, la plupart des outils de traduction analysent les chaînes de contenu traduisibles dans le document HTML. Cette tâche est d'autant plus simple si le code HTML est correctement structuré et valide.
Quelle est la longueur idéale d'une chaîne ?
Si votre conception repose sur une lecture fluide du texte avec l'utilisation d'éléments de taille fixe, la traduction risque de poser problème. Par exemple, traduit, le texte de la barre de navigation de gauche est susceptible d'être beaucoup plus long que le texte d'origine. Il suffit d'examiner la différence de longueur entre les éléments de navigation en anglais et les mêmes éléments en néerlandais pour s'en rendre compte. Soyez préparé à ce que les titres de navigation s'étendent sur plusieurs lignes et définissez la hauteur de la ligne en conséquence. Cette recommandation est d'autant plus valide lorsque la langue d'origine du texte de navigation est en anglais.
La longueur variable des mots entraîne des problèmes particuliers au niveau des libellés et des commandes dans les formulaires. Si la mise en page de votre formulaire affiche des libellés à gauche et des champs à droite, par exemple, les chaînes de texte longues peuvent couvrir deux lignes, tandis que les chaînes de texte courtes semblent ne pas être associées à leurs champs de saisie. Ces deux scénarios nuisent à la conception et à la lisibilité du formulaire. Tenez également compte des styles supplémentaires dont vous aurez besoin pour les mises en page dont le texte se lit de droite à gauche (nous y reviendrons plus en détail ultérieurement). C'est pourquoi nous créons des formulaires dont les libellés se trouvent au-dessus des champs afin de faciliter la lisibilité et le style. Ils s'adaptent ainsi parfaitement dans toutes les langues.
Évitez également les colonnes à hauteur fixe. Si vous tentez d'améliorer la mise en page avec des zones en arrière-plan qui correspondent à cette hauteur, il est probable que le texte traduit déborde s'il compte plus de caractères que le texte d'origine. Déterminez si les éléments d'interface utilisateur que vous prévoyez d'utiliser dans votre conception fonctionneront en fonction de la quantité de texte (par exemple, onglets horizontaux ou verticaux).
Inconvénients
La modification du code source lorsque le code HTML est bidirectionnel peut poser problème, car de nombreux éditeurs n'ont pas été conçus pour prendre en charge l'algorithme Unicode bidirectionnel (en savoir plus sur les problèmes et les solutions). En bref, l'affichage de votre balisage pourra être altéré :
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
D'après notre utilisation quotidienne, nous avons pu observer que les éditeurs suivants proposent des solutions appropriées pour l'édition bidirectionnelle : Coda, mais aussi Dreamweaver, IntelliJ IDEA et JEditX.
Lorsque vous concevez un site destiné à des langues qui se lisent de droite à gauche, vous pouvez intégrer la plupart des éléments compatibles dans le code CSS de base et utiliser l'attribut directionnel de l'élément html (pour la rétrocompatibilité) en combinaison avec une classe au niveau de l'élément body. Comme toujours, la gestion sera facilité si vous conservez tous les styles dans une seule et même feuille de style principale.
Voici quelques problèmes de style majeurs auxquels il est important de prêter attention : les éléments flottants à droite doivent être flottants à gauche, et inversement. Les marges intérieures ou marges supplémentaires appliquées à un côté d'un élément doivent être inversées, de même que tous les attributs d'alignement de texte.
Nous utilisons généralement l'approche suivante, qui consiste à utiliser une classe au niveau de la balise "body" plutôt qu'un sélecteur CSS html[dir=rtl], car cette méthode est compatible avec les navigateurs plus anciens :
Éléments :
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Style de gauche à droite (par défaut) :
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Style de droite à gauche :
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(Voir un exemple en anglais et en arabe)
Une dernière remarque à ce sujet : la plupart du temps, le contenu destiné aux pages rédigées dans une langue qui se lit de droite à gauche est bidirectionnel plutôt que purement RTL, car certaines chaînes devront probablement conserver leur direction LTR (de gauche à droite). Cela peut être le cas lorsque le nom d'une société est indiqué en caractères latins, ainsi qu'avec les numéros de téléphone. Pour vous assurer que le navigateur gère ce style correctement dans un document qui se lit essentiellement de droite à gauche, vous devez encapsuler les chaînes de texte intégrées avec un élément intégré à l'aide d'un attribut qui indique la direction à suivre. Par exemple :
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Si vous ne disposez pas de conteneur HTML à associer à l'attribut "dir" (éléments de titre ou code source généré par JavaScript pour les invites de message, par exemple), vous pouvez utiliser cet équivalent pour définir la direction où &x202B; et ÊC; correspondent à des caractères de contrôle Unicode pour l'intégration de droite à gauche :
<title>‫הפוך את Google לדף הבית שלך‬</title>
Exemple d'utilisation en code JavaScript :
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
(Pour en savoir plus, consultez les articles du W3C consacrés à la création de code HTML pour les scripts en arabe, hébreu et autres langues lues de droite à gauche, et à la création de scripts pour la lecture de droite à gauche).
Quésaco ?
Si vous n'avez jamais travaillé avec des jeux de caractères non latins (cyrilliques, grecs, et une multitude de langues asiatiques et indo-aryennes), vous constaterez peut-être que votre éditeur et votre navigateur n'affichent pas le contenu comme prévu.
Vérifiez que les encodages de votre éditeur et de votre navigateur sont définis sur UTF-8 (recommandé). Pensez à ajouter à votre modèle HTML un élément <span> et l'attribut lang de l'élément html pour que les navigateurs sachent à quoi s'attendre lors du rendu de votre page. Cette approche présente en outre l'avantage de garantir l'affichage correct de tous les caractères Unicode. L'utilisation d'entités HTML telles que é (é) n'est donc pas nécessaire, ce qui vous permet d'économiser de précieux octets. Si vous rencontrez des difficultés, consultez le tutoriel du W3C sur l'encodage des caractères. Vous y trouverez des explications détaillées des problèmes.
Conseil pratique concernant l'attribution de noms
Enfin, voici un conseil pratique sur les conventions d'attribution de noms lorsque vous créez plusieurs versions linguistiques. Le recours à une norme telle que les codes de langue ISO 639-1 facilite les choses lorsque vous commencez à gérer plusieurs versions linguistiques d'un même document.
L'utilisation d'une norme conventionnelle aide les utilisateurs à comprendre la structure de votre site tout en le rendant plus facile à gérer pour tous les webmasters susceptibles de le développer. De plus, l'utilisation de codes de langue pour les autres éléments du site (images du logo ou documents PDF) est utile pour permettre l'identification rapide des fichiers.
Consultez les posts précédents du centre pour les webmasters afin d'obtenir des conseils sur les structures d'URL et sur les autres problèmes liés à l'utilisation de sites Web multirégionaux et à l'utilisation de sites Web multilingues.
Il s'agit d'un récapitulatif des principales difficultés que nous rencontrons au quotidien. Toutefois, nous pouvons vous assurer que le fait de mettre en place un processus de planification et de mise en œuvre en amont d'un code HTML bien structuré et de pratiques CSS robustes est favorable à la localisation.