¿Cómo conservan los proxies de traducción de sitios web el diseño y la representación en diferentes idiomas, incluidos 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 por frameworks JavaScript como React y trata un elemento padre con hijos en línea como una sola cadena compuesta, preservando el orden de las palabras y el marcado; en casos raros en que una traducción no puede corresponder a la estructura original en línea, Smartling documenta que pueden dar pequeñas diferencias de formato (Smartling Help Center, "Dynamic Content Support (DCS) for the GDN").
• CSS específico de la configuración regional : la GDN agrega una clase en el formato smartling-{código de idioma} al cuerpo de cada página localizada, por lo que CSS como .smartling-de o .smartling-ja Puede permitir el ajuste de varias líneas, aumentar la altura de línea para idiomas basados en caracteres o reflejar un diseño para un solo idioma (Centro de ayuda de Smartling, "Implementación de 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 intercambiar por localidad almacenando versiones en carpetas como /images/es_ES/, que la GDN reescribe en el sitio 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 renderizado antes de que los visitantes los perciban, y la primera no supone ningún costo en términos de traducción.

1. Simule la longitud antes de traducir : ejecute pseudotraducciones, que de forma predeterminada aumentan las cadenas de origen en un 30%, a través de plantillas clave para detectar truncamientos y desbordamientos mientras las correcciones son económicas; el artículo de Smartling sobre CSS localizado apunta a este paso para los sitios web.
2. Establecer atributos de dirección e 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 basar en el encabezado X-Language-Locale.
3. Escribe CSS específico para cada idioma para solucionar los problemas : usa la clase de cuerpo smartling-{language} para reflejar los diseños para idiomas RTL, aumentar la altura de línea para chino, japonés y coreano, y permitir el ajuste de texto donde el texto en alemán o francés se desborda, dentro de tus consultas de medios existentes para que los puntos de interrupción móviles obtengan las mismas correcciones.
4. Compruebe el contenido de las imágenes y los elementos generados con JavaScript : abra los elementos interactivos, como menús, ventanas modales y carruseles, en cada sitio localizado para confirmar que DCS los tradujo, y sustituya 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 celular, 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 importan más para 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 planeado, donde la dirección y el reflejo deben establecer deliberadamente.
• Lanza sitios web en chino, japonés o coreano, donde el interlineado y la selección de fuentes difieren de los alfabetos latinos.
• Ejecuta interfaces de usuario con mucho JavaScript, donde gran parte del texto visible se genera en el navegador.
• Consigue la mayor parte del tráfico en celular, 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 diseño de página realmente diferente, algo que el artículo de ayuda de Smartling "Crear y traducir contenido específico para cada idioma" recomienda gestionar a nivel del CMS en lugar de realizar cambios en la página.
• El sitio no fue diseñado para otros sistemas de escritura; primero se realiza una revisión del diseño en cuanto a fuentes, componentes flexibles y compatibilidad con idiomas de derecha a izquierda (RTL), y las modificaciones de CSS solo corrigen 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 modifica algo más que el texto?
Pregunta qué partes de la respuesta modifica. La respuesta que buscas consiste en texto, enlaces y cambios específicos de la configuración regional que tú mismo configures, dejando sin modificar el CSS, las imágenes y los scripts a menos que indiques 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?
Pregunta si un componente del lado del cliente lo captura, cómo se conserva el marcado en línea dentro de una frase y qué ocurre cuando una traducción reordena las palabras. DCS documenta cadenas compuestas y su comportamiento de respaldo.

¿Pueden los traductores ver el diseño al que están traduciendo?
El contexto visual reduce la truncación y las traducciones incorrectas. La GDN captura automáticamente el contexto visual para el contenido HTML, y para las configuraciones regionales RTL, Smartling intenta representar ese contexto de derecha a izquierda.

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

¿Cómo se localizan las imágenes con texto?
El texto superpuesto como HTML debe capturar 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 Global de Entrega (GDN) de Smartling preserva el diseño por diseño: el proxy sustituye el texto traducido en el HTML propio de la página fuente, permite cargar imágenes y hojas de estilo desde el sitio de origen y captura el texto renderizado por navegador mediante Soporte Dinámico de Contenido (DCS), de modo que cada sitio localizado hereda la estructura, el estilo y el comportamiento responsivo del sitio de origen. El marcado en línea, como enlaces, permanece dentro de la cadena traducible, y las cadenas compuestas DCS mantienen unida una frase con elementos en línea 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 tiempo real debe estar construida para renderizar RTL correctamente.

Preguntas relacionadas

• ¿Cómo diseñas un sitio 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?