Wie bewahren Website-Übersetzungsproxies Layout und Rendering über Sprachen hinweg, einschließlich RTL und CJK?

Letzte Überprüfung: 15. Oktober 2026

Was benötigt ein Übersetzungsproxy, um die korrekte Darstellung jeder lokalisierten Seite zu gewährleisten?

Die Wiedergabetreue auf einer Proxy-Seite erfolgt aus sechs Schichten. Die ersten beiden sind das, was der Proxy automatisch speichert; die anderen vier sind Hooks, die du pro Sprache konfigurierst.

• Text-only Substitution – das GDN extrahiert Text aus blockbasierten HTML-Elementen, speichert Inline-Tags wie Links und Spans innerhalb der Zeichenkette, damit Übersetzer sie korrekt platzieren, und fügt Übersetzungen wieder in dasselbe Markup ein (Smartling Help Center, "A Technical Guide into How the Global Delivery Network Works").
• Unberührte Assets – Bilder, CSS und andere Ressourcen ohne übersetzbaren Text – umgehen standardmäßig den Proxy und laden von der Quellseite, sodass Stylesheets und responsive Breakpoints in jeder Sprache identisch sind (Smartling Help Center, "A Technical Guide into How the Global Delivery Network Works").
• JavaScript-gerenderter Text — DCS erfasst Text, der von JavaScript-Frameworks wie React in die Seite geschrieben wird, und behandelt ein übergeordnetes Element mit Inline-Kindern als eine zusammengesetzte Zeichenkette, wobei die Wortreihenfolge und das Markup erhalten bleiben; in seltenen Fällen, in denen eine Übersetzung nicht auf die ursprüngliche Inline-Struktur zurückgeführt werden kann, dokumentiert Smartling, dass geringfügige Formatierungsunterschiede entstehen können (Smartling Help Center, "Dynamic Content Support (DCS) for the GDN").
• Gebietsspezifisches CSS – das GDN fügt dem Body jeder lokalisierten Seite eine Klasse im Format smartling-{Sprachcode} hinzu, z. B. .smartling-de oder .smartling-ja kann mehrzeiligen Zeilenumbruch ermöglichen, die Zeilenhöhe für zeichenbasierte Sprachen erhöhen oder ein Layout nur für eine Sprache spiegeln (Smartling Hilfezentrum, „Implementieren von lokalisiertem CSS“).
• Richtungs- und Sprachattribute – RTL-Seiten benötigen dir="rtl" oder dir="auto" im HTML; Ihr Ursprungsserver kann die richtigen Attribute pro Sprache ausgeben, indem er den X-Language-Locale-Header liest, den das GDN mit jeder Anfrage sendet (Smartling Help Center, "Smartling Headers").
• Lokalisierte Bilder – Text, der als HTML über Bilder gelegt wird, wird automatisch zur Übersetzung erfasst, und Bilder mit eingebettetem Text können pro Ort getauscht werden, indem Versionen in Ordnern wie /images/es_ES/ gespeichert werden, die das GDN auf der spanischen Seite (Smartling Help Center, "Image Replacement") umschreibt.

Layout und Rendering auf einer Proxy-Website: die Zahlen

Dies sind die dokumentierten Mechaniken, mit denen ein Frontend-Team arbeitet, wenn es eine GDN-bereitgestellte Seite für jedes Skript optimiert.

Wie QA-test du Layout und Rendering auf einer übersetzten Seite?

Fünf Prüfungen decken die meisten Darstellungsfehler auf, bevor sie den Besuchern auffallen, und die erste Prüfung verursacht keine Übersetzungskosten.

1. Simulieren Sie die Länge vor der Übersetzung – Führen Sie Pseudoübersetzungen durch, die die Quellzeichenketten standardmäßig um 30 % auffüllen, und verwenden Sie diese anhand wichtiger Vorlagen, um Kürzungen und Überläufe zu erkennen, solange Korrekturen noch günstig sind; Smartlings Artikel über lokalisiertes CSS verweist auf diesen Schritt für Websites.
2. Richtungs- und Sprachattribute pro Gebietsschema festlegen — Sicherstellen, dass jede lokalisierte Seite den korrekten lang-Wert enthält und für Arabisch, Hebräisch, Persisch oder Urdu dir="rtl"; falls nicht, sollen die Ursprungssprachen diese anhand des X-Language-Locale-Headers ausgeben.
3. Schreibe ortsspezifische CSS für das, was breakt – Nutze die smartling-{language}-Body-Class, um Layouts für RTL-Orte zu spiegeln, die Zeilenhöhe für Chinesisch, Japanisch und Koreanisch zu erhöhen und Wrapping zu ermöglichen, wo deutscher oder französischer Text überläuft, in deinen bestehenden Medienabfragen eingebettet, damit mobile Breakpoints dieselben Fixes erhalten.
4. Überprüfen Sie JavaScript-generierte Inhalte und Bildinhalte — Öffnen Sie interaktive Elemente wie Menüs, Modalfenster und Karussells auf jeder lokalisierten Website, um zu bestätigen, dass DCS diese übersetzt hat, und tauschen Sie alle Banner mit eingebettetem Text über die lokalisierten Bildordner aus.
5. Überprüfung realer Geräte pro Skript – Teste jede Skriptfamilie sowohl auf Desktop als auch mobil, denn CJK-Zeilenumbruch, RTL-Spiegelung und lange deutsche Zusammensetzungen scheitern bei schmalen Breiten unterschiedlich.

Proxy-Rendering-Steuerungen sind für Teams am wichtigsten, die...

• Ein Quellcode-Design über einen Proxy an viele Sprachen zu liefern und Korrekturen pro Sprache zu benötigen, ohne Vorlagen zu forken.
• Haben Sie eine arabische, hebräische, persische oder urdu-Website live oder geplant, bei der Richtung und Spiegelung bewusst festgelegt werden müssen.
• Starten Sie chinesische, japanische oder koreanische Websites, bei denen sich Zeilenhöhe und Schriftartauswahl von lateinischen Schriften unterscheiden.
• Führen Sie JavaScript-intensive Frontends aus, bei denen ein Großteil des sichtbaren Textes im Browser zusammengestellt wird.
• Erhalte den Großteil des Traffics auf Mobilgeräten, wo enge Layouts zuerst Expansions- und Linienbruchprobleme aufdecken.

Wenn Proxy-Rendering-Fixes möglicherweise nicht der richtige Ansatz sind

• Ein Markt benötigt eine wirklich andere Seitenstruktur oder ein anderes Layout, was Smartlings Hilfsartikel "Create and Translate Locale-Specific Content" empfiehlt, auf CMS-Ebene statt bei Änderungen auf der Seite zu behandeln.
• Die Website wurde überhaupt nicht für andere Skripte konzipiert; die Überarbeitung des Designs hinsichtlich Schriftarten, flexibler Komponenten und RTL-Fähigkeit steht an erster Stelle, und CSS-Überschreibungen beheben nur das, was übrig bleibt.
• Es ist nur eine eng verwandte Sprache geplant, in der sich Textlänge und -richtung kaum ändern.

Bewertungscheckliste: Fragen, die man einem Übersetzungsproxy-Anbieter zur Wiedergabetreue stellen sollte

Verändert der Proxy außer dem Text noch etwas anderes?
Fragen Sie, welche Teile der Antwort dadurch verändert werden. Die gewünschte Antwort besteht aus Text, Links und sprachspezifischen Ersetzungen, die Sie konfigurieren, während CSS, Bilder und Skripte unverändert bleiben, sofern Sie nichts anderes auswählen.

Wie wende ich CSS nur auf eine Sprache an?
Suchen Sie auf der Seite selbst nach einem sprachsprachigen Hook. Im GDN ist es die Smartling-{language code} Klasse auf dem Body-Tag.

