精通
英语
和
开源
,
擅长
开发
与
培训
,
胸怀四海
第一信赖
蒙古文网页和我们经常见到的网页最大的区别在于,在网页中蒙古文文本的显示和编辑不同于其他的网站,蒙古文是竖排文本,并且不像汉文是从左向右书写文字,从上到下换行。而蒙古文是从上到下书写,从左向右换行。这就是在这里把蒙古文网页排版单独写出来的原因。
在我们的生活中,很少能看到蒙古文网站,我也是前一段在做一个项目中遇到的,并因此对蒙古文网站做了深入的研究。蒙古文网页在互联网缺少的原因就在于,它不同于我们正常网页的书写习惯,不管是在网页编辑还是浏览过程中,都会遇到麻烦。蒙古文的字库编码也很特殊,如果我们没有下载相应的蒙古文字体,那么我们浏览蒙古文网页时,就无法看到网页内容。而且大部分的浏览器都不支持蒙古文网站,一般情况下都会使用chrome,IE8以下的版本都无法支持显示蒙古文网页。
首先想让文字竖排显示,比较容易的方法有两种:
我们可以使用制图软件制作图片,使用文本输入将蒙古文文字输入进去,并且我们可以根据自己的需求设计文字字体,图片样式等,这样既能够解决竖排文字输入问题,同时也让网页更加美观,一举两得!如图所示:
但是这种方法仅适合于较少的文字版块,如果我们的网页中某一部分文字较多,就不适合再用这种方法了。如果将长篇的文章做成图片,就不便于修改内容,而且过于大的图片会影响打开网页的速度,造成不必要的损失。
在CSS的文字处理属性中有一个重要的属性:writing-mode。该属性用于设置对象书写方向。
在 CSS2中对 writing- mode 定义如下:
语法: writing-mode : lr-tb、tb-rl
参数:lr-tb: 从左向右, 从上往下tb-rl: 从上往下, 从右向左
示例:
div { writing-mode: tb-rl; }
CSS2的writing-mode实现了网页的竖排文字排版,但是它只符合汉字的书写顺序,而蒙古文是从左向右书写的,
然而现在最流行的网页样式列表已经被CSS3代替,CSS3是CSS2的升级,比CSS2更加完善。在新的CSS3中,writing-mode属性有了重新定义,更新了对多种语言的支持,包括蒙古文在内。
div { writing-mode: tb-lr }
其实就是改变了文字书写的方向,CSS2中writing-mode: tb-rl中rl的定义就是从右向左,而在CSS3中支持lr定义,也就是从左向右,所以在CSS3没有被完全支持使用之前,有人把CS2中writing-mode: tb-rl的值改为writing-mode: tb-lr也是可行的。
有了竖排显示的样式,我们还要考虑到兼容问题,对于不同的浏览器,我们要写不同形式的样式代码,
例如:
-webkit-writing-mode: vertical-lr;
-webkit-text-orientation: sideways-right;
writing-mode: tb-lr;
-ms-writing-mode: vertical-lr;
注意:这种方法兼容大部分的浏览器,但是IE6以下的版本除外。现在不管是什么网站,IE6以下的版本兼容性都很差,所以大部分人已将放弃了IE6及以下的版本。