Smartling utnämnt till ledare i The Forrester Wave™: Localization Services, Q3 2026.
Smartling utsedd till ledare i The Forrester Wave™

Hur bevarar proxyer för webbplatsöversättning layout och rendering över språk, inklusive RTL och CJK?

En proxy för webbplatsöversättning bevarar layouten genom att bara ersätta texten på varje sida och lämna webbplatsens HTML-struktur, CSS, bilder och skript som de är, så varje språk ärver källdesignen. Smartlings Global Delivery Network (GDN) översätter innehåll under överföring, låter bilder och formatmallar kringgå proxyn som standard och fångar text som JavaScript återger i webbläsaren via Dynamic Content Support (DCS). Vad en proxy inte gör på egen hand är omdesign för ett skript: höger-till-vänster-spegling och CJK-typografi behöver fortfarande lokalspecifik CSS och korrekta lang- och dir-attribut; GDN stöder CSS med en språkklass som den lägger till på varje lokaliserad sida och skickar ett språkhuvud som din server kan använda för att ställa in attributen.

Senast granskad: 15 oktober 2026

Varför återges översatta webbplatser annorlunda än källwebbplatsen?

Översatta webbplatser återges annorlunda eftersom översättning ändrar textens längd, riktning och manus medan layouten byggdes och testades för ett språk. Fem orsaker står för de flesta renderingsfel på en proxy-webbplats.

  • Textlängden ändras, layouten gör det inte. Översättningar löper vanligtvis längre än engelsk källtext och CJK-översättningar kortare, så knappar med fast bredd avkortas och rutnät ser glesa ut; expansionsförhållandena per språk beskrivs i hur man utform ar en användarvänlig flerspråkig webbplats.
  • Riktning kommer från markup och CSS, inte från översättning. Smartlings hjälpartikel " Höger-till-vänster (RTL) Språk " anger att en sida som visas i en webbläsare behöver dir= " rtl " eller dir= " auto " för att justera korrekt. En proxy som byter arabisk text till en sida från vänster till höger producerar ord från höger till vänster i en layout från vänster till höger.
  • CJK-skript behöver olika typografi. Teckenbaserade språk kan behöva mer radhöjd än källan, och attributet lang kan påverka vilket teckensnitt en webbläsare väljer för Han-tecken som delas av kinesiska och japanska, så en sida som serveras med källspråkskoden kan återge fel teckenstil.
  • Text anländer efter att sidan har laddats. Menyer, modaler och produkträt byggda av JavaScript-ramverk samlar sin text i webbläsaren, där en proxy som arbetar med serversvaret aldrig ser den om inte en komponent på klientsidan fångar den.
  • Texten lever inuti bilder. En rubrik som plattas ut till en bannerbild kan inte översättas av någon proxy; den behöver en lokaliserad bild per marknad.

Vad behöver en översättningsproxy för att varje lokaliserad sida ska återges korrekt?

Återgivningsfidelitet på en proxy-webbplats kommer från sex lager. De två första är vad proxyn bevarar automatiskt; de andra fyra är krokar som du konfigurerar per språk.

  • Endast textersättning — GDN extraherar text från HTML-element på blocknivå, behåller inbyggda taggar som länkar och spans inuti strängen så att översättare placerar dem korrekt och infogar översättningar tillbaka i samma markering (Smartling Help Center, " A Technical Guide to How the Global Delivery Network Works ").
  • Orörda tillgångar — bilder, CSS och andra resurser utan översättningsbar text kringgår proxyn som standard och laddas från källwebbplatsen, så formatmallar och responsiva brytpunkter är identiska på alla språk (Smartling Help Center, " En teknisk guide till hur det globala leveransnätverket fungerar ").
  • JavaScript-renderad text — DCS fångar text som skrivs in på sidan av JavaScript-ramverk som React och behandlar ett överordnat element med inbyggda underordnade som en sammansatt sträng, bevarar ordordning och markering; i sällsynta fall där en översättning inte kan kartläggas tillbaka till den ursprungliga inline-strukturen dokumenterar Smartling att mindre formateringsskillnader kan resultera i (Smartling Help Center, " Dynamic Content Support (DCS) för GDN ").
  • Lok@@ alspecifik CSS - GDN lägger till en klass i formatet smartling- {language code} till kroppen på varje lokaliserad sida, så CSS som .smartling- de eller.smartling-ja kan tillåta omslagning med flera rader, höja radhöjden för teckenbaserade språk eller spegla en layout för endast ett språk (Smartling Help Center, " Implementering av lokaliserad CSS ").
  • Riktning och språkattribut — RTL-sidor behöver dir= " rtl " eller dir= " auto " i HTML-koden; ursprungsservern kan avge rätt attribut per språk genom att läsa X-Language-Locale-rubriken som GDN skickar med varje begäran (Smartling Help Center, " Smartling Headers ").
  • Lokaliserade bilder — text överlagrad på bilder som HTML fångas automatiskt för översättning, och bilder med inbäddad text kan bytas per språk genom att lagra versioner i mappar som /images/es_es/, som GDN skriver om på den spanska webbplatsen (Smartling Help Center, " Image Replacement ").

