html网页显示蒙文,网页标签中显示蒙古文竖排文本

网页标签中显示蒙古文竖排文本

蒙古文网页和我们经常见到的网页最大的区别在于，在网页中蒙古文文本的显示和编辑不同于其他的网站，蒙古文是竖排文本，并且不像汉文是从左向右书写文字，从上到下换行。而蒙古文是从上到下书写，从左向右换行。这就是在这里把蒙古文网页排版单独写出来的原因。

在我们的生活中，很少能看到蒙古文网站，我也是前一段在做一个项目中遇到的，并因此对蒙古文网站做了深入的研究。蒙古文网页在互联网缺少的原因就在于，它不同于我们正常网页的书写习惯，不管是在网页编辑还是浏览过程中，都会遇到麻烦。蒙古文的字库编码也很特殊，如果我们没有下载相应的蒙古文字体，那么我们浏览蒙古文网页时，就无法看到网页内容。而且大部分的浏览器都不支持蒙古文网站，一般情况下都会使用chrome，IE8以下的版本都无法支持显示蒙古文网页。

首先想让文字竖排显示，比较容易的方法有两种：

一，插入图片

我们可以使用制图软件制作图片，使用文本输入将蒙古文文字输入进去，并且我们可以根据自己的需求设计文字字体，图片样式等，这样既能够解决竖排文字输入问题，同时也让网页更加美观，一举两得！如图所示：

但是这种方法仅适合于较少的文字版块，如果我们的网页中某一部分文字较多，就不适合再用这种方法了。如果将长篇的文章做成图片，就不便于修改内容，而且过于大的图片会影响打开网页的速度，造成不必要的损失。

二、CSS样式设置

在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及以下的版本。