平时我们在ueditor中都是输入的中文,排版都是从左向右输入。但是当输入一些少数民民族言时,ueditor却不能正常显示。
例如蒙古文字,传统蒙文是竖排书写。如下图:传统蒙古文排文方式,《蒙古人的文字与书籍》
在word2010中,是支持竖排的,从左向右、从右向左都能完美支持:
但是在网页中怎样显示呢?其实css早就支持文字的书写方向了。IE 在文字排版方面一直是先驱,早在 IE 5.5 就实现了私有属性「writing-mode」,后来被 W3C 在 CSS2 中采纳作为规范。在 Level 3 草案中「writing-mode」是 「direction」 和 「block-flow」 属性的简写[1],2010年起「block-flow」 属性被删除了,其功能融合进「writing-mode」。
但在最新的规范中「writing-mode」属性缩减为三个值:
- horizontal-tb(默认值):自上而下,从左到右的横排书写方式。(类似IE私有值lr-tb)
- vertical-rl:从右到左,自上而下的竖排书写方式(典型的汉字竖排排版方式)。(类似IE私有值tb-rl)
- vertical-lr:从左到右,自上而下的竖排书写方式(主要用于内蒙古的蒙古语和满语。)。
- 由于自下而上的横排书写方式太少见,经过讨论去掉了「horizontal-bt」关键字。
既然css支持竖排,那么我们就可以在ueditor中添加竖排的支持。
1. 先在ueditor.config.js中添加工具栏按钮,分别表示竖排从右向左、竖排从左向右、恢复默认的横向排版。
2. 在zh-cn.js中增加按钮的提示
3. 在ueditor.css中添加按钮的图标
4. 在ueditor.all.js中添加按钮点击事件的处理和命令状态的查询
5. 在ueditor.all.js中添加按钮的事件监听
下面是ueditor中最终的实现效果:
竖排从左向右:
竖排从左向左:
gif操作过程:
最后,有些文字的输入方向是从右向左的,输入的光标始终在一行的最左边,这个功能ueditor已经有了。在ueditor.config.js中开启就可以了:
最后的效果: