Web中向左向右

作者：大漠 日期：2019-12-30 点击：422
CSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

几米的绘本《向左走，向右走》自1999年出版，就一直是爱情的代名词。在Web的世界中有着同样的故事，即Web的向左向右，指的就是Web的排版方式（比如，左浮动、右浮动，Box Alignment中对齐方式等）、对齐方式（比如左对齐、右对齐）、书写方式（比如从左向右、从右向左）等。而Web中的向左向右和书写习惯（比如Writing Mode）有着紧密的关系，社区中很多开发者可能只习惯于自己的书写方式（比如从左向右），但事实上世界中还有很多其他语言，不同的语言其书写方式是不同，比如阿拉伯语，它就是从右向左。如果希望给用户提供一个更具体验的Web网站或应用，作为开发者就有必要掌握如何针对不同语言提供不同的呈现方式。这就是我和大家将要一起聊的Web中向左向右。

故事背景

世界上有很多种语言（简称世界语言），比如汉语、英语、印度斯坦语、西班牙语、阿拉伯语、俄语、葡萄牙语、德语和法语等。在互联中也有一些常用语言，比如英语、汉语、西班牙语、葡萄牙语、印尼语（马来语）、法语、日语、俄语和德语等。

在Web中，不同的语言在电子屏幕上有着不同的呈现方式，比如：

上图截取于“联合国教科文组织”官方，上图所列的语言也是联合国常用语言种类。

从上图可以看出，在互联网上有些语言是从左到右排列（查看），比如中文、英语、法语等，也有一些语言是从右到左排列（查看），比如阿拉伯语、波斯语、乌尔都语，维吾尔语，哈萨克语等（这些都是阿位伯语系）。

阿拉伯语系是互联网语言的第七大最常用的语言。阿拉伯语网站或应用的数量每天都在不断的增加。然而，奇怪的是，阿拉伯语系（大部分是在中东市场）要求的设计不仅要符合他们的需求和用户的舒适度，而且还要符合他们的语言标准，这使得开发者在开发相关应用的过程变得更为复杂。考虑到阿拉伯系都是从右到左书写和阅读的，开发人员在开发的时候常常会面临一系列问题。

注意：阿拉伯语不是唯一从右向左书写的语言。波斯语和希伯来语也是以同样的方式书写的。

虽然这看起来没什么大不了的，但是从右到左（RTL）语言的开发需要注意很多相关的特性。而且这方面的资源也不多，所以开发者面对这样的业务场景使得情况变得更加复杂。对于开发者而言，仅从右向左（RTL）和从左向右（LTR）单方面而言，事情会更简单，但是如果两种方式混合在一起，事情就会变得更为复杂。

简单地说呢？就是按照书写模式来呈现不同的效果，就目前来看，主要的方式就是从左向右（LTR）和从右向左（RTL），在某些场景下也有垂直方向的书写模式，比如从上往下（古代的汉文就是这样的书写模式）。对于开发者而言，从左向右（LTR）并不是件难事，因为我们平时做的，处理方式都是这种。但我们不能仅局限于以往，很有可能你面对的用户群体是阿拉伯语系，那你就要改变以往的处理方式。

接下来的内容，我们将会以RTL为主（即阿拉伯语系），因为这可能是大家更为感兴趣的部分。

面对不同语言场景，你可能会先想到，“界面必须翻转”。看上去很诡异，但这也是LTR转换成RTL要做的第一件事情。比如Facebook官网的首页：

如果你查看过其源码的话，你会发现在<body>元素上设置了dir属性，同时在CSS中设置了direction属性：

从技术的角度上来说，HTML中的dir属性和CSS中的direction属性可以用来设置水平流的方向。有些语言是从左到右（LTR）排列的（比如中文），而有些语言是从右向左（RTL）排列的（比如阿拉伯语）。因此，采用这两种方式来控制文本水平流是至关重要的。但这也仅仅是其中的冰山一角。换言之，这两个属性对于CSS中排版布局的一些功能模块有着直接的影响。

和方向相关的CSS功能模块

在CSS世界中可以控制排版方向的特性有很多，比如我们熟悉的：

或许大家没有太强的体感，我们先来看看示例：

尝试着操作示例中的下拉选择项，你会发现我们熟悉的很多东西并没有完全按照dir或direction预期的那样进行改变。拿其中float布局来说：

其中Flexbox和Grid在ltr或rtl中会显得好很多，但是碰到间距相关的属性比如*-right、*-left时，整个效果又将会差强人意。

上面我们看到的是现象，当然很多同学可能会说，我们只有 ltr（Left-To-Right）的场景，没有必要花精力去了解和学习rtl相关的东东。当然，很多同学会提到，针对不同的方式提供不同的CSS，比如：

.meida__object {
    float: left;
    margin-right: 20px;
}

[dir="trl"] .media__object {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

如果仅从效果上来看，这样的方案的确是解决了dir或direction带来的差异性，但这同时也为开发者增加了不少的工作量，代码也变得更难维护。事实上呢？在Web中的RTL还有很多事情需要做，甚至是很多技术细节，只有掌握这些，才能在RTL这样的场景中游刃有余。

接下来，大部分内容会围绕着RTL场景展开。

RTL的简介

RTL是“Right To Left”首字母的缩写，简单地说就是从右到左，在Web中主要是指布局和浏览方式。来看一个RTL的Web示例图：

在CSS中页面排列的默认方向是 LTR （“Left To Right”的简写），也是大家最为熟悉的方式。如果你使用浏览器开发者工具查看的话，你会发现客户端下的<html>元素的dir（或direction）默认值也是ltr。

W3C的 CSS Writing Modes Level 3规范中有专门对direction属性的阐述。在HTML相关的规范中也有对dir属性相关的阐述。

比如下图就是LTR（中文版本Facebook）和RTL（阿拉伯语版本Facebook）对比效果：

注意，对于RTL，文本是从右向左读取的，这正好与LTR相反。幸运的是，客户端（比如浏览器）对这方面有较好的支持。如果我们希望切换文档语言的排列方向，最简单地的方式就是在文档根元素（即<html>）显式的设置dir属性：

<html dir="rtl">...</html>

当dir属性的值被更改时，Web中的元素会自动切换（但有一个前提，这些元素没有设置其他的属性，比如float、text-align等）。不过有一点需要特别提出的是，dir属性值要是为auto时，它根据解析的内容自动切换方向。就这一点而

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/ltr-and-rtl-in-css.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部