Comment les proxys de traduction de sites Web préservent-ils la mise en page et le rendu dans différentes 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 selon la langue.

• Substitution texte seulement — le GDN extrait du texte des éléments HTML au niveau du bloc, conserve les balises en ligne telles que les liens et les spans à l’intérieur de la chaîne pour 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 le proxy par défaut et se chargent depuis le site source, donc les feuilles de style et les points d’arrêt responsifs sont identiques dans toutes les langues (Smartling Help Center, « A Technical Guide into How the Global Delivery Network Works »).
• Texte rendu en JavaScript — DCS capture le texte écrit dans la page par des cadres 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 pendant que le HTML est capturé automatiquement pour traduction, et les images avec texte intégré peuvent être échangées par localisation en stockant des versions dans des dossiers comme /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 en 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. Simulez la longueur avant de traduire — Exécutez des pseudo traductions, qui encadrent les chaînes sources de 30% par défaut, à travers des modèles de clés pour trouver troncature et débordement pendant que les correctifs sont peu coûteux; L’article CSS localisé de Smartling pointe 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, faire en sorte que l’origine les émette en fonction de l’en-tête X-Language-Locale.
3. Écrivez du CSS spécifique aux paramètres régionaux pour les éléments qui ne fonctionnent pas : utilisez la classe body smartling-{language} pour refléter les mises en page pour les paramètres régionaux RTL, augmenter la hauteur de ligne pour le chinois, le japonais et le coréen, et autoriser le retour à la ligne lorsque le texte allemand ou français déborde, le tout dans vos requêtes média existantes afin que les points de rupture mobiles bénéficient des 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. Revoir sur des appareils réels par script — Testez chaque famille de scripts sur ordinateur et mobile, car le coupure de ligne CJK, le miroir RTL et les composés allemands longs échouent différemment à largeurs étroites.

Les contrôles de rendu au niveau proxy comptent le plus pour les équipes qui...

• Servir un seul design source à plusieurs langages via un proxy et nécessiter des correctifs par langue sans forker les modèles.
• Ayez un site en vie ou planifié en arabe, hébreu, persan ou ourdou, où la direction et le miroir doivent être réglés délibérément.
• Lancez des sites Web en chinois, japonais ou coréen, où la hauteur de ligne et le choix des polices diffèrent des alphabets latins.
• Exécutez des interfaces utilisateur riches en JavaScript, où une grande partie du texte visible est assemblée dans le navigateur.
• Obtenez la majorité du trafic sur mobile, où les tracés étroits exposent d’abord des problèmes d’expansion et de rupture de ligne.

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

• Un marché nécessite une structure ou une mise en page de page véritablement différente, que l'article d'aide de Smartling « Créer et traduire du contenu spécifique à la localisation » recommande de gérer au niveau du CMS plutôt qu'avec des modifications directement sur 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 liée est prévue, où la longueur et la direction du texte changent à peine.

Liste de vérification d’évaluation : questions à poser à un fournisseur de proxy de traduction concernant la fidélité du rendu

Le proxy change-t-il autre chose que le texte ?
Demandez quelles parties de la réponse ça modifie. La réponse que vous attendez est composée de texte, de liens et de substitutions spécifiques à la langue que vous configurez, tandis que les CSS, les images et les scripts restent inchangés, sauf indication contraire de votre part.

Comment puis-je appliquer le CSS à une seule langue?
Cherchez un crochet par langue dans la page elle-même. Dans le GDN, c’est la classe smartling-{language code} sur l’étiquette corps.

Qui définit le directeur et le langage sur les pages de droite à gauche?
Obtenez une réponse précise plutôt que « RTL est supporté ». Traduire en langage RTL et rendre une page RTL sont des tâches différentes, et l’article RTL de Smartling dit que la page doit porter un attribut de 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 à l'intérieur d'une phrase est préservé et ce qui se passe lorsqu'une traduction réorganise les mots. La documentation DCS décrit les chaînes composites et leur comportement en cas de repli.

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 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 langue et un mécanisme d’échange.

Comment le Global Delivery Network de Smartling préserve-t-il la mise en page entre 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 que la traduction crée, le GDN offre aux équipes front-end des contrôles par langue plutôt qu’une refonte automatique. La classe corps smartling-{language code} regroupe CSS dans 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 langues basées sur les caractères et des changements de disposition spécifiques à la localisation. L’en-tête X-Language-Locale permet à l’origine d’afficher les attributs de dirs et lang par langue, Image Replacement échange les images localisées par dossier, et Content Swaps modifie de petites sections de HTML sur un seul endroit. 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 emplacements 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 construite 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 prendre en charge les tests A/B multilingues ?
• Quels sont les outils de conception les plus adaptés aux mises en page RTL et aux flux de travail de localisation ?