面试官:如何使用CSS连接数据库
本人翻译者系前端工程师
原文标题：Internationalization In CSS
原文作者：Anil Verma
原文地址：https://anilvermaspeaks.medium.com/internationalization-in-css-d733f1811e88 为国际观众准备你的设计。
当我们使用多语言网站时，我们必须根据写作模式、方向性和文本方向来调整我们的元素。
# text-align —
在许多语言中，文本是从左到右的，就像英语一样，但在许多语言中，文本也是从右到左的，就像法语一样。因此，如果应用程序同时使用两种语言，那么必须根据应用程序在浏览器上运行的语言调整text-align的方式。
假设我们添加了text-align：右；那么对于英语语言来说，它将正确地工作。但对于法语，我们必须使用text-align：左；对于相同的元素。因为英语是LTR，法语是RTL。
因此，只使用1个可以使text-align的属性：右；对于LTR和text-align：左；对于RTL。这将克服lang的代码行和定制。
所以为了维护这一点，css提供了一些text-align属性，这些属性应该用于多语言站点。
# 不建议
.alignRight{
text-align: right;
}
.alignLeft{
text-align: left;
}
# 建议
.alignRight{
text-align: end;
}
.alignLeft{
text-align: start;
}
# Margin(基于writing mode)—
这些属性对应于margin-top、margin-bottom、margin-left和margin-right属性。映射取决于元素的编写模式、方向和文本方向。
可问题是当我们将写入模式从vertical-lr改为vertical-rl或反之，那么这些属性应该反过来工作。在改变写作方式时，页边距顶部应与页边距底部相同。但是为了得到这种行为，我们必须根据写入模式写2次CSS。但是CSS也提供了属性，通过这些属性，我们只需要编写CSS一次，并且在编写模式改变时，我们不需要任何调整。它会自动开始以另一种方式运行。
# 不建议
.margin-top{
margin-top: 10px;
}
.margin-bottom{
margin-bottom: 10px;
}
.margin-left{
margin-left: 10px;
}
.margin-right{
margin-right: 10px;
}
# 建议
.margin-top{
margin-block-start: 10px;
}
.margin-bottom{
margin-block-end: 10px;
}
.margin-left{
margin-inline-start: 10px;
}
.margin-right{
margin-inline-end: 10px;
}
vertical-lr 相当于是以下的映射:
margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top
margin-inline-end = margin-bottom
vertical-rl 相当于是以下的映射:
margin-block-start = margin-right
margin-block-end = margin-left
margin-inline-start = margin-top
margin-inline-end = margin-bottom
# HTML 的lang属性
它被用来识别网络上文本内容的语言。这些信息有助于搜索引擎返回特定于语言的结果，屏幕阅读器也使用这些信息切换语言配置文件以提供正确的口音和发音
# 不建议
<html>
# 建议
<html lang="en">
或者更具体一些:
<html lang="en-us">
# 识别链接文档的语言
如果链接页面是其他lang，使用“hreflang”属性
<a href="/path/to/german/version" hreflang="de">German version</a>
如果链接文本也是其他“lang”，那么也定义lang属性
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>