万维网是让世界上的每个人都能访问的 — 它就在名义中! 也就是说,任何有权访问互联网的人都有可能访问您的网站,无论他们身在何处、使用什么设备或使用哪种语言。
自适应设计的目标是使您的内容可供所有人使用。 将同样的理念应用到人类语言是国际化背后的动力 - 为您准备面向国际受众的内容和设计。
逻辑属性
英语的书写方式是从左到右、从上到下,但并非所有语言都是这样写的。 有些语言(如阿拉伯语和希伯来语)从右向左阅读,有些日语字体则垂直阅读,而不是水平阅读。为了适应这些写入模式,我们在 CSS 中引入了逻辑属性。
如果您编写 CSS,您可能使用了“左”“右”“上”和“下”等方向性关键字。 这些关键字是指用户设备的实际布局。
另一方面,逻辑属性指的是框的边缘,因为它们与内容流动相关。 如果书写模式发生变化,使用逻辑属性编写的 CSS 也会相应地更新。 但使用方向属性时则并非如此。
虽然方向属性 margin-left
始终是指内容框左侧的外边距,而逻辑属性 margin-inline-start
指的是内容框左侧的外边距(采用从左到右书写的语言),而在使用从右到左的语言时,则是指内容框右侧的外边距。
为了使您的设计适应不同的写入模式,请避免使用方向属性。请改用逻辑属性。
.byline { text-align: right; }
.byline { text-align: end; }
如果 CSS 具有特定的方向值(如 left
或 right
),则存在相应的逻辑属性。之前拥有 margin-left
的位置现在也有 margin-inline-start
。
在文本从左向右流动的英语等语言中,inline-start
对应“左”,inline-end
对应“右”。
同样,在文本从上到下书写的英语等语言中,block-start
对应于“top”,block-end
对应于“bottom”。
如果您在 CSS 中使用了逻辑属性,则可以使用同一样式表翻译网页。 即使您的网页已翻译为从右到左或从下到上所书写的语言,您的设计也会相应调整。 您无需针对每种语言进行单独的设计。 通过使用逻辑属性,您的设计将能够对每种写入模式作出响应。 这意味着,您的设计可以覆盖更多用户,而不必花时间针对每种语言分别进行设计。
默认情况下,grid 和 flexbox 等现代 CSS 布局技术使用逻辑属性。如果您从 inline-start
和 block-start
(而不是 left
和 top
)的角度思考,就会发现这些现代技术更容易理解。
采用一种常用模式,例如一些文本旁边的图标或表单字段旁边的标签。 不要认为“标签的右边应该有外边距”,而是“标签的内联轴末端应该有外边距”。
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
如果该网页被翻译成从右到左的语言,则无需更新样式。您可以通过在 html
元素中使用 dir
属性,模拟从右到左显示网页的效果。值 ltr
表示“从左到右”。“rtl”值表示“从右到左”。
如果您想试用文档方向(区块轴)和书写模式(内嵌轴)的所有排列组合,可参考此处的互动式演示。
确定网页语言
一种好主意是,在 html
元素上使用 lang
属性来标识网页的语言。
<html lang="en">
该示例针对的是英语网页。您可以进一步指定。声明网页使用的是美式英语的方法如下:
<html lang="en-us">
声明文档的语言对搜索引擎非常有用。 它对于屏幕阅读器和语音助理等辅助技术也很有用。 通过提供语言元数据,您可帮助这些类型的语音合成器正确地读出您的内容。
lang
属性可以用于任何 HTML 元素,而不仅仅是 html
。如果您在网页中切换语言,请指明此更改。
在此示例中,有一个单词是德语:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
确定关联文档的语言
还有一个名为 hreflang
的属性,可用于链接。
hreflang
采用与 lang
属性相同的语言代码表示法,并描述链接的文档的语言。如果您的整个网页都有德语翻译版本,请按如下方式链接到该网页:
<a href="/path/to/german/version" hreflang="de">German version</a>
如果您使用德语文字说明指向德语版本的链接,请同时使用 hreflang
和 lang
。
此处,文本“德意志版本”被标记为德语,而目标链接也被标记为德语:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
您还可以在 link
元素中使用 hreflang
属性。这些内容会显示在文档的 head
中:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
但与可应用于任何元素的 lang
属性不同,hreflang
只能应用于 a
和 link
元素。
在设计中考虑国际化
在设计要翻译成其他语言的网站和采用的书写模式时,请考虑以下因素:
- 在某些语言(如德语)中,常用词语很长。您的界面需要适应这些字词,因此请避免设计狭窄的列。您还可以使用 CSS 引入连字符。
- 请确保您的
line-height
值可以容纳重音符号和其他变音符号等字符。在英语中看起来合适的文本行在其他语言中可能会重叠。 - 如果您使用的是网络字体,请确保其包含的字符范围足以涵盖您要翻译的目标语言。
- 请勿制作包含文字的图片。如果这样做,您需要为每种语言分别创建图片。您应将文字和图片分开,然后使用 CSS 将文字叠加在图片上。
放眼国际
lang
和 hreflang
等属性会使您的 HTML 对国际化更有意义。
同样,逻辑属性会使 CSS 的适应性更强。
如果您习惯用从 top
、bottom
、left
和 right
的角度来考虑,可能很难开始考虑 block start
、block end
、inline start
和 inline end
。但这是值得的。逻辑属性是创建真正响应式布局的关键。
检查您的掌握程度
测试您对国际化知识的掌握情况。
在英语中,盒子的实际 right
面在逻辑上是哪一面?
block-start
top
”block-end
bottom
”inline-start
left
”inline-end
您应该向 HTML 添加哪个属性,使其对国际化更有意义?
english
lang
language
i18n