蒙文网站制作技术
将制作蒙文网站的基本知识一一解说,如有遗漏或说错的地方望大家指正。
一、竖排显示方法
因为传统蒙文须要竖排显示,所以这是制作一个蒙文网站的最基本要素。
普通的网页文字竖排显示需要使用css样式去实现,而竖排样式因浏览器不同而写法也不同,具体如下(以下示例未考虑IE6):
-moz-writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
示例:
http://blog.noruu.com/HtmlExample/Example_1/index.htm
Download
二、字体嵌入
因为现在的操作系统,不管是windows还是linux,默认都不安装蒙文字体,或者win7已经默认安装了蒙文字体了,但是因为兼容等原因也不能使用。所以为了在任何电脑上都不下载字体就能正常显示蒙文,我们需要将蒙文字体嵌入到网页里,这样这个网页一般情况下都能正常显示蒙文,而不需要专门下载字体。
目前网站使用的字体基本上是“蒙科立”公司的字体,这个字体为了网页上显示的漂亮一些,专门做了调整,使其看起来又清晰又漂亮,所以我推荐使用蒙科立字体嵌入到网页中(请注意版权问题!)。具体嵌入方法为:
@font-face {
font-family: 'MenksoftHawang';
src: url('Fonts/MenksoftHawang.eot');
src: url('Fonts/MenksoftHawang.eot?#iefix') format('embedded-opentype'),
url('Fonts/MenksoftHawang.ttf') format('truetype'),
url('Fonts/MenksoftHawang.woff') format('woff'),
url('Fonts/MenksoftHawang.svg#MenksoftHawang') format('svg');
font-weight:100;
font-style:normal;
}
这种方法是CSS3最新标准的方法,支持的浏览器有:chrome, ie 8及以上, safari(我的机器上会死机), firefox等,按道理在Iphone和android手机上也能显示,但是我没试过,如果有人试过的话请给我一个回复,让我确认一下。
示例:
http://blog.noruu.com/HtmlExample/Example_2/index.htm
Download
相关网站:
WOFF 使用指南:http://www.typeisbeautiful.com/2010/01/1903
三、在线输入法
因为现在操作系统默认都没有蒙文输入法(win7的蒙文输入法因兼容问题暂时不考虑),所以最好是在网页里嵌入在线输入法,以保证有录入蒙文需求时能不用下载输入法也能正常使用。
示例:
http://blog.noruu.com/HtmlExample/zaixian/menk_test.html
(兼容IE和chrome等浏览器!我也想开发一个功能比较全的输入法,比如能够词组输入或智能输入的输入法,看时间吧!)
四、蒙文在线编辑器
竖排在线编辑器在录入文本时非常有用,但是由于浏览器开发商(如微软和google)以前将未支持蒙文样式竖排编辑功能,但是随着CSS3标准的普及与推广,这些厂商开始支持蒙文样式竖排编辑功能,具体我所知道支持此特性的浏览器是IE8及以上版本和chrome浏览器,而chrome浏览器支持的比IE的要好,本人开发了一种蒙文在线编辑器,已经在公司内部开始使用,我将讲解在普通的网页里如何嵌入这个编辑器的方法。
试用主页:
http://blog.noruu.com/meditor/_examples/index.html
完整试例:
http://blog.noruu.com/meditor/_examples/completeDemo.html