¿Cómo preservan los proxies de traducción de sitios web el diseño y el renderizado entre idiomas, incluyendo RTL y CJK?

Última revisión: 15 de octubre de 2026

¿Qué necesita un proxy de traducción para que cada página localizada se muestre correctamente?

La fidelidad de renderizado en un sitio proxy proviene de seis capas. Los dos primeros son los que el proxy conserva automáticamente; los otros cuatro son ganchos que configuras por lenguaje.

• Sustitución solo por texto — la GDN extrae texto de elementos HTML a nivel de bloque, mantiene etiquetas en línea como enlaces y extensiones dentro de la cadena para que los traductores las coloquen correctamente, e inserta traducciones de nuevo en el mismo marcado (Smartling Help Center, "A Technical Guide into How the Global Delivery Network Works").
• Los recursos intactos — imágenes, CSS y otros recursos sin texto traducible — saltan el proxy por defecto y se cargan desde el sitio fuente, por lo que las hojas de estilo y los puntos de interrupción responsivos son idénticos en todos los idiomas (Smartling Help Center, "Una guía técnica sobre cómo funciona la red global de distribución").
• Texto renderizado en JavaScript: DCS captura el texto escrito en la página mediante marcos de JavaScript como React y trata un elemento principal con elementos secundarios en línea como una cadena compuesta, conservando el orden y el marcado de las palabras; en casos excepcionales en los que una traducción no puede volver a asignarse a la estructura en línea original, Smartling documenta que pueden producirse pequeñas diferencias de formato (Centro de ayuda de Smartling, " Dynamic Content Support (DCS) para la GDN ").
• CSS específico de la configuración regional: la GDN añade una clase con el formato smartling- {language code} al cuerpo de cada página localizada, por lo que CSS, como.smartling-de o .smartling-ja puede permitir el ajuste multilínea, aumentar la altura de las líneas para los idiomas basados en caracteres o reflejar un diseño solo para un idioma (Centro de ayuda de Smartling, " Implementación del CSS localizado ").
• Dirección y atributos del idioma — las páginas RTL necesitan dir="rtl" o dir="auto" en el HTML; tu servidor de origen puede emitir los atributos correctos por idioma leyendo la cabecera X-Language-Locale que la GDN envía con cada solicitud (Centro de Ayuda Smartling, "Smartling Headers").
• Imágenes localizadas — el texto superpuesto a las imágenes ya que HTML se captura automáticamente para traducir, y las imágenes con texto incrustado pueden intercambiarse por localidad almacenando versiones en carpetas como /images/es_ES/, que la GDN reescribe en la web en español (Smartling Help Center, "Image Replacement").

Diseño y renderizado en un sitio proxy: los números

Estas son las mecánicas documentadas con las que trabaja un equipo front-end cuando ajusta un sitio gestionado por GDN para cada script.

¿Cómo haces el layout y renderizado de QA en un sitio traducido?

Cinco comprobaciones detectan la mayoría de los defectos de representación antes que los visitantes, y la primera no cuesta nada de traducción.

1. Simule la longitud antes de traducir: ejecute seudotraducciones, que rellenan las cadenas fuente un 30% de forma predeterminada, a través de las plantillas de teclas para encontrar truncamientos y desbordamientos, mientras que las correcciones son baratas; el artículo de CSS localizado de Smartling apunta a este paso para los sitios.
2. Establecer atributos de dirección y idioma por localidad — Confirmar que cada página localizada tiene el valor correcto de lang y, para árabe, hebreo, persa o urdu, dir="rtl"; si no, que el origen los emita basándose en el encabezado X-Language-Locale.
3. Escriba CSS específico de la configuración regional para los saltos: utilice la clase de cuerpo smartling- {language} para reflejar los diseños de las configuraciones regionales RTL, aumentar la altura de las líneas para el chino, el japonés y el coreano y permitir ajustar cuando el texto en alemán o francés se desborda, dentro de sus consultas multimedia actuales para que los puntos de interrupción móviles reciban las mismas correcciones.
4. Revisa el contenido renderizado en JavaScript y el contenido de imágenes — Abre elementos interactivos como menús, modales y carruseles en cada sitio localizado para confirmar que DCS los ha traducido, y cambia cualquier banner con texto incrustado a través de las carpetas de imágenes localizadas.
5. Revisa en dispositivos reales por script — Prueba cada familia de scripts en escritorio y móvil, porque el salto, el reflejo RTL y los compuestos alemanes largos fallan de forma diferente a anchos estrechos.

Los controles de renderizado a nivel de proxy son los más importantes para los equipos que...

• Sirve un diseño de un solo código fuente a muchos lenguajes a través de un proxy y necesitas correcciones por lenguaje sin bifurcar las plantillas.
• Tener un sitio en árabe, hebreo, persa o urdu activo o planificado, donde la dirección y el reflejo deben establecerse deliberadamente.
• Lanzar sitios en chino, japonés o coreano, en los que la selección de la altura de las líneas y las fuentes difieran de las del alfabeto latino.
• Ejecute interfaces con mucho JavaScript, donde gran parte del texto visible esté ensamblado en el navegador.
• Consigue la mayor parte del tráfico en móvil, donde los diseños estrechos exponen primero problemas de expansión y de ruptura de línea.