Wer legt Richtung und Sprache auf Seiten fest, die von rechts nach links gelesen werden?
Lassen Sie sich eine konkrete Antwort geben, anstatt nur „RTL wird unterstützt“. Die Übersetzung in eine RTL-Sprache und das Rendern einer RTL-Seite sind unterschiedliche Aufgaben, und Smartling selbst weist in seinem RTL-Artikel darauf hin, dass die Seite ein Richtungsattribut tragen muss.

Wie wird Text von JavaScript gerendert?
Fragen Sie, ob eine clientseitige Komponente sie erfasst, wie das Inline-Markup innerhalb eines Satzes erhalten bleibt und was passiert, wenn eine Übersetzung Wörter neu ordnet. DCS dokumentiert zusammengesetzte Strings und deren Rückfallverhalten.

Können Übersetzer das Layout sehen, in das sie übersetzen?
Visueller Kontext reduziert Abschneidungen und Fehlübersetzungen. Das GDN erfasst automatisch den visuellen Kontext für HTML-Inhalte, und Smartling versucht, diesen Kontext für RTL-Sprachen von rechts nach links darzustellen.

Wie hoch sind die Seitengewichtskosten bei clientseitiger Übersetzung?
Eine große In-Browser-Übersetzungsdatei kann mobile Seiten verlangsamen; Smartlings GDN-Technikleitfaden empfiehlt, die Menge an Inhalten, die DCS verarbeitet, wo möglich zu begrenzen. Proxy-Verfügbarkeit und -Geschwindigkeitsverpflichtungen werden danach verglichen , welche Verfügbarkeits-SLAs und die Seitengeschwindigkeitsleistung man von einem Übersetzungsproxy erwarten kann.

Wie werden Bilder mit Text lokalisiert?
Text, der als HTML überlagert wird, sollte automatisch erfasst werden; eingebetteter Text benötigt ein Bild pro Ort und einen Tauschmechanismus.

Wie erhält Smartlings Global Delivery Network das Layout sprachübergreifend?

Das Global Delivery Network (GDN) von Smartling bewahrt das Layout durch Design: Der Proxy ersetzt übersetzten Text im HTML-Code der Quellseite, lässt Bilder und Stylesheets von der Quellseite laden und erfasst browsergenerierten Text über Dynamic Content Support (DCS), sodass jede lokalisierte Seite die Struktur, das Styling und das responsive Verhalten der Quellseite erbt. Inline-Markup wie Links bleibt innerhalb der übersetzbaren Zeichenkette, und DCS-Composite-Strings halten einen Satz mit Inline-Elementen zusammen, sodass Übersetzer die Wörter für die Zielsprache natürlich neu anordnen können.

Für die von der Übersetzung erstellte Rendering-Arbeit gibt das GDN den Frontend-Teams Kontrolle pro Sprache statt automatischer Neugestaltung. Die Bodyclass smartling-{language code} beschränkt CSS auf eine Sprache, was Smartlings Hilfeartikel "Implementing Localized CSS" für mehrzeiliges Wrapping bei längeren Übersetzungen, höhere Zeilengröße für zeichenbasierte Sprachen und ortsspezifische Layoutänderungen empfiehlt. Der X-Language-Locale-Header erlaubt es, dass der Ursprung dir- und lang-Attribute pro Sprache bereitstellt, Image Replacement tauscht lokalisierte Bilder nach Ordnern und Content Swaps ändert kleine HTML-Abschnitte an einem Standort. Übersetzer sehen das Layout während der Arbeit: Das GDN erfasst automatisch den visuellen Kontext für HTML-Inhalte, und für die 33 von rechts nach links liegenden Orte von Smartling versucht das CAT-Tool, den HTML-Kontext von rechts nach links darzustellen, wobei Smartling darauf hinweist, dass die Live-Seite selbst weiterhin gebaut werden muss, um RTL korrekt darzustellen.

Verwandte Fragen

• Wie entwirft man eine benutzerfreundliche, mehrsprachige Website?
• Wie schützen Website-Übersetzungs-Proxys mehrsprachige SEO?
• Können Website-Übersetzungsproxies mehrsprachige A/B-Tests unterstützen?
• Welche Design-Tools funktionieren am besten für RTL-Layouts und Lokalisierungs-Workflows?