Quiz

在设计或开发多语言站点时你必须注意什么事?

Topics
HTMLInternationalization
在GitHub上编辑

设计和开发多语种网站是国际化的一部分(i18n)。

搜索引擎优化

  • 使用 <html> 标签上的 lang 属性。
  • 在 URL 中包含区域设置(例如 en_US, zh_CN 等)。
  • 网页应该使用 <link rel="alternate" hreflang="other_locale" href="url_for_other_locale"> 来告诉搜索引擎,在指定的 href 中有另一个页面具有相同的内容,但是对于另一种语言/本地化。

了解地域与语言之间的区别

地域设置控制您所在区域的数字、日期和时间显示方式:它可能是一个国家,或国家的一部分,甚至可能不尊重国家边界。

语言可能因国家而异。

某些语言,尤其是广为流传的语言在不同国家有不同的“喜好”(语法规则、拼写、字符)。 重要的是要区分目标国家的语言,而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例:

  • en: en-USA (美国英文), en-GB (英国英文)
  • zh: zh-CN(简体中文), zh-TW(繁体中文)

预测地域,但不限制

服务器可以通过 HTTP 头部Accept-Language和 IP 组合来决定访客的地域/语言。 通过这些,可以为访客自动选择最佳地域设置。 然而,预测并不是万无一失的(特别是如果访客使用 VPN),仍然应当允许访客不受干扰地改变自己的国家/语言。

考虑不同语言文本长度的差异

某些内容如果用另一种语言写入,可能会更长。 注意设计中的布局或溢出问题。 最好是避免在文字数量会影响设计的情况下进行设计。 字符数量与标题、标签和按钮等事项有关。 对于自由流动的文本,如正文或评论,它们就不是一个问题。 例如,德语和法语等某些语言往往使用比英语长的语言和句子。 如果您不考虑到这一点,可能会导致布局问题。

语言阅读方向

英语和法语等语言是从左到右、从上到下写的。 但是,有些语言,例如希伯来语和阿拉伯语是从右到左写的。 这可能会影响您站点的布局和页面上元素的位置, 这样你就必须小心设计你的网站,要考虑到不同的文本方向。

不要简单地串联翻译后的字符串

不要做任何类似"今天的日期为"+日期的事情。 在语序不同的语言中,它会出现错误。 使用模板字符串加参数替换每种语言。 例如,分别用英文和中文来看看以下两句:I will travel on {% date %},以及{% date %} 我会出发 请注意,由于语言的语法规则,变量的位置不同。

格式化日期和货币

日历日期有时以不同的方式呈现。 例如: 美国的“May 31, 2012” vs. 欧洲部分地区的"31 May 2012"。

不在图片中放置文本

将文本放在位图中(如 png、gif、jpg 等)并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式,可以在任何计算机上显示优雅、非系统字体。 不过,为了支持图片文本翻译成其他语言,需要为每种语言创建单独的图片,这不是设计人员的灵活工作流程。

要注意色彩的感知方式

不同语言和文化对颜色的看法不同。 设计应适当使用颜色。

参考资料

在GitHub上编辑