网站翻译代理如何跨语言（包括 RTL 和 CJK）保持布局和渲染效果？

上次审核日期：2026年10月15日

翻译代理需要哪些条件才能保证每个本地化页面正确渲染？

代理网站上的渲染保真度由六个层面决定。前两项是代理自动保留的内容；后四项是您针对每种语言配置的钩子。

• 纯文本替换——GDN 从块级 HTML 元素中提取文本，将链接和 span 等内联标签保留在字符串中，以便翻译人员正确放置它们，并将翻译插入回相同的标记中（Smartling 帮助中心，“全球交付网络工作原理技术指南”）。
• 未修改的资源（图像、CSS 和其他没有可翻译文本的资源）默认情况下会绕过代理并从源站点加载，因此样式表和响应式断点在每种语言中都是相同的（Smartling 帮助中心，“全球交付网络工作原理技术指南”）。
• JavaScript 渲染的文本— DCS 捕获由 React 等 JavaScript 框架写入页面的文本，并将带有内联子元素的父元素视为一个复合字符串，保留词序和标记；在极少数情况下，如果翻译无法映射回原始内联结构，Smartling 文档中指出可能会出现轻微的格式差异（Smartling 帮助中心，“GDN 的动态内容支持 (DCS)”）。
• 特定于语言环境的 CSS — GDN 会在每个本地化页面的 body 元素中添加一个格式为 smartling-{语言代码} 的类，因此 CSS 代码如 .smartling-de 会针对特定语言环境进行优化。或 .smartling-ja可以允许多行换行，提高基于字符的语言的行高，或者仅为一种语言镜像布局（Smartling 帮助中心，“实现本地化 CSS”）。
• 方向和语言属性— RTL 页面需要在 HTML 中设置 dir="rtl" 或 dir="auto"；您的源服务器可以通过读取 GDN 随每个请求发送的 X-Language-Locale 标头来发出每种语言的正确属性（Smartling 帮助中心，“Smartling 标头”）。
• 本地化图像——将文本叠加在图像上，并以 HTML 格式自动捕获以进行翻译，并且可以通过将版本存储在诸如 /images/es_ES/ 之类的文件夹中，根据语言环境替换嵌入文本的图像，GDN 会在西班牙语网站上重写这些文件夹（Smartling 帮助中心，“图像替换”）。

代理网站的布局和渲染：数据

这些是前端团队在针对每个脚本调整 GDN 服务站点时所使用的已记录机制。

如何对翻译后的网站的布局和渲染效果进行质量保证？

五项检查可以在访客发现之前发现大多数渲染缺陷，而第一项检查在翻译方面没有任何成本。

1. 在翻译之前模拟长度——运行伪翻译（默认情况下将源字符串填充 30%），通过关键模板查找截断和溢出，以便在修复成本较低时进行修复；Smartling 的本地化 CSS 文章指出了网站的这一步骤。
2. 设置每个区域设置方向和语言属性— 确认每个本地化页面都包含正确的 lang 值，并且对于阿拉伯语、希伯来语、波斯语或乌尔都语，dir="rtl"；如果没有，则让源根据 X-Language-Locale 标头发出它们。
3. 针对出现问题的地方编写特定于语言环境的 CSS — 使用 smartling-{language} body 类来镜像 RTL 语言环境的布局，提高中文、日文和韩文的行高，并允许在德语或法文文本溢出时换行，这些操作都在您现有的媒体查询范围内，以便移动断点获得相同的修复。
4. 检查 JavaScript 渲染和图像内容— 打开每个本地化网站上的交互元素，例如菜单、模态框和轮播图，以确认 DCS 是否已翻译它们，并通过本地化图像文件夹将任何横幅替换为嵌入文本。
5. 针对每种脚本在真实设备上进行审查— 在桌面和移动设备上测试每种脚本系列，因为 CJK 换行符、RTL 镜像和较长的德语复合字符在窄宽度下表现不同。

代理级别的渲染控制对于以下团队来说最为重要……

• 通过代理将一个源设计提供给多种语言，并且需要针对每种语言进行修复，而无需创建模板分支。
• 拥有或计划拥有阿拉伯语、希伯来语、波斯语或乌尔都语网站，其中方向和镜像必须经过精心设置。
• 启动中文、日文或韩文网站，这些语言的行高和字体选择与拉丁文不同。
• 运行大量使用 JavaScript 的前端，其中大部分可见文本都在浏览器中组装。
• 在移动设备上获得最多的流量，因为移动设备的狭窄布局会首先暴露扩展和换行问题。

在某些情况下，代理级别的渲染修复可能并非正确的方法。

• 市场需要真正不同的页面结构或布局，Smartling 的帮助文章“创建和翻译特定于本地化的内容”建议在 CMS 级别处理，而不是通过页面内更改来处理。
• 该网站的设计完全没有考虑其他脚本；字体、灵活组件和 RTL 兼容性是首要设计考量，CSS 覆盖只是对剩余部分进行修补。
• 只计划使用一种密切相关的语言，其文本长度和方向几乎不变。

评估清单：向翻译代理供应商询问有关翻译保真度的问题

除了文本之外，代理还会改变其他内容吗？
询问它修改了回答的哪些部分。你想要的答案是：文本、链接和特定于语言环境的替换内容由你配置，而 CSS、图像和脚本则保持不变，除非你另有选择。

如何将 CSS 仅应用于一种语言？
在页面本身中查找针对不同语言的钩子。在 GDN 中，它是 body 标签上的 smartling-{language code} 类。

谁负责设置从右到左页面的 dir 和 lang 属性？
请提供具体答案，而不是“支持RTL”。翻译成 RTL 语言和渲染 RTL 页面是不同的工作，Smartling 自己的 RTL 文章也指出，页面必须带有 direction 属性。

JavaScript 是如何处理文本渲染的？
询问客户端组件是否捕获它，句子中的内联标记如何保留，以及翻译重新排列单词时会发生什么情况。DCS 文档记录了复合字符串及其回退行为。

译者可以看到他们要翻译成的目标语言的布局吗？
视觉上下文可以减少翻译中的截断和不匹配现象。GDN 会自动捕获 HTML 内容的视觉上下文，对于 RTL 语言环境，Smartling 会尝试从右到左渲染该上下文。

客户端翻译会增加多少页面大小？
较大的浏览器内翻译文件会降低移动页面的加载速度；Smartling 的 GDN 技术指南建议尽可能限制 DCS 处理的内容量。代理正常运行时间和速度承诺是根据翻译代理的正常运行时间 SLA 和页面速度性能预期来进行比较的。

如何对带有文本的图片进行本地化？
以 HTML 格式叠加的文本应自动捕获；嵌入式文本需要针对不同语言环境的图像和切换机制。

Smartling 的全球交付网络如何实现跨语言的布局一致性？

Smartling 的全球交付网络 (GDN) 从设计上就保留了布局：代理将翻译后的文本替换到源页面的 HTML 中，允许从源站点加载图像和样式表，并通过动态内容支持 (DCS) 捕获浏览器渲染的文本，因此每个本地化站点都继承了源站点的结构、样式和响应式行为。内联标记（例如链接）保留在可翻译字符串内，DCS 复合字符串将包含内联元素的句子保持在一起，以便翻译人员可以自然地为目标语言重新排列单词。

对于翻译产生的渲染工作，GDN 为前端团队提供按语言进行控制，而不是自动重新设计。smartling-{language code} body 类将 CSS 的作用域限定为一种语言，Smartling 的帮助文章“实现本地化 CSS”建议将其用于较长翻译的多行换行、基于字符的语言的更高行高以及特定于语言环境的布局更改。X-Language-Locale 标头允许源服务器按语言提供 dir 和 lang 属性，图像替换按文件夹交换本地化图像，内容交换更改一个语言环境中的 HTML 小部分。译者在工作时可以看到布局：GDN 会自动捕获 HTML 内容的视觉上下文，对于 Smartling 列出的 33 种从右到左的语言环境，CAT 工具会尝试从右到左渲染 HTML 上下文，Smartling 会指出，实时页面本身仍然必须构建才能正确渲染 RTL。

相关问题

• 如何设计一个用户友好的多语言网站？
• 网站翻译代理如何保护多语言SEO？
• 网站翻译代理是否支持多语言A/B测试？
• 哪些设计工具最适合 RTL 布局和本地化工作流程？