HTML & CSS – dir, direction, writing-mode, ltr (left to rigth), rtl (right to left)

前言

世界上有很多语言的阅读方向是不同的. 

英文

中文 (以前才有竖排文字, 现在中文和英语一样了)

阿拉伯文 (Arabic)

面对不同的语言, HTML 和 CSS 就需要不同的写法. 虽然我没有做过类似的项目, 但是知识还是要有的, 正所谓 "没吃过猪肉，也见过猪跑" 嘛.

 

参考:

HTML 中bdo标签的dir属性和CSS的direction属性的区别与用法

snaapy.com (Arabic 网站)

Youtube – CSS how to: text direction

Easily Create Sideways Text Using the “writing-mode” CSS Property

 

阅读方向

有 3 个方向需要搞清楚.

1. 整体靠的方向

靠左: 英文

靠右: 阿拉伯文

靠上: 中文

靠下: 没有看过

2. 字的方向

left to rigth: 英文

right to left: 阿拉伯文

top to bottom: 中文

bottom to top: 没看过

3. 换行的方向

 

horizontal top to bottom: 英文

vertical left to right: 中文

vertical right to left: 中文

horizontal bottom to top: 没有

小总结

靠的方向, 字的方向, 换行的方向

英语: left, left to right, horizontal top to bottom

中文: left or right, top to bottom, vertical left to right or right to left

阿拉伯文: right, right to left, horizontal top to bottom

 

dir Attribute

Attribute dir 或 CSS direction 是用来控制 "靠" 的方向的

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consectetur!
</p>
<p dir="ltr">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consectetur!
</p>
<style>
  p {
    width: 300px;
    border: 1px solid black;
  }
  p:nth-child(1) {
    direction: ltr;
  }
  p:nth-child(2) {
    margin-top: 1rem;
    direction: rtl;
  }
</style>

效果

CSS direction 和 HTML dir attirbute 是一样的效果. 写其中一个就可以了, 推荐用 HTML.

rtl 是 rigth to left 缩写 (另外, ltr 就是 left to right, tb 就是 top to bottom)

它的效果是把整个段落往右边靠. 结尾的标点符号也换了位置. 但是每一个字是没有改变方向的.

 

bdo Attribute

bdo 是用来控制 “字的方向”.

<p>
  <bdo dir="rtl"
    >Lorem ipsum dolor, adipisicing elit. Eum, eius.其实, 你爱我像谁?</bdo
  >
</p>

给 p 加上 bdo tag dir="rtl" (它们一套用的, 如果写 ltr 就没效果了), BDO stands for Bi-Directional Override.

注意看, 它每一个字 (every alphabet) 都反向了.

也可以用 CSS style, 但推荐使用 HTML

p {
  unicode-bidi: bidi-override;
  direction: rtl; /* 一定是 rtl, 一套用的 */
}

 

Writing-mode

它用来控制 "换行的方向"

HTML

<p>I love you? ，其实，你爱我像谁？</p>
<style>
  p {
    writing-mode: vertical-lr;
    height: 100px;
    border: 1px solid black;
  }
</style>

效果

这个是 vertical left to right 的效果, 我是故意放英文的, 显然它不合适. 这也是为什么近年来越来越少用 vertical 排版了. 因为它很难表达英文和数字 (全文都用中文就可以. 但这很容易限制表达. 比如要创作一本 CSS 教程, 怎么可能不带英文呢?)

writing-mode: vertical-rl

vertical right to left 效果

writing-mode 默认值是 horizontal-tb, top to bottom 的意思 (没有 bottom to top 的哦)

 

总结

虽然这 3 种设定可以笛卡尔积出很多排版, 但真正会用到的只有几个而已.

英文

默认, 什么也不用 set, 它的默认值是

p {
  writing-mode: horizontal-tb;
  direction: ltr;
  /* unicode-bidi: bidi-override; */
}

效果

中文

CSS Style

p {
  writing-mode: vertical-lr;
  direction: ltr;
  /* unicode-bidi: bidi-override; */
}

direction: ltr 按理说应该是指 "靠左", 但由于换成 vertical 了, 所以它变成了 top, 这里需要我们自己清楚.

中文右到左

CSS Style

p {
  writing-mode: vertical-rl;
  direction: ltr;
  /* unicode-bidi: bidi-override; */
}

阿拉伯文

不会写阿拉伯文, 改用中文代替.

p {
  writing-mode: horizontal-tb;
  direction: rtl;
  unicode-bidi: bidi-override;
}

 

结束语

我自己没有做过相关项目, 这里只是写个大概, writing-mode 还有其它的设定的. 

但重点是下一篇的, CSS – Logical Properties, 没有上面这些基本概念, 很难理解为什么需要 Logical Properties. 所以才写了这篇.