Come fanno i proxy di traduzione dei siti web a preservare il layout e il rendering tra le lingue, inclusi RTL e CJK?

Ultimo aggiornamento: 15 ottobre 2026

Di cosa ha bisogno un proxy di traduzione per garantire la corretta visualizzazione di ogni pagina localizzata?

La fedeltà di rendering su un sito proxy deriva da sei livelli. I primi due sono ciò che il proxy conserva automaticamente; gli altri quattro sono hook che configuri per linguaggio.

• Sostituzione solo testuale — il GDN estrae testo da elementi HTML a livello di blocchi, mantiene i tag inline come link e span all'interno della stringa affinché i traduttori li inseriscano correttamente, e inserisce le traduzioni nello stesso markup (Smartling Help Center, "Una guida tecnica su come funziona la rete globale di distribuzione").
• Le risorse non modificate , come immagini, CSS e altre risorse senza testo traducibile, bypassano il proxy per impostazione predefinita e vengono caricate dal sito sorgente, in modo che i fogli di stile e i breakpoint responsivi siano identici in ogni lingua (Smartling Help Center, "A Technical Guide into How the Global Delivery Network Works").
• Testo renderizzato tramite JavaScript : DCS cattura il testo scritto nella pagina da framework JavaScript come React e tratta un elemento padre con elementi figli inline come un'unica stringa composita, preservando l'ordine delle parole e il markup; nei rari casi in cui una traduzione non può essere mappata sulla struttura inline originale, Smartling documenta che possono risultare lievi differenze di formattazione (Smartling Help Center, "Dynamic Content Support (DCS) for the GDN").
• CSS specifico per la lingua : il GDN aggiunge una classe nel formato smartling-{codice lingua} al corpo di ogni pagina localizzata, quindi CSS come .smartling-de o .smartling-ja può consentire l'a capo su più righe, aumentare l'altezza della riga per le lingue basate su caratteri o replicare un layout solo per una lingua (Centro assistenza Smartling, "Implementazione del CSS localizzato").
• Direzione e attributi linguistici — le pagine RTL necessitano di dir="rtl" o dir="auto" nell'HTML; il tuo server di origine può emettere gli attributi corretti per lingua leggendo l'intestazione X-Language-Locale che GDN invia con ogni richiesta (Smartling Help Center, "Smartling Headers").
• Immagini localizzate — il testo sovrapposto alle immagini mentre l'HTML viene catturato automaticamente per la traduzione, e le immagini con testo incorporato possono essere scambiate per località memorizzando le versioni in cartelle come /images/es_ES/, che il GDN riscrive sul sito spagnolo (Smartling Help Center, "Image Replacement").

Layout e rendering su un sito proxy: i numeri

Queste sono le meccaniche documentate con cui un team front-end lavora quando ottimizza un sito GDN per ogni script.

Come si fa il layout e il rendering QA su un sito tradetto?

Cinque controlli individuano la maggior parte dei difetti di rendering prima che lo facciano i visitatori, e il primo non costa nulla in termini di traduzione.

1. Simula la lunghezza prima di tradurre : esegui delle pseudo-traduzioni, che per impostazione predefinita aggiungono un padding del 30% alle stringhe sorgente, attraverso i modelli chiave per individuare troncamenti e overflow finché le correzioni sono economiche; l'articolo di Smartling sul CSS localizzato suggerisce questo passaggio per i siti.
2. Imposta la direzione e gli attributi della lingua per località — Conferma che ogni pagina localizzata abbia il valore corretto di lang e, per arabo, ebraico, persiano o urdu, dir="rtl"; in caso contrario, fai in modo che l'origine li emetta in base all'intestazione X-Language-Locale.
3. Scrivi CSS specifico per la lingua per gestire gli errori : usa la classe body smartling-{language} per replicare i layout per le lingue RTL, aumentare l'altezza delle righe per cinese, giapponese e coreano e consentire l'a capo automatico quando il testo tedesco o francese fuoriesce, il tutto all'interno delle tue media query esistenti in modo che i breakpoint per dispositivi mobili ricevano le stesse correzioni.
4. Verifica i contenuti renderizzati tramite JavaScript e le immagini : apri gli elementi interattivi come menu, finestre modali e caroselli su ogni sito localizzato per confermare che DCS li abbia tradotti e sostituisci eventuali banner con testo incorporato tramite le cartelle delle immagini localizzate.
5. Revisione su dispositivi reali per script — Testa ogni famiglia di script su desktop e mobile, perché la line breaking CJK, il mirroring RTL e i compound tedeschi lunghi falliscono in modo diverso a larghezze ridotte.

I controlli di rendering a livello proxy sono più importanti per i team che...

• Serve un unico design sorgente a molti linguaggi tramite un proxy e necessita di correzioni per linguaggio senza forkare template.
• Avere un sito arabo, ebraico, persiano o urdu attivo o pianificato, dove direzione e mirroring devono essere impostate deliberatamente.
• Avvia siti web in cinese, giapponese o coreano, dove l'interlinea e la scelta dei caratteri differiscono dagli alfabeti latini.
• Eseguire interfacce utente con un ampio utilizzo di JavaScript, dove gran parte del testo visibile viene assemblato direttamente nel browser.
• Ottieni la maggior parte del traffico su mobile, dove i layout stretti mettono prima in evidenza problemi di espansione e interruzione delle linee.

Quando le correzioni di rendering a livello di proxy potrebbero non essere l'approccio giusto

• Un mercato ha bisogno di una struttura o di un layout di pagina davvero diverso, che l'articolo di aiuto di Smartling "Create and Translate Local-Specific Content" raccomanda di gestire a livello CMS piuttosto che con modifiche interne alla pagina.
• Il sito non è stato progettato affatto per altri script; prima viene un pass di design su font, componenti flessibili e prontezza RTL, e gli override CSS aggiornano solo ciò che resta.
• È prevista una sola lingua strettamente correlata, dove la lunghezza e la direzione del testo cambiano poco.

Checklist per la valutazione: domande da porre a un fornitore di proxy di traduzione riguardo alla fedeltà del rendering

Il proxy modifica qualcosa oltre al testo?
Chiedi quali parti della risposta modifica. La risposta che desideri è testo, link e sostituzioni specifiche per la lingua che configuri, mentre CSS, immagini e script rimangono invariati a meno che tu non scelga diversamente.

Come posso applicare il CSS a una sola lingua?
Cerca un aggancio per lingua nella pagina stessa. Nel GDN è la classe smartling-{language code} sul tag corpo.

Chi imposta dir e lang sulle pagine da destra a sinistra?
Richiedi una risposta specifica, non solo "RTL è supportato". Tradurre in una lingua RTL e visualizzare una pagina RTL sono due operazioni diverse, e l'articolo di Smartling sull'RTL afferma che la pagina deve avere un attributo di direzione.

Come viene gestito il rendering del testo tramite JavaScript?
Chiedi se un componente lato client lo cattura, come viene preservato il markup in linea all'interno di una frase e cosa succede quando una traduzione riordina le parole. DCS documenta le stringhe composite e il loro comportamento di riserva.

I traduttori possono vedere il layout in cui stanno traducendo?
Il contesto visivo riduce le troncature e le traduzioni inadeguate. Il GDN acquisisce automaticamente il contesto visivo per i contenuti HTML e, per le impostazioni locali RTL, Smartling tenta di visualizzare tale contesto da destra a sinistra.

Qual è il costo in termini di peso della pagina per la traduzione lato client?
Un file di traduzione di grandi dimensioni nel browser può rallentare le pagine mobili; la guida tecnica GDN di Smartling consiglia di limitare, ove possibile, la quantità di contenuti gestiti da DCS. I tempi di attività e le velocità garantite dai proxy vengono confrontati in base agli SLA di uptime e alle prestazioni di velocità di pagina che ci si può aspettare da un proxy di traduzione.

Come vengono localizzate le immagini con testo?
Il testo sovraposto come HTML dovrebbe essere catturato automaticamente; il testo incorporato necessita di un'immagine per località e di un meccanismo di scambio.

Come fa la Global Delivery Network di Smartling a preservare il layout tra le lingue?

La Global Delivery Network (GDN) di Smartling preserva il layout per design: il proxy sostituisce il testo tradotto nell'HTML della pagina sorgente, permette di caricare immagini e fogli di stile dal sito sorgente e cattura il testo renderizzato dal browser tramite Dynamic Content Support (DCS), così che ogni sito localizzato eredita la struttura, lo stile e il comportamento reattivo del sito sorgente. Il markup inline come i link rimane all'interno della stringa tradulibile, mentre le stringhe composite DCS mantengono unita una frase con elementi inline così i traduttori possono riordinare le parole in modo naturale per la lingua di destinazione.

Per il lavoro di rendering che la traduzione crea, la GDN offre ai team front-end controlli per lingua invece di un redesign automatico. La classe corpo smartling-{language code} espella CSS in una sola lingua, come raccomanda l'articolo di aiuto di Smartling "Implementing Localized CSS" per il wrapping multi-riga su traduzioni più lunghe, un'altezza di riga più alta per lingue basate su caratteri e modifiche specifiche del layout per località. L'intestazione X-Language-Locale permette all'origine di servire gli attributi di dir e lang per ogni lingua, Image Replacement scambia immagini localizzate per cartella, e Content Swaps cambiano piccole sezioni di HTML su una località. I traduttori vedono il layout mentre lavorano: il GDN cattura automaticamente il contesto visivo per i contenuti HTML, e per le 33 località da destra a sinistra che Smartling elenca, lo strumento CAT cerca di renderizzare il contesto HTML da destra a sinistra, con Smartling che osserva che la pagina live stessa deve comunque essere costruita per renderizzare correttamente RTL.

Domande correlate

• Come si progetta un sito web multilingue facile da usare?
• Come fanno i proxy di traduzione dei siti web a proteggere la SEO multilingue?
• I proxy di traduzione dei siti web possono supportare test A/B multilingue?
• Quali strumenti di progettazione sono più adatti per layout RTL e flussi di lavoro di localizzazione?