网站翻译

本地化时如何修复设计错误：可视化编辑你的翻译内容

作者

肖恩·奥黑尔

审阅人

更新于

2023年6月19日

2025年5月26日

对于任何面向国际受众的企业或组织而言，网站本地化都是一项伟大的举措。它不仅能让访客更容易访问您的网站，还能提高网站的个性化水平--随着各行各业的竞争日益激烈，这一点变得越来越重要。

当然，说到自己网站的本地化，翻译在其中发挥着巨大作用。然而，通过将一种语言翻译成另一种语言来实现网站本地化虽然是必要的步骤，但却有可能造成设计问题。

这些问题往往源于语言在特定句子中单词所占空间的不同。因此，可能会出现字符串断开和文本重叠等问题，这对于试图吸引新的国际客户的企业来说是非常不理想的。

幸运的是，Weglot直观的可视化编辑工具，此类设计问题都能轻松解决。因此，本文将带您Weglot visual editor 如何帮助您修复网站翻译过程中可能出现的各种意外设计问题。

visual editor优势是什么？

visual editor 允许您在网站实时预览中查看并编辑翻译内容。这使您能够精确预览网站上翻译内容的呈现效果，并评估翻译内容是否会对网站设计造成任何影响。

当文本从一种语言翻译成另一种语言时，翻译文本的长度很可能与原文不同。根据W3.org，中文和英文的文本一般都比较紧凑，因此从一种语言翻译成另一种语言可能会导致文本长度上的巨大差异。

事实上，IBM在其 "全球解决方案设计指南 "中指出，将长度超过 70 个字符的文本从英语翻译成其他欧洲语言时，平均扩展率为 130%。

这意味着，现在翻译后的网站前台文字空间将比原来的网站多 30%。与此相关的问题可能包括以下方面：

重叠文本
折叠字符串
与网站整体设计不对称

为进一步说明visual editor 如何解决此类问题及其具体形态，我们将深入解析Weglot visual editor 并展示它如何帮助您预览不同语言版本的设计效果。

Weglot Visual Editor

要访问visual editor 您的Weglot ，进入“翻译”选项卡，然后点击visual editor选项卡。

然后，您将进入网站的实时预览。虽然最初您是在主页上，但您可以通过点击不同的页面访问网站上的任何 URL，就像真的在您的实时网站上一样。

在此阶段，您可清晰查看网站在已添加的各语言版本中的呈现效果。通过语言切换器在不同语言间切换，即可即时发现并修正任何设计错误。您对翻译内容的任何编辑都将实时更新。

值得记住的是，如果您还在编辑阶段，您可能还不想在翻译上按 "启用 "键。因此，请确保关闭翻译列表中的 "公开 "选项，以确保除您的团队外，其他人无法访问您的多语言网站。(注：只需在 URL 末尾添加 ?weglot 即可看到翻译上线）。

在下面的示例中，我们添加了法语和西班牙语。在两种语言之间切换时，您可以立即看到每种语言在网站设计中所占空间的不同，尤其是在网站标题中。

您很可能花费了数个小时来创建您的原始语言网站，而网站的设计对于您的品牌/公司如何被人们所认知起着巨大的作用。正因如此，要想获得与原始网站同样令人印象深刻的效果，重要的一步就是要了解您添加的新语言将如何与设计相匹配。

有趣的是，在上面的示例中，主标题的文本在法语和西班牙语版本中明显更长。通过Visual Editor 使用可以看出Visual Editor 网站所有者可能需要对这一部分进行调整。

Visual Editor 帮助团队中的每个人——而不仅仅是设计师。它是一款出色的工具，可在翻译内容实际出现在网站的位置进行编辑。了解更多编辑功能 此处。

那么，如果出现设计问题会怎样呢？

使用Visual Editor 时Visual Editor 可能会注意到翻译后的文本在整体设计中存在若干显示问题。现在您可以预见这些潜在问题并相应地进行调整。可采取以下几种修正措施：

考虑重新措辞或综合内容：如果您发现翻译后的内容在设计上存在问题，请不要犹豫，对翻译效果不佳和占用空间过大的部分进行删减和编辑。您可以在团队内部或直接在Weglot 控制面板上与专业翻译人员合作来完成这项工作。

例如，在英文中，您的 "关于我们 "标签在法文中应翻译为 "A propos de nous"，但这很有可能不适合您网站上分配的空间。不过，在这种情况下，一个简单的解决方案是手动将 "A propos de nous "编辑为 "Equipe"。

如果您使用Weglot 面板将译文发送给专业翻译人员，则可以在备注栏中让翻译人员了解您发现哪些词语可以采用不同的措辞。

更改网站字体大小：若您发现翻译文本时，目标语言的字体过大（或过小），可直接调整目标语言的字体大小。此操作可在Weglot 的自定义CSS区域完成，具体路径为语言切换器下的该选项。

例如，下面的 CSS 将把德文字体的大小调整为 16px：

html[lang=de] body {

font-size : 16px；

}

更改网站字体： 另外，在某些情况下，当文本被翻译成另一种语言时，改变所使用的字体也是有意义的。这是因为有些字体在某些语言中效果不佳，可能会加剧您可能遇到的设计问题。例如，如果您想在网站的法语版本中使用 Roboto 字体，而在阿拉伯语版本中使用 Arial 字体（Arial 字体更适合该语言），这就可以通过另一条 CSS 规则来实现。

当网站使用阿拉伯语时，下面的 CSS 将把字体调整为 Arial：

html[lang=ar] body {

font-family : arial；

}

考虑全球网页设计： 当然，现在说这个可能有点晚了--但如果你正处于创建网站的早期阶段，而且你知道你想添加多种语言，你可能想考虑在网站设计中留出机动空间，以帮助防止出现进一步的问题。点击这里查看更多早期设计技巧。