Layout och rendering på en proxy-webbplats: siffrorna

Det här är den dokumenterade mekaniken som ett front-end-team arbetar med när det ställer in en GDN-serverad webbplats för varje skript.

MetriskFigurkälla
Språkklass på varje lokaliserad sidasmartling- {språkkod} på kroppstaggen, till exempel smartling-frSmartling Hjälpcenter, " Implementering av lokaliserad CSS "
Höger-till-vänster-språk Smartling-listor för översättning33 lokal-ID på arabiska, persiska, hebreiska, kurdiska (sorani), panjabi (shahmukhiskrift), pashto, uiguriska, urdu och jiddischSmartling Hjälpcenter, " Höger-till-vänster (RTL) språk "
Riktningsattribut som en RTL-webbsida behöverdir= " rtl " eller dir= " auto " på html-elementetSmartling Hjälpcenter, " Höger-till-vänster (RTL) språk "
Standardökning av pseudoöversättningslängden30%, med anpassad inflation på 50% till 100% där den stödsSmartling Hjälpcenter, " Pseudoöversättningar "
Lokaliserad bildmappkonvention/images/ {lang_country}/, till exempel /images/es_ES/banner.jpgSmartling Hjälpcenter, " Bildersättning "
Genomsnittlig proxybehandlingstid per lokaliserad sidförfråganCirka 40 millisekunderSmartling Help Center, " En teknisk guide till hur det globala leveransnätverket fungerar "

Hur gör du QA-layout och rendering på en översatt webbplats?

Fem kontroller fångar de flesta renderingsfel innan besökare gör det, och den första kostar ingenting i översättning.

  1. Simulera längd innan översättning — Kör pseudoöversättningar, som paddar källsträngar med 30% som standard, genom nyckelmallar för att hitta trunkering och överflöd medan korrigeringar är billiga; Smartlings lokaliserade CSS-artikel pekar på detta steg för webbplatser.
  2. Ange riktnings- och språkattribut per språk — Bekräfta att varje lokaliserad sida har rätt langvärde och, för arabiska, hebreiska, persiska eller urdu, dir= " rtl "; om inte, låt ursprunget avge dem baserat på X-Language-Locale-rubriken.
  3. Skriv lokal specifik CSS för vad som bry ts — Använd kroppsklassen smartling- {language} för att spegla layouter för RTL-språk, höja radhöjden för kinesiska, japanska och koreanska och tillåta omslagning där tysk eller fransk text flyter över, med omfattning inuti dina befintliga mediefrågor så att mobila brytpunkter får samma korrigeringar.
  4. Kontrollera JavaScript-renderat innehåll och bildinnehåll - Öppna interaktiva element som menyer, modaler och karuseller på varje lokaliserad webbplats för att bekräfta att DCS översatte dem, och byt valfri banner med inbäddad text genom de lokaliserade bildmapparna.
  5. Granska på riktiga enheter per skript — Testa varje skriptfamilj på dator och mobil, eftersom CJK-radbrytning, RTL-spegling och långa tyska sammansättningar misslyckas olika vid smala bredder.

Renderingskontroller på proxynivå är viktigast för team som...

  • Servera en källdesign till många språk via en proxy och behöver korrigeringar per språk utan gaffelmallar.
  • Ha en arabisk, hebreisk, persisk eller urdu-webbplats live eller planerad, där riktning och spegling måste ställas in medvetet.
  • Starta kinesiska, japanska eller koreanska webbplatser, där radhöjd och teckensnittsval skiljer sig från latinska skript.
  • Kör JavaScript-tunga frontendar, där mycket av den synliga texten samlas i webbläsaren.
  • Få mest trafik på mobilen, där smala layouter avslöjar expansions- och linjebrytningsproblem först.

