蒙古文网页制作中的文本竖排方法

目录1 前言 (2)2 常用的蒙古文网页制作方法 (3)2.1 图片插入法 (3)2.1.1 抓图法 (3)2.1.2 制图法 (3)2.2 插入Flash动画法 (4)2.3 控件技术 (4)3 样式表与HTML代码结合制蒙古文网站 (4)3.1 利用样式表制作蒙古文网页 (4)3.2 利用HTML代码中元素的编辑模式 (6)4 结束语 (7)全文共9 页3519 字蒙古文网页制作中的文本竖排方法计算机与信息工程学院09蒙班李迪20092103399指导教师王斯日古楞副教授摘要网页上蒙古文的显示和编辑是蒙古文信息网络化的众多难题之一。

蒙文字与其它文种相比在结构和书写方式都有自己的特点，另外蒙古文字库编码的不统一，大多数浏览器不支持等原因，一直影响蒙古文网页制作。

本文针对蒙古文的书写特性，利用样式表的文本特性和html代码制作蒙古文网页，使制作出的蒙古文网页中的蒙古文本竖排的方式显示。

关键词蒙古文；网页；CSS1 前言互联网上的网页已经成为信息汇集的主要载体，但是以蒙古文为主的网页非常少。

在我国，蒙古文是一种应用范围相对广泛的文字。

目前，计算机字处理软件几乎均支持以下三种，从左至右书写，从上向下换行，例如英文、汉文、藏文等；从右至左书写,从上向下换行,例如阿拉伯文、我国的维文等；从上向下书写，从右至左换行，例如竖排汉文、日文等；从上向下书写，从左至右换行，例如蒙古文等。

蒙古文网页缺少的主要原因是蒙古文是一种从上到下、从左向右竖排显示文字, 而目前我们的网页制作环境还较难实现蒙古文这种特殊书写习惯文字的显示。

目前制作网页的工具很多，比较常用的有Dreamweaver、FrontPage等。

利用这些工具可以编辑制作形式各样、内容丰富的网页。

但是它们不支持蒙文的书写、显示习惯。

因此难以利用这些工具制作蒙古文网页。

到目前为止，在网页上按照蒙古文书写习惯显示蒙古文还属于网页制作中的一个技术难题。

我们在研究蒙古文网页编辑与浏览技术的过程中, 探索、总结出几种设计蒙古文网页的方法和技术, 包括：图片法、Active X控件技术、CSS和HTML等。

2 常用的蒙古文网页制作方法2.1 图片插入法图片插入法又可以分为两种,一是抓图法,二是制图法。

2.1.1 抓图法抓图法是使用文字处理软件如 Word、Wps office之类的软件, 用竖排的方法输入蒙古文字。

然后按键盘上的"Print Screen"拷屏,再打开制图软件，粘贴成一个新文件，保存成适应网络传输的“Gif”、“Png”、“Jpeg”格式即可。

如图1所示。

图1 文字处理软件制图2.1.2 制图法制图法是使用制图软件Photoshop、Fireworks先把需要制作的蒙古文字输入成竖排的格式，保存成相应的图片格式例如图2所示。

图片法不失为一个好方法，如果输入的蒙古文字比较少，做起来非常快速，并且图片的体积也不大，而且还可以为文字设置成各种各样的字体，不需要考虑客户端有没有相应的字体。

图片法有其优点也有其不方便之处，如果是一篇长篇的文章，万一做成的图片有些错别字，那就得重新做一遍了。

另外网页上传送图片造成数据量过大，也会影响浏览速度。

图2 制图软件制图2.2 插入Flash动画法这种方法就是在制作Flash动画时将蒙古文字作成竖排效果，保存为.swf 文件格式，再插入到网页文件中。

这种方法和插入图片的方法类似。

在用IE 浏览时要有Flash插件。

2.3 控件技术ActiveX 控件可以被插入到多种应用程序中，具备这种功能的应用程序称为ActiveX控件容器。

如微软的网页制作软件FrontPage就能够插入ActiveX控件。

ActiveX控件在蒙文网页中所起的作用主要有两点：一是用于接收输入的蒙古文字, 二是将蒙古文字按“从上到下,从左向右”竖排显示。

插入ActiveX 蒙文控件的方法,实现了在制作网页过程中蒙古文字与其它文字同时录入显示,也可以通过编程实现在网页上直接输入蒙古文字的交互式动态网页。

目前有很多蒙古文网站都采用这种技术。

这种技术要求客户端在浏览网页前，先下载ActiveX蒙文控件。

如果蒙文控件中用的蒙文字库编码不是国际标准编码，则还需要下载与控件相符的蒙文字库。

ActiveX 蒙文控件技术已经比较成熟, 目前已经在蒙古文字编辑软件和网页制作中广泛应用。

3 样式表与HTML代码结合制蒙古文网站3.1 利用样式表制作蒙古文网页我们浏览过的大部分Web页，文本中的文字走向都是从左向右的。

文本自动换行时，新的一行位于前一行下方，从页面的左侧开始。

但是我们也能够看到，网页上有时也会出现“竖排”文字。

这些文字既不是用图片表示的,也不是用专用控件来显示的。

它们是用CSS(Cascading Style Sheet)属性定义的。

早在1997年World Wide Web Consortium(W3C)就在颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1。

做了一次重大革新，以前的HTML版本中，各种功能的实现是通过标记元素实现的。

而在样式表中，把某些标记属性化了。

CSS是HTML的一部分，建立样式表的真正意义在于把对象真正引入了HTML，使得可以使用脚本程序（如JavaScript、VBScript)调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML中是无法实现的。

样式表的另一项贡献是简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩展了原先的标记功能，能够实现更多的效果。

样式表从CSS1的版本之后,1998年5月发布了CSS2版本，2003年又发布了CSS3版本，使样式表得到了更多的充实。

Internet Explorer 5.5以上版本能够支持CSS2，而其它浏览器还不支持。

在CSS的文字处理属性中有一个重要的属性:writing-mode。

该属性用于设置对象书写方向。

在 CSS2中对 writing- mode 定义如下:语法: writing-mode : lr-tb、 tb-rl参数:lr-tb: 从左向右, 从上往下 tb-rl: 从上往下, 从右向左示例: div { writing-mode: tb-rl; }其中 writing-mode: tb- rl可以实现文字从上到下，从右向左的竖排功能。

这对汉字来说是一件好事情，对蒙古文来说也带来了希望，但不幸的是蒙古文是从左向右的竖排书写形式。

另外，在CSS2定义的文本布局中还有一个属性：layout-flow：vertical-ideographic，该属性可以实现文本竖排功能。

但竖排方向还是从右向左。

从CSS2中定义的文字竖排属性可以看出，目前在网页中实现的文字竖排功能主要是针对以汉字为主的东亚文字的。

CSS2中没有考虑蒙古文字应该如何处理。

2003年5月颁布的CSS3为制作蒙古文网页带来了生机。

在CSS3中对writing-mode进行了重新定义。

以下是CSS3对 writing-mode的定义：表1 样式表定义writing- mode direction block-progression Common Usagelr-tb ltr Tb 拉丁语, 希腊语；斯拉夫语rl-tb rtl Tb 阿拉伯语；希伯来语tb-rl ltr Rl 东亚一些地区tb-lr rtl Lr 蒙古语从上表1可以看到CSS3已经定义了对蒙古文字的支持。

但是到目前为止，还没有见到任何一家公司出产的浏览器能够支持CSS3的writing-mode属性。

现在一些蒙古文网站已经开始CSS2中定义的writing-mode属性制作蒙文网页。

代码如下所示。

<style type="text/css">body,td,th {font-family: "Mongolian Baiti";font-size: 24px;color: #FFF;}body {background-color: #6FC;}.mw{font-size: 18px;writing-mode: tb-lr;}</style>但是由于其竖排功能的局限性，还必须对网页上显示的蒙古文字进行如下形式的处理。

在网页编辑软件或蒙文控件中临蒙古文字，将输入的蒙古文单词按从右向左(或从后向前)反序处理，在网页中对显示的内容进行文本写模式设置Writing-mode=tb-rl对蒙文单词作方向改变处理的程序片断：这样蒙古文才能够在网页中按照从上到下、从左到右的书写习惯显示出来。

另外，这种处理方式在选择网页上的蒙古文字时，应按从右向左方向拖动鼠标，而不是通常习惯的从左向右拖动鼠标。

3.2 利用HTML代码中元素的编辑模式要实现蒙古文的竖排，必不可少的要应用html代码。

contentEditable是html中的一个属性。

设置html的contentEditable=‘true’时，即可开启该元素的编辑模式。

Html中的contentEditable的属性可以打开某些元素的可编辑状态。

也许你没用过contentEditable属性。

甚至从未听说过contentEditable 的作用相当神奇。

可以让div或整个网页，以及span等等元素设置为可写。

我们最常用的输入文本内容便是input与textarea使用contentEditable属性后，可以在div，table，p，span，body，等等很多元素中输入内容。

如果想要整个网页可编辑，请在body标签内设置contentEditable。

contentEditable已在html5标准中得到有效的支持。

使用标签<div contentEditable="true" style="writing-mode:tb-lr" title="请从此处开始输入">。

当contentEditable="true"时，元素的编辑模式被开启。

当style="writing-mode:tb-lr"时，实现蒙古文字从上到下、从左到右的书写形式。

title="请从此处开始输入"是在插入处光标显示的内容。

制作效果如图4所示。

图4 内容显示4 结束语从以上的介绍可以看出，利用CSS3中有关文本书写方向的定义就可以非常简单的制作出符合蒙古文书写习惯的蒙文网页。

现在所缺少的只是网页浏览器能否支持CSS3 中定义的属性。

目前可以利用html代码与CSS样式结合，灵活的把蒙文文本输入到制作的蒙文网页中，可以同时显示出英文和汉文，并且所有网页中的文字全部都是字符方式。