Direction行文方向

2025-05-19 00:10:59首发，1周前更新

direction是指行文方向，阿拉伯语和希伯来语是从右向左书写文字，通常需要做rtl设置。

Direction行文方向1周前更新

前言

世界上的行文方向主要有三种：

先从左向右，后从上向下（横排）：拉丁文（包括英文、法文、德文等）和简体中文
先从右向左，后从上向下（横排）：阿拉伯文和希伯来文
先从上往下，后从右往左（竖排）：繁体中文，日文和蒙古文

由于网页特性，网页上主要是前两种行文方向，即ltr和rtl。

因为网页默认是ltr行文方向，所以本文主要是讲如何设置rtl。

dir=rtl

对html根节点设置dir=rtl，即可实现文本从右至左排列。

                      
                        <html dir="rtl">
                            <head></head>
                            <body></body>
                        </html>

输出
HTML
JS

```
                
                
            
```

                
                setattrrtl.onclick = ()=>{
                    document.documentElement.setAttribute('dir', 'rtl');
                }
                setattrltr.onclick = ()=>{
                    document.documentElement.setAttribute('dir', 'ltr');
                }

rtl样式

如果需要局部控制行文方向，可对某节点设置direction: rtl。

不过通过实践发现，这个方法并不完全实现rtl排列，还需要手动处理align方向、margin方向、padding方向、position方向等。

输出
HTML
JS

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

                
                let box = ax.getEl('#dirbox');
                setcssrtl.onclick=()=>{
                    box.style.setProperty('direction', 'rtl');
                }
                setcssltr.onclick=()=>{
                    box.style.setProperty('direction', 'ltr');
                }

如果需要对文本进行简单的rtl排列，推荐使用内置的css样式类：

_rtl：从右至左排列
_ltr：从左至右排列

输出
HTML
JS

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

                
                let box = ax.getEl('#dirbox2');
                setcssrtl2.onclick=()=>{console.log(10);
                    box.classList.remove('_ltr');
                    box.classList.add('_rtl');
                }
                setcssltr2.onclick=()=>{
                    box.classList.remove('_rtl');
                    box.classList.add('_ltr');
                }