När renderingsfixar på proxynivå kanske inte är rätt tillvägagångssätt

  • En marknad behöver en helt annan sidstruktur eller layout, vilket Smartlings hjälportikel " Skapa och översätt lokalspecifikt innehåll " rekommenderar att man hanterar på CMS-nivå snarare än med ändringar på sidan.
  • Webbplatsen har inte utformats för andra skript alls; ett designpass på teckensnitt, flexibla komponenter och RTL-beredskap kommer först, och CSS åsidosätter bara patch vad som återstår.
  • Endast ett närbesläktat språk planeras, där textens längd och riktning knappt ändras.

Utvärderingschecklista: frågor att ställa till en proxyleverantör för översättning om återgivning av trovärdighet

Ändrar proxyn något förutom text?
Fråga vilka delar av svaret det ändrar. Svaret du vill ha är text, länkar och lokalspecifika byten du konfigurerar, med CSS, bilder och skript kvar om du inte väljer något annat.

Hur tillämpar jag CSS på bara ett språk?
Leta efter en krok per språk på själva sidan. I GDN är det klassen smartling- {language code} på body-taggen.

Vem ställer in dir och lang på sidor från höger till vänster?
Få ett specifikt svar istället för " RTL stöds ". Att översätta till ett RTL-språk och återge en RTL-sida är olika jobb, och Smartlings egen RTL-artikel säger att sidan måste ha ett riktningsattribut.

Hur hanteras text av JavaScript?
Fråga om en komponent på klientsidan fångar den, hur inbyggd markering i en mening bevaras och vad som händer när en översättning ordnar om ord. DCS dokumenterar sammansatta strängar och dess fallback-beteende.

Kan översättare se layouten de översätter till?
Visuellt sammanhang minskar trunkering och felanpassade översättningar. GDN fångar automatiskt visuellt sammanhang för HTML-innehåll, och för RTL-lokaliseringar försöker Smartling återge det sammanhanget från höger till vänster.

Vad kostar översättning på klientsidan i sidvikt?
En stor översättningsfil i webbläsaren kan sakta ner mobila sidor; Smartlings tekniska guide för GDN rekommenderar att du begränsar mängden innehåll som hanteras av DCS där det är möjligt. Proxys drifttid och hastighetsåtaganden jämförs med vilka serviceavtal för drifttid och sidhastighetsprestanda som kan förväntas av en över sättningsproxy.

Hur lokaliseras bilder med text?
Text överlagrad som HTML ska fångas automatiskt; inbäddad text behöver en bild per lokal och en swap-mekanism.

Hur bevarar Smartlings Global Delivery Network layout över olika språk?

Smartlings Global Delivery Network (GDN) bevarar layout efter design: proxyn ersätter översatt text till källsidans egen HTML, låter bilder och formatmallar laddas från källwebbplatsen och fångar webbläsarrenderad text via Dynamic Content Support (DCS), så att varje lokaliserad webbplats ärver källwebbplatsens struktur, styling och responsiva beteende. Inline-markering som länkar förblir inuti den översättningsbara strängen, och DCS-sammansatta strängar håller en mening med inline-element tillsammans så att översättare kan ordna ord naturligt för målspråket.

För det återgivningsarbete som översättningen skapar ger GDN frontend-team kontroller per språk snarare än automatisk omdesign. Kroppsklassen smartling- {language code} tillämpar CSS till ett språk, vilket Smartlings hjälportikel " Implementering av Localized CSS " rekommenderar för omslagning med flera rader på längre översättningar, högre radhöjd för teckenbaserade språk och lokalspecifika layoutändringar. Med X-Language-Locale-rubriken kan origo betjäna dir- och lang-attribut per språk, Image Replacement byter lokaliserade bilder efter mapp, och Content Swaps ändrar små delar av HTML på ett språk. Översättare ser layouten medan de arbetar: GDN fångar automatiskt visuellt sammanhang för HTML-innehåll, och för de 33 höger-till-vänster-lokalerna Smartling listar försöker CAT-verktyget återge HTML-kontext från höger till vänster, med Smartling som noterar att själva live-sidan fortfarande måste byggas för att återge RTL korrekt.

Är du redo att se Smartling i aktion?

Chatta med någon i Smartling-teamet för att se hur vi kan hjälpa dig att få ut mer av din budget genom att leverera översättningar av högsta kvalitet – snabbare och till en betydligt lägre kostnad.