万维网是让世界上的每个人都能访问的 — 它就在名义中！ 也就是说，任何有权访问互联网的人都有可能访问您的网站，无论他们身在何处、使用什么设备或使用哪种语言。
自适应设计的目标是使您的内容可供所有人使用。 将同样的理念应用到人类语言是国际化背后的动力 - 为您准备面向国际受众的内容和设计。
逻辑属性
英语的书写方式是从左到右、从上到下，但并非所有语言都是这样写的。 有些语言（如阿拉伯语和希伯来语）从右向左阅读，有些日语字体则垂直阅读，而不是水平阅读。为了适应这些写入模式，我们在 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-starttop”block-endbottom”inline-startleft”inline-end您应该向 HTML 添加哪个属性，使其对国际化更有意义？
englishlanglanguagei18n