本人翻译者系前端工程师

原文标题：CSS for internationalisation

原文作者：Chen Hui jing

原文地址：https://chenhuijing.com/blog/css-for-i18n

我遇到过一些人，他们根本不认为CSS与国际化有关，但如果你仔细想想，国际化不仅仅是将你网站上的内容翻译成多种语言，然后一劳永逸。这些内容的呈现方式存在各种细微差别，影响母语人士使用您的网站的体验。

国际化没有单一的规范定义，但W3C提供了以下指导：

"国际化是一种产品、应用程序或文档的设计和开发，可以方便地为不同文化、地区或语言的目标受众进行本地化。"

从Unicode和字符编码的使用，到为翻译内容提供服务的技术实现，以及所述内容的呈现，这是一个需要覆盖的领域。今天，我将只讨论多语言支持的CSS相关方面。

CSS通过告诉浏览器页面上的元素应该如何设置样式和布局来描述网页的显示。在使用CSS的多语言页面上，我们可以使用几种方法将不同的样式应用于不同的语言。

除此之外，CSS属性还为脚本和书写系统提供了布局和排版功能，而不仅仅是基于拉丁语的自上而下的水平排版功能，这种功能如今主要出现在web上。

所以，请系好安全带，因为这可能会是一篇相当长的文章。¯_(ツ)_/¯

与语言相关的造型

你有没有想过Chrome怎么会问你是否想翻译网页的内容？不好吧，也许只有我一个人。但这是因为HTML元素上的lang属性。

lang属性是一个非常重要的属性，因为它识别web上文本内容的语言，并且该信息在许多地方都被使用。前面提到的Chrome内置翻译，针对特定语言内容的搜索引擎，以及屏幕阅读器。

啊哈，也许你没有想到屏幕阅读器，但如果你不是一个屏幕阅读器用户或认识这样的人，它可能不会放在心上。屏幕阅读器利用语言信息，以适当的口音和正确的发音读出内容。

与语言相关的样式化的关键在于在页面标记中适当使用lang属性。lang属性将ISO 639语言代码识别为值。

更新:Tobias Bengfort指出lang属性使用了一个名为BCP 47的IETF规范，该规范很大程度上基于ISO 639 (opens new window)。

在大多数情况下，您将使用像zh这样的两个字母的代码来表示中文，但是中文(包括阿拉伯语等其他语言)被认为是一种宏语言，它由许多具有更具体的主语言子标记的语言组成。

有关如何构造语言标记的深入解释，请参阅HTML和XML中的语言标记。

一般的指导是html元素必须总是有一个lang属性集，然后由所有其他元素继承。