Web中向左向右

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

几米的绘本《向左走,向右走》自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世界中可以控制排版方向的特性有很多,比如我们熟悉的:

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

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

其中Flexbox和Grid在ltrrtl中会显得好很多,但是碰到间距相关的属性比如*-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;
}

如果仅从效果上来看,这样的方案的确是解决了dirdirection带来的差异性,但这同时也为开发者增加了不少的工作量,代码也变得更难维护。事实上呢?在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中的元素会自动切换(但有一个前提,这些元素没有设置其他的属性,比如floattext-align等)。不过有一点需要特别提出的是,dir属性值要是为auto时,它根据解析的内容自动切换方向。就这一点而

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

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

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

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