Sunday, September 11, 2011
Vous vous lancez donc à l’international et votre site web doit suivre le mouvement. Cela devrait être un simple cas de texte à traduire et le tour est joué, n’est-ce pas ? Probablement pas. L’équipe Google Webmaster
(Même si vous pensez être à l’abri de ces problèmes parce que vous ne proposez du contenu qu’en
anglais, il se peut que des visiteurs de langues non anglaisesutilisent des outils comme Google Translate pour afficher votre contenu dans leur langue
. Ce trafic devrait apparaître dans votre tableau de bord analytique, ce qui vous permet de vous faire une idée du nombre de visiteurs qui ne visualisent pas votre site de la manière prévue.)
Plus de langues != plus de modèles HTML
Nous ne le répéterons jamais assez : réutilisez le même modèle pour toutes les versions linguistiques et essayez toujours de garder le code HTML de votre modèle simple.
Conserver le même code HTML pour toutes les langues présente des avantages en matière de maintenance. Bricoler le code HTML pour chaque langue afin de corriger des bugs n’est pas viable – gardez le code de votre page aussi propre que possible et gérez tous les problèmes de style dans le CSS. Pour ne citer qu’un seul avantage d’un code propre : la plupart des outils de traduction analyseront les chaînes de contenu traduisibles du document HTML, et cette tâche est grandement facilitée lorsque le HTML est bien structuré et valide.
Quelle est la longueur d’un morceau de ficelle ? Si votre conception repose sur du texte s’accordant parfaitement avec des éléments de taille fixe, la traduction de votre texte risque de faire des ravages. Par exemple, le texte de votre navigation latérale sera probablement traduit par des chaînes de texte beaucoup plus longues dans plusieurs langues – observez la différence de longueur de chaîne entre certains
textes de navigation en
anglais et en
néerlandais
pour le même contenu. Préparez-vous à des titres de navigation qui pourraient s’étendre sur plusieurs lignes en déterminant votre hauteur de ligne pour y faire face (ce qui est également à prendre en compte lorsque vous créez votre texte de navigation en anglais au départ).
Les longueurs de mots variables posent des problèmes particuliers dans les libellés et les contrôles de formulaires. Si la disposition de votre formulaire affiche les libellés à gauche et les champs à droite, par exemple, des chaînes de texte plus longues peuvent s’étendre sur deux lignes, tandis que des chaînes de texte plus courtes ne semblent plus associées à leurs champs de saisie – ces deux scénarios ruinent la conception et nuisent à la lisibilité du formulaire. Considérez également le style supplémentaire dont vous aurez besoin pour les mises en page de droite à gauche (RTL) (plus de détails à ce sujet plus tard). Pour ces raisons, nous concevons des formulaires avec les libellés au-dessus des champs, pour une lisibilité aisée et un style qui se traduira bien dans toutes les langues. Évitez également les colonnes à hauteur fixe – si vous essayez d’harmoniser votre mise en page avec des arrière-plans de boîte de même hauteur, il y a fort à parier que lorsque votre texte sera traduit, il débordera des zones qui n’étaient assez hautes que pour contenir votre contenu en anglais. Réfléchissez à la question de savoir si les éléments d’interface utilisateur que vous prévoyez d’utiliser dans votre conception fonctionneront lorsqu’il y aura plus ou moins de texte – par exemple,
onglets horizontaux par rapport à
verticaux
.D’un autre côtéL’édition de code source pour le HTML bidirectionnel peut s’avérer problématique car de nombreux éditeurs n’ont pas été conçus pour prendre en charge l’algorithme bidirectionnel Unicode
(
plus de recherches sur les problèmes et les solutions ). En bref, la façon dont votre balisage est affiché peut être corrompue : Notre propre utilisation quotidienne a montré que les éditeurs suivants fournissent actuellement des solutions correctes pour l’édition bidirectionnelle : en particulier Coda, ainsi que Dreamweaver, IntelliJ IDEA et JEditX. Lors de la conception pour des langues RTL, vous pouvez intégrer la majeure partie de la prise en charge dont vous avez besoin dans le CSS principal et utiliser l'attribut de direction de l'élément html
(pour la rétrocompatibilité) en association avec une classe sur l’élément
body
. Comme toujours, conserver tous les styles dans une seule feuille de style principale garantit une meilleure maintenabilité. Quelques problèmes de style clés à surveiller : tous les éléments alignés à droite devront l’être à gauche et vice versa ; les largeurs de marge intérieure ou extérieure appliquées à un côté d’un élément devront être remplacées et inversées, et tous les attributs text-align doivent être inversés.
Nous utilisons généralement l’approche suivante, incluant l’utilisation d’une classe sur la balise body plutôt qu’un sélecteur CSS html[dir=rtl] car cela est compatible avec les anciens navigateurs :
Éléments :
Style de gauche à droite (par défaut) :
Style de droite à gauche :
(Voir ceci en action en anglais
et.)
arabe
Une dernière remarque à ce sujet : la plupart du temps, votre contenu destiné aux pages en langues de droite à gauche sera bidirectionnel plutôt que purement RTL, car certaines chaînes devront probablement conserver leur direction LTR – par exemple, les noms d’entreprise en caractères latins ou les numéros de téléphone. La façon de s’assurer que le navigateur gère cela correctement dans un document principalement RTL est d’envelopper les chaînes de texte intégrées avec un élément en ligne utilisant un attribut pour définir la direction, comme ceci : ‫ Dans les cas où vous n’avez pas de conteneur HTML pour accrocher l’attribut dir, tels que les éléments de titre ou le code source généré par JavaScript pour les invites de message, vous pouvez utiliser cet équivalent pour définir la direction où ‬ et
sont des caractères de contrôle Unicode pour l’intégration de droite à gauche :
Exemple d’utilisation dans le code JavaScript :
(Pour plus de détails, consultez les articles du W3C sur
la création de HTML pour l’arabe, l’hébreu et d’autres écritures de droite à gauche
et.)
la création d’écritures de droite à gauche
C’est du chinois pour moi…
Si vous n’avez jamais travaillé avec des jeux de caractères non latins auparavant (cyrillique, grec et une myriade d’alphabets asiatiques et indiens), vous constaterez peut-être que votre éditeur et votre navigateur n’affichent pas le contenu comme prévu.
Vérifiez que les codages de votre éditeur et de votre navigateur sont définis sur UTF-8 (recommandé) et envisagez d'ajouter un élément <span> et l'attribut lang de l'élément
html à votre modèle HTML afin que les navigateurs sachent à quoi s'attendre lors du rendu de votre page – cela présente l'avantage supplémentaire de garantir que tous les caractères Unicode sont affichés correctement, de sorte que l'utilisation d'entités HTML telles que é
(é) ne sera pas nécessaire, ce qui permet d’économiser de précieux octets ! Consultez
le tutoriel du W3C sur le codage des caractères
si vous rencontrez des problèmes – il contient des explications approfondies sur les problèmes.
Un mot sur la dénomination
Enfin, un conseil pratique sur les conventions de dénomination lors de la création de plusieurs versions linguistiques. L’utilisation d’une norme telle que les
codes de langue ISO 639-1
pour la dénomination aide lorsque vous commencez à traiter plusieurs versions linguistiques d’un même document.
L’utilisation d’une norme conventionnelle aidera les utilisateurs à comprendre la structure de votre site tout en le rendant plus facile à maintenir pour tous les webmasters qui pourraient développer le site, et l’utilisation des codes de langue pour les autres actifs du site (images de logo, documents PDF) est pratique pour identifier rapidement les fichiers.
Consultez les précédents articles de Webmaster Central pour obtenir des conseils sur les structures d’URL et d’autres questions relatives à
l’utilisation de sites web multirégionaux
et.
l’utilisation de sites web multilingues
Comment nous l'appliquons
Google announcements age. We keep this post here for the record, and we note for clients whether the behaviour it describes still applies today or has since been superseded.
Services associés