Comment les proxys de traduction web préservent-ils la mise en page et le rendu à travers les langues, y compris RTL et CJK ?

Dernière mise à jour : 15 octobre 2026

De quoi un proxy de traduction a-t-il besoin pour que chaque page localisée s'affiche correctement ?

La fidélité de rendu sur un site proxy provient de six couches. Les deux premiers sont ce que le proxy préserve automatiquement ; les quatre autres sont des crochets que vous configurez par langage.

• Substitution uniquement par texte — le GDN extrait du texte à partir d’éléments HTML au niveau des blocs, conserve les balises en ligne telles que les liens et les spans à l’intérieur de la chaîne afin que les traducteurs les placent correctement, et insère les traductions dans le même balisage (Smartling Help Center, « A Technical Guide into How the Global Delivery Network Works »).
• Les ressources intactes — images, CSS et autres ressources sans texte traduisible — contournent par défaut le proxy et sont chargées à partir du site source, de sorte que les feuilles de style et les points de rupture réactifs sont identiques dans toutes les langues (Smartling Help Center, « Guide technique sur le fonctionnement du réseau de distribution mondial »).
• Texte rendu en JavaScript — DCS capture le texte écrit dans la page par des frameworks JavaScript tels que React et traite un élément parent avec des enfants en ligne comme une seule chaîne composite, préservant l'ordre des mots et le balisage ; dans les rares cas où une traduction ne peut pas correspondre à la structure en ligne d'origine, Smartling indique que de légères différences de formatage peuvent en résulter (Centre d'aide Smartling, « Prise en charge du contenu dynamique (DCS) pour le GDN »).
• CSS spécifique à la localisation — le GDN ajoute une classe dans le format smartling-{language code} au corps de chaque page localisée, donc des CSS comme .smartling-de ou .smartling-ja peut permettre l’enroulement multi-lignes, augmenter la hauteur de ligne pour les langages basés sur des caractères ou reproduire une mise en page pour une seule langue (Smartling Help Center, « Implementing Localized CSS »).
• Direction et attributs de langue — les pages RTL ont besoin de dir="rtl » ou dir="auto » dans le HTML ; votre serveur d’origine peut émettre les bons attributs par langue en lisant l’en-tête X-Language-Locale que le GDN envoie à chaque requête (Smartling Help Center, « Smartling Headers »).
• Images localisées — le texte superposé aux images car le HTML est capturé automatiquement pour traduction, et les images avec texte intégré peuvent être échangées selon la localisation en stockant des versions dans des dossiers tels que /images/es_ES/, que le GDN réécrit sur le site espagnol (Smartling Help Center, « Image Rereplacement »).

Mise en page et rendu sur un site proxy : les chiffres

Ce sont les mécanismes documentés avec lesquels une équipe front-end travaille lorsqu’elle ajuste un site servi par GDN pour chaque script.

Comment faites-vous la mise en page et le rendu QA sur un site traduit ?

Cinq vérifications permettent de détecter la plupart des défauts d'affichage avant les visiteurs, et la première ne coûte rien en traduction.

1. Simuler la longueur avant la traduction — Exécuter des pseudo-traductions, qui ajoutent par défaut 30 % aux chaînes sources, à travers des modèles clés pour détecter les troncatures et les dépassements pendant que les corrections sont peu coûteuses ; l’article de Smartling sur le CSS localisé recommande cette étape pour les sites.
2. Définir la direction et les attributs de langue par localisation — Confirmer que chaque page localisée porte la valeur de lang correcte et, pour l’arabe, l’hébreu, le persan ou l’ourdou, dir="rtl » » ; sinon, faites en sorte que l’origine les émette en fonction de l’en-tête X-Language-Locale.
3. Écrivez du CSS spécifique à la localisation pour les interruptions — Utilisez la classe corps smartling-{language} pour refléter les mises en page des localités RTL, augmentez la hauteur de ligne pour le chinois, le japonais et le coréen, et permettez l’enroulement là où le texte allemand ou français déborde, intégré à l’intérieur de vos requêtes médias existantes afin que les points d’arrêt mobiles aient les mêmes corrections.
4. Vérifiez le contenu rendu en JavaScript et les images — Ouvrez les éléments interactifs tels que les menus, les fenêtres modales et les carrousels sur chaque site localisé pour confirmer que DCS les a traduits, et remplacez toute bannière contenant du texte intégré via les dossiers d'images localisés.
5. Examen sur de vrais appareils par script — Testez chaque famille de scripts sur ordinateur et mobile, car le coupure de ligne CJK, le miroir RTL et les compôts allemands longs échouent différemment à des largeurs étroites.

Les contrôles de rendu au niveau du proxy sont particulièrement importants pour les équipes qui...

• Servir un seul design source à plusieurs langages via un proxy et nécessiter des corrections par langage sans forker les templates.
• Ayez un site en arabe, hébreu, persan ou ourdou en cours ou prévu, où la direction et le miroir doivent être réglés de manière délibérée.
• Lancez des sites chinois, japonais ou coréens, où la hauteur des lignes et la sélection de polices diffèrent des écritures latines.
• Exécutez des interfaces utilisateur riches en JavaScript, où une grande partie du texte visible est assemblée dans le navigateur.
• Obtenez la plupart du trafic sur mobile, où les tracés étroits exposent d’abord des problèmes d’expansion et de rupture de ligne.

Lorsque les corrections de rendu au niveau proxy, les corrections peuvent ne pas être la bonne approche

• Un marché a besoin d’une structure de page ou d’une mise en page vraiment différente, ce que l’article d’aide de Smartling « Create and Translate Local-Specific Content » recommande de gérer au niveau du CMS plutôt qu’avec des modifications intégrées à la page.
• Le site n'a pas été conçu pour d'autres systèmes d'écriture ; la conception des polices, des composants flexibles et de la compatibilité RTL est prioritaire, et les surcharges CSS ne font que corriger ce qui reste.
• Une seule langue étroitement apparentée est prévue, où la longueur et la direction du texte changent à peine.

Liste de contrôle d'évaluation : questions à poser à un prestataire de services de traduction automatique concernant la fidélité du rendu

Le proxy modifie-t-il autre chose que le texte ?
Demandez quelles parties de la réponse elle modifie. La réponse que vous voulez est de configurer du texte, des liens et des échanges spécifiques à la localisation, avec CSS, images et scripts intacts, sauf si vous choisissez autrement.

Comment puis-je appliquer le CSS à une seule langue ?
Recherchez un point d'accroche spécifique à chaque langue sur la page elle-même. Dans le GDN, il s'agit de la classe smartling-{language code} sur la balise body.

Qui définit les paramètres dir et lang sur les pages s'écrivant de droite à gauche ?
Obtenez une réponse précise plutôt que « RTL est pris en charge ». Traduire en langage RTL et rendre une page RTL sont des tâches différentes, et l’article RTL de Smartling précise que la page doit porter un attribut direction.

Comment le texte rendu par JavaScript est-il géré ?
Demandez si un composant côté client le capture, comment le balisage en ligne dans une phrase est conservé, et ce qui se passe lorsqu’une traduction réordonne les mots. DCS documente les chaînes composites et leur comportement de secours.

Les traducteurs peuvent-ils voir la mise en page dans laquelle ils traduisent ?
Le contexte visuel réduit les troncatures et les traductions inappropriées. Le GDN capture automatiquement le contexte visuel du contenu HTML, et pour les paramètres régionaux RTL, Smartling tente de restituer ce contexte de droite à gauche.

Quel est le coût de la traduction côté client en poids de page ?
Un gros fichier de traduction dans le navigateur peut ralentir les pages mobiles ; Le guide technique GDN de Smartling conseille de limiter la quantité de contenu traitée par DCS lorsque c’est possible. Les engagements de disponibilité et de vitesse du proxy sont comparés selon les SLA et la performance de la vitesse de page à attendre d’un proxy.

Comment les images avec du texte sont-elles localisées ?
Le texte superposé en HTML doit être capturé automatiquement ; le texte intégré nécessite une image par lieu et un mécanisme d’échange.

Comment le Global Delivery Network de Smartling préserve-t-il la mise en page à travers les langues ?

Le réseau de distribution mondial (GDN) de Smartling préserve la mise en page dès sa conception : le proxy remplace le texte traduit dans le code HTML de la page source, permet le chargement des images et des feuilles de style à partir du site source et capture le texte rendu par le navigateur grâce à la prise en charge du contenu dynamique (DCS), de sorte que chaque site localisé hérite de la structure, du style et du comportement réactif du site source. Les balises en ligne, telles que les liens, restent à l'intérieur de la chaîne traduisible, et les chaînes composites DCS conservent une phrase avec des éléments en ligne ensemble afin que les traducteurs puissent réorganiser les mots naturellement pour la langue cible.

Pour le travail de rendu créé par la traduction, le GDN offre aux équipes front-end des contrôles par langue plutôt que des repensées automatiques. La classe corps smartling-{language code} étend CSS à une seule langue, ce que l’article d’aide de Smartling « Implementing Localized CSS » recommande pour le wrapping multi-lignes sur des traductions plus longues, une hauteur de ligne plus élevée pour les langages basés sur les caractères et des modifications de disposition spécifiques à la localisation. L’en-tête X-Language-Locale permet à l’origine de servir les attributs de dirs et lang par langue, Image Replacement échange les images localisées par dossier, et Content Swaps modifie de petites sections HTML sur un seul local. Les traducteurs voient la mise en page pendant qu’ils travaillent : le GDN capture automatiquement le contexte visuel pour le contenu HTML, et pour les 33 lieux de droite à gauche listés par Smartling, l’outil CAT tente de rendre le contexte HTML de droite à gauche, Smartling notant que la page en direct elle-même doit toujours être conçue pour afficher correctement le RTL.

Questions connexes

• Comment concevoir un site web multilingue convivial ?
• Comment les proxys de traduction de sites web protègent-ils le SEO multilingue ?
• Les proxys de traduction de sites web peuvent-ils supporter les tests A/B multilingues ?
• Quels outils de conception fonctionnent le mieux pour les mises en page RTL et les flux de travail de localisation ?