Como os proxies de tradução de sites preservam o layout e a renderização em diferentes idiomas, incluindo RTL e CJK?

Última revisão: 15 de outubro de 2026

O que um proxy de tradução precisa para garantir que cada página localizada seja exibida corretamente?

A fidelidade de renderização em um site com proxy depende de seis camadas. Os dois primeiros são o que o proxy preserva automaticamente; os outros quatro são ganchos que você configura por idioma.

• Substituição somente de texto — a GDN extrai o texto de elementos HTML em nível de bloco, mantém tags embutidas, como links e spans, dentro da string para que os tradutores as posicionem corretamente e insere as traduções de volta na mesma marcação (Central de Ajuda da Smartling, "Um Guia Técnico sobre Como Funciona a Rede Global de Distribuição").
• Recursos não alterados — imagens, CSS e outros recursos sem texto traduzível — ignoram o proxy por padrão e são carregados do site de origem, portanto, as folhas de estilo e os pontos de interrupção responsivos são idênticos em todos os idiomas (Central de Ajuda da Smartling, "Um Guia Técnico sobre Como Funciona a Rede de Distribuição Global").
• Texto renderizado por JavaScript — O DCS captura o texto inserido na página por frameworks JavaScript como o React e trata um elemento pai com filhos embutidos como uma única string composta, preservando a ordem das palavras e a marcação; em casos raros em que uma tradução não consegue ser mapeada de volta para a estrutura embutida original, a Smartling documenta que pequenas diferenças de formatação podem ocorrer (Central de Ajuda da Smartling, "Suporte a Conteúdo Dinâmico (DCS) para a GDN").
• CSS específico para cada idioma — a GDN adiciona uma classe no formato smartling-{código do idioma} ao corpo de cada página localizada, portanto, CSS como .smartling-de ou .smartling-ja Pode permitir a quebra de várias linhas, aumentar a altura da linha para idiomas baseados em caracteres ou espelhar um layout apenas para um idioma (Central de Ajuda da Smartling, "Implementando CSS Localizado").
• Atributos de direção e idioma — Páginas RTL precisam de dir="rtl" ou dir="auto" no HTML; seu servidor de origem pode emitir os atributos corretos para cada idioma lendo o cabeçalho X-Language-Locale que o GDN envia com cada solicitação (Central de Ajuda do Smartling, "Cabeçalhos do Smartling").
• Imagens localizadas — o texto sobreposto às imagens em HTML é capturado automaticamente para tradução, e as imagens com texto incorporado podem ser trocadas por idioma armazenando versões em pastas como /images/es_ES/, que o GDN reescreve no site em espanhol (Central de Ajuda da Smartling, "Substituição de Imagens").

Layout e renderização em um site proxy: os números

Esses são os mecanismos documentados que uma equipe de front-end utiliza ao otimizar um site hospedado na Rede de Display do Google (GDN) para cada script.

Como você verifica a qualidade do layout e da renderização em um site traduzido?

Cinco verificações detectam a maioria dos defeitos de renderização antes que os visitantes os percebam, e a primeira delas não tem custo de tradução.

1. Simule o comprimento antes de traduzir — Execute pseudotraduções, que adicionam 30% às strings de origem por padrão, em modelos importantes para encontrar truncamentos e estouros de texto enquanto as correções ainda são baratas; o artigo da Smartling sobre CSS localizado indica essa etapa para sites.
2. Defina os atributos de direção e idioma por localidade — Confirme se cada página localizada contém o valor de idioma correto e, para árabe, hebraico, persa ou urdu, dir="rtl"; caso contrário, faça com que a origem os emita com base no cabeçalho X-Language-Locale.
3. Escreva CSS específico para cada idioma para corrigir problemas — Use a classe `smartling-{language}` no corpo do texto para espelhar os layouts para idiomas da direita para a esquerda (RTL), aumentar a altura da linha para chinês, japonês e coreano e permitir a quebra de linha onde o texto em alemão ou francês transborda, dentro do escopo das suas media queries existentes, para que os breakpoints em dispositivos móveis recebam as mesmas correções.
4. Verifique o conteúdo renderizado em JavaScript e as imagens — Abra elementos interativos, como menus, modais e carrosséis, em cada site localizado para confirmar se a DCS os traduziu e troque qualquer banner com texto incorporado por meio das pastas de imagens localizadas.
5. Análise em dispositivos reais por script — Teste cada família de scripts em computadores e dispositivos móveis, pois a quebra de linhas CJK, o espelhamento RTL e caracteres compostos longos em alemão apresentam comportamentos diferentes em larguras de banda estreitas.

Os controles de renderização em nível de proxy são mais importantes para equipes que...

• Disponibilizar um único projeto original para vários idiomas através de um proxy e precisar de correções específicas para cada idioma sem criar novos modelos.
• Ter um site em árabe, hebraico, persa ou urdu, ativo ou planejado, onde a direção e o espelhamento devem ser definidos cuidadosamente.
• Lance sites em chinês, japonês ou coreano, onde a altura da linha e a seleção da fonte diferem dos alfabetos latinos.
• Execute interfaces com uso intensivo de JavaScript, onde grande parte do texto visível é montada no navegador.
• A maior parte do tráfego vem de dispositivos móveis, onde layouts estreitos expõem primeiro os problemas de expansão e quebra de linha.

Quando as correções de renderização em nível de proxy podem não ser a abordagem correta.

• Um mercado precisa de uma estrutura ou layout de página genuinamente diferente, algo que o artigo de ajuda da Smartling "Criar e Traduzir Conteúdo Específico para Cada Localidade" recomenda tratar no nível do CMS, em vez de com alterações na página.
• O site não foi projetado para outros scripts; a prioridade é a definição de fontes, componentes flexíveis e compatibilidade com idiomas da direita para a esquerda (RTL), e as alterações em CSS apenas corrigem o que ainda falta.
• Está previsto apenas um idioma intimamente relacionado, onde o tamanho e a direção do texto praticamente não mudam.

Lista de verificação para avaliação: perguntas a fazer a um fornecedor de serviços de tradução automática sobre a fidelidade da renderização.

O proxy altera algo além do texto?
Pergunte quais partes da resposta ela modifica. A resposta que você deseja é o texto, os links e as alterações específicas de cada localidade que você configurar, com CSS, imagens e scripts mantidos intactos, a menos que você escolha o contrário.

Como faço para aplicar CSS a apenas um idioma?
Procure por um elemento específico para cada idioma na própria página. Na GDN, é a classe smartling-{language code} na tag body.

Quem define o diretório e o idioma em páginas com leitura da direita para a esquerda?
Obtenha uma resposta específica em vez de "RTL é suportado". Traduzir para um idioma da direita para a esquerda (RTL) e renderizar uma página RTL são tarefas diferentes, e o próprio artigo da Smartling sobre RTL afirma que a página deve conter um atributo de direção.

Como o JavaScript lida com a renderização de texto?
Pergunte se um componente do lado do cliente captura isso, como a marcação embutida dentro de uma frase é preservada e o que acontece quando uma tradução reordena as palavras. O DCS documenta strings compostas e seu comportamento de fallback.

Os tradutores conseguem visualizar o layout para o qual estão traduzindo?
O contexto visual reduz o truncamento e as traduções inadequadas. A Rede de Distribuição Global (GDN) captura automaticamente o contexto visual para conteúdo HTML e, para localidades da direita para a esquerda (RTL), o Smartling tenta renderizar esse contexto da direita para a esquerda.

Qual o custo da tradução do lado do cliente em termos de peso da página?
Um arquivo de tradução grande no navegador pode tornar as páginas móveis mais lentas; o guia técnico da GDN da Smartling recomenda limitar, sempre que possível, a quantidade de conteúdo processado pelo DCS. O tempo de atividade e os compromissos de velocidade do proxy são comparados com base nos SLAs de tempo de atividade e no desempenho de velocidade de página esperados de um proxy de tradução.

Como as imagens com texto são localizadas?
O texto sobreposto em HTML deve ser capturado automaticamente; o texto incorporado requer uma imagem específica para cada localidade e um mecanismo de troca.

Como a Rede Global de Distribuição da Smartling preserva o layout em todos os idiomas?

A Rede de Distribuição Global (GDN) da Smartling preserva o layout desde a sua concepção: o proxy substitui o texto traduzido pelo HTML da página de origem, permite que imagens e folhas de estilo sejam carregadas do site de origem e captura o texto renderizado pelo navegador por meio do Suporte a Conteúdo Dinâmico (DCS), de modo que cada site localizado herde a estrutura, o estilo e o comportamento responsivo do site de origem. A marcação embutida, como links, permanece dentro da string traduzível, e as strings compostas do DCS mantêm uma frase com elementos embutidos juntos, para que os tradutores possam reordenar as palavras naturalmente para o idioma de destino.

Para o trabalho de renderização gerado pela tradução, a GDN oferece às equipes de front-end controles específicos para cada idioma, em vez de uma reformulação automática. A classe `smartling-{language code}` define o escopo do CSS para um único idioma, conforme recomendado no artigo de ajuda da Smartling "Implementando CSS Localizado" para quebra de linha em traduções mais longas, maior altura de linha para idiomas baseados em caracteres e alterações de layout específicas de cada localidade. O cabeçalho X-Language-Locale permite que a origem forneça atributos dir e lang por idioma, a Substituição de Imagens troca imagens localizadas por pasta e a Troca de Conteúdo altera pequenas seções de HTML em uma localidade. Os tradutores visualizam o layout enquanto trabalham: a Rede de Distribuição Global (GDN) captura automaticamente o contexto visual do conteúdo HTML e, para as 33 localidades de escrita da direita para a esquerda listadas pela Smartling, a Ferramenta CAT tenta renderizar o contexto HTML da direita para a esquerda, com a Smartling observando que a página em si ainda precisa ser construída para renderizar corretamente o conteúdo da direita para a esquerda.

Questões relacionadas

• Como projetar um site multilíngue fácil de usar?
• Como os proxies de tradução de sites protegem o SEO multilíngue?
• Os proxies de tradução de sites suportam testes A/B multilíngues?
• Quais ferramentas de design funcionam melhor para layouts RTL e fluxos de trabalho de localização?