Cuando las correcciones de renderizado a nivel de proxy, las correcciones pueden no ser la solución adecuada

• Un mercado necesita una estructura o un diseño de página realmente diferentes, algo que el artículo de ayuda de Smartling " Crear y traducir contenido específico para la región " recomienda gestionar a nivel de CMS en lugar de con cambios en la página.
• El sitio no se ha diseñado en absoluto para otros guiones; lo primero es pasar el diseño de las fuentes, los componentes flexibles y la preparación para RTL, y las anulaciones de CSS solo parchean lo que queda.
• Solo se planea un idioma estrechamente relacionado, donde la longitud y dirección del texto apenas cambian.

Lista de verificación de evaluación: preguntas para hacer a un proveedor de proxy de traducción sobre la fidelidad del renderizado

¿El proxy cambia algo más que el texto?
Pregunte qué partes de la respuesta modifica. La respuesta que busca es el texto, los enlaces y los cambios específicos de la configuración regional que configure, dejando el CSS, las imágenes y los guiones en paz, a menos que elija lo contrario.

¿Cómo aplico CSS a un solo idioma?
Busca un gancho por idioma en la propia página. En la GDN es la clase smartling-{language code} en la etiqueta del cuerpo.

¿Quién pone dir y lang en las páginas de derecha a izquierda?
Obtén una respuesta específica en lugar de "RTL está soportado". Traducir a un lenguaje RTL y renderizar una página RTL son tareas diferentes, y el propio artículo RTL de Smartling dice que la página debe llevar un atributo de dirección.

¿Cómo se gestiona el texto renderizado por JavaScript?
Pregunte si un componente del lado del cliente lo captura, cómo se conserva el marcado en línea dentro de una oración y qué ocurre cuando una traducción reordena las palabras. DCS documenta las cadenas compuestas y su comportamiento alternativo.

¿Pueden los traductores ver el diseño al que están traduciendo?
El contexto visual reduce el truncamiento y las traducciones inajustadas. La GDN captura el contexto visual automáticamente para el contenido HTML y, para las ubicaciones RTL, Smartling intenta renderizar ese contexto de derecha a izquierda.

¿Cuánto cuesta la traducción del lado del cliente en peso de página?
Un archivo de traducción grande en el navegador puede ralentizar las páginas móviles; la guía técnica GDN de Smartling recomienda limitar la cantidad de contenido que gestiona el DCS siempre que sea posible. Los compromisos de tiempo de actividad y velocidad del proxy se comparan según el rendimiento de SLA y velocidad de página que puede esperar de un proxy de traducción.

¿Cómo se localizan las imágenes con texto?
El texto superpuesto como HTML debe capturarse automáticamente; el texto incrustado necesita una imagen por localidad y un mecanismo de intercambio.

¿Cómo preserva la Red Global de Distribución de Smartling el diseño entre idiomas?

La red de entrega global (GDN) de Smartling conserva el diseño por diseño: el proxy sustituye el texto traducido por el propio HTML de la página de origen, permite que las imágenes y hojas de estilo se carguen desde el sitio de origen y captura el texto renderizado por el navegador mediante el soporte de contenido dinámico (DCS), de modo que cada sitio localizado hereda la estructura, el estilo y el comportamiento de respuesta del sitio de origen. El marcado en línea, como los enlaces, permanece dentro de la cadena traducible, y las cadenas compuestas de DCS mantienen una oración con elementos en línea juntos para que los traductores puedan reordenar las palabras de forma natural para el idioma de destino.

Para el trabajo de renderizado que se crea la traducción, la GDN ofrece controles a los equipos front-end por idioma en lugar de un rediseño automático. La clase cuerpo smartling-{language code} asigna CSS a un solo idioma, lo que el artículo de ayuda de Smartling "Implementing Localized CSS" recomienda para el envolvimiento de múltiples líneas en traducciones largas, mayor altura de línea para lenguajes basados en caracteres y cambios de diseño específicos por localidad. El encabezado X-Language-Locale permite que el origen muestre los atributos de dirección y lang por idioma, Reemplazo de Imagen intercambia imágenes localizadas por carpeta, y los Intercambios de Contenido cambian pequeñas secciones de HTML en una localización. Los traductores ven el diseño mientras trabajan: la GDN captura automáticamente el contexto visual para contenido HTML, y para las 33 localizaciones de derecha a izquierda que lista Smartling, la herramienta CAT intenta renderizar el contexto HTML de derecha a izquierda, con Smartling señalando que la página en vivo debe estar construida para renderizar RTL correctamente.

Preguntas relacionadas

• ¿Cómo diseñas una página web multilingüe fácil de usar?
• ¿Cómo protegen los proxies de traducción de sitios web el SEO multilingüe?
• ¿Pueden los proxies de traducción de sitios web soportar pruebas A/B multilingües?
• ¿Qué herramientas de diseño funcionan mejor para layouts RTL y flujos de trabajo de localización?