蒙古文網(wǎng)頁制作中的文本豎排方法

目錄TOC\o"1-5"\h\z1前言 2\o"CurrentDocument"2常用的蒙古文網(wǎng)頁制作方法 32.1圖片插入法 32.1.1抓圖法 32.1.2制圖法 32.2插入Flash動畫法 42.3控件技術(shù) 43樣式表與HTML代碼結(jié)合制蒙古文網(wǎng)站 43.1利用樣式表制作蒙古文網(wǎng)頁 43.2利用HTML代碼中元素的編輯模式 6\o"CurrentDocument"4結(jié)束語 7全文共9頁3519字蒙古文網(wǎng)頁制作中的文本豎排方法計算機與信息工程學(xué)院09蒙班李迪20092103399指導(dǎo)教師王斯日古楞副教授摘要網(wǎng)頁上蒙古文的顯示和編輯是蒙古文信息網(wǎng)絡(luò)化的眾多難題之一。蒙文字與其它文種相比在結(jié)構(gòu)和書寫方式都有自己的特點，另外蒙古文字庫編碼的不統(tǒng)一，大多數(shù)瀏覽器不支持等原因，一直影響蒙古文網(wǎng)頁制作。本文針對蒙古文的書寫特性，利用樣式表的文本特性和html代碼制作蒙古文網(wǎng)頁，使制作出的蒙古文網(wǎng)頁中的蒙古文本豎排的方式顯示。關(guān)鍵詞蒙古文；網(wǎng)頁；CSS1前言互聯(lián)網(wǎng)上的網(wǎng)頁已經(jīng)成為信息匯集的主要載體，但是以蒙古文為主的網(wǎng)頁非常少。在我國，蒙古文是一種應(yīng)用范圍相對廣泛的文字。目前，計算機字處理軟件幾乎均支持以下三種，從左至右書寫，從上向下?lián)Q行，例如英文、漢文、藏文等；從右至左書寫從上向下?lián)Q行，例如阿拉伯文、我國的維文等；從上向下書寫，從右至左換行，例如豎排漢文、日文等；從上向下書寫，從左至右換行，例如蒙古文等。蒙古文網(wǎng)頁缺少的主要原因是蒙古文是一種從上到下、從左向右豎排顯示文字，而目前我們的網(wǎng)頁制作環(huán)境還較難實現(xiàn)蒙古文這種特殊書寫習(xí)慣文字的顯示。目前制作網(wǎng)頁的工具很多，比較常用的有Dreamweaver、FrontPage等。利用這些工具可以編輯制作形式各樣、內(nèi)容豐富的網(wǎng)頁。但是它們不支持蒙文的書寫、顯示習(xí)慣。因此難以利用這些工具制作蒙古文網(wǎng)頁。到目前為止，在網(wǎng)頁上按照蒙古文書寫習(xí)慣顯示蒙古文還屬于網(wǎng)頁制作中的一個技術(shù)難題。我們在研究蒙古文網(wǎng)頁編輯與瀏覽技術(shù)的過程中，探索、總結(jié)出幾種設(shè)計蒙古文網(wǎng)頁的方法和技術(shù)，包括：圖片法、ActiveX控件技術(shù)、CSS和HTML等。2常用的蒙古文網(wǎng)頁制作方法2.1圖片插入法圖片插入法又可以分為兩種，一是抓圖法，二是制圖法。2.1.1抓圖法抓圖法是使用文字處理軟件如Word、Wpsoffice之類的軟件，用豎排的方法輸入蒙古文字。然后按鍵盤上的"PrintScreen"拷屏，再打開制圖軟件，粘貼成一個新文件，保存成適應(yīng)網(wǎng)絡(luò)傳輸?shù)摹癎if”、“Png”、“Jpeg”格式即可。如圖1所示。Computer&lnldrniiiMnTiLn^inLTriny圖1文字處理軟件制圖2.1.2制圖法制圖法是使用制圖軟件Photoshop、Fireworks先把需要制作的蒙古文字輸入成豎排的格式，保存成相應(yīng)的圖片格式例如圖2所示。圖片法不失為一個好方法，如果輸入的蒙古文字比較少，做起來非?？焖伲⑶覉D片的體積也不大，而且還可以為文字設(shè)置成各種各樣的字體，不需要考慮客戶端有沒有相應(yīng)的字體。圖片法有其優(yōu)點也有其不方便之處，如果是一篇長篇的文章，萬一做成的圖片有些錯別字，那就得重新做一遍了。另外網(wǎng)頁上傳送圖片造成數(shù)據(jù)量過大，也會影響瀏覽速度。圖2制圖軟件制圖2.2插入Flash動畫法這種方法就是在制作Flash動畫時將蒙古文字作成豎排效果，保存為.swf文件格式，再插入到網(wǎng)頁文件中。這種方法和插入圖片的方法類似。在用IE瀏覽時要有Flash插件。2.3控件技術(shù)ActiveX控件可以被插入到多種應(yīng)用程序中，具備這種功能的應(yīng)用程序稱為ActiveX控件容器。如微軟的網(wǎng)頁制作軟件FrontPage就能夠插入ActiveX控件。ActiveX控件在蒙文網(wǎng)頁中所起的作用主要有兩點：一是用于接收輸入的蒙古文字，二是將蒙古文字按“從上到下,從左向右”豎排顯示。插入ActiveX蒙文控件的方法,實現(xiàn)了在制作網(wǎng)頁過程中蒙古文字與其它文字同時錄入顯示，也可以通過編程實現(xiàn)在網(wǎng)頁上直接輸入蒙古文字的交互式動態(tài)網(wǎng)頁。目前有很多蒙古文網(wǎng)站都采用這種技術(shù)。這種技術(shù)要求客戶端在瀏覽網(wǎng)頁前，先下載ActiveX蒙文控件。如果蒙文控件中用的蒙文字庫編碼不是國際標(biāo)準(zhǔn)編碼，則還需要下載與控件相符的蒙文字庫oActiveX蒙文控件技術(shù)已經(jīng)比較成熟，目前已經(jīng)在蒙古文字編輯軟件和網(wǎng)頁制作中廣泛應(yīng)用。3樣式表與HTML代碼結(jié)合制蒙古文網(wǎng)站3.1利用樣式表制作蒙古文網(wǎng)頁我們?yōu)g覽過的大部分Web頁，文本中的文字走向都是從左向右的。文本自動換行時，新的一行位于前一行下方，從頁面的左側(cè)開始。但是我們也能夠看到，網(wǎng)頁上有時也會出現(xiàn)“豎排”文字。這些文字既不是用圖片表示的，也不是用專用控件來顯示的。它們是用CSS(CascadingStyleSheet)屬性定義的。早在1997年WorldWideWebConsortium(W3C)就在頒布HTML4標(biāo)準(zhǔn)的同時也公布了有關(guān)樣式表的第一個標(biāo)準(zhǔn)CSS1。做了一次重大革新，以前的HTML版本中，各種功能的實現(xiàn)是通過標(biāo)記元素實現(xiàn)的。而在樣式表中，把某些標(biāo)記屬性化了。CSS是HTML的一部分，建立樣式表的真正意義在于把對象真正引入了HTML,使得可以使用腳本程序（如JavaScript、VBScript）調(diào)用對象屬性，并且可以改變對象屬性，達到動態(tài)的目的，這在以前的HTML中是無法實現(xiàn)的。樣式表的另一項貢獻是簡化了HTML中各種繁瑣的標(biāo)記，使得各個標(biāo)記的屬性更具有一般性和通用性，并且樣式單擴展了原先的標(biāo)記功能，能夠?qū)崿F(xiàn)更多的效果。樣式表從CSS1的版本之后，1998年5月發(fā)布了CSS2版本，2003年又發(fā)布了CSS3版本，使樣式表得到了更多的充實。InternetExplorer5.5以上版本能夠支持CSS2,而其它瀏覽器還不支持。在CSS的文字處理屬性中有一個重要的屬性:writing-mode。該屬性用于設(shè)置對象書寫方向。在CSS2中對writing-mode定義如下：語法：writing-mode:lr-tb、tb-rl參數(shù)：lr-tb:從左向右，從上往下tb-rl:從上往下，從右向左示例：div{writing-mode:tb-rl;}其中writing-mode:tb-rl可以實現(xiàn)文字從上到下，從右向左的豎排功能。這對漢字來說是一件好事情，對蒙古文來說也帶來了希望，但不幸的是蒙古文是從左向右的豎排書寫形式。另外，在CSS2定義的文本布局中還有一個屬性：layout-flow：vertical-ideographic，該屬性可以實現(xiàn)文本豎排功能。但豎排方向還是從右向左。從CSS2中定義的文字豎排屬性可以看出，目前在網(wǎng)頁中實現(xiàn)的文字豎排功能主要是針對以漢字為主的東亞文字的。CSS2中沒有考慮蒙古文字應(yīng)該如何處理。2003年5月頒布的CSS3為制作蒙古文網(wǎng)頁帶來了生機。在CSS3中對writing-mode進行了重新定義。以下是CSS3對writing-mode的定義：表1樣式表定義writing-modedirectionblock-progressionCommonUsagelr-tbltrTb拉丁語，希臘語；斯拉夫語rl-tbrtlTb阿拉伯語；希伯來語tb-rlltrRl東亞一些地區(qū)tb-lrrtlLr蒙古語從上表1可以看到CSS3已經(jīng)定義了對蒙古文字的支持。但是到目前為止，還沒有見到任何一家公司出產(chǎn)的瀏覽器能夠支持CSS3的writing-mode屬性?，F(xiàn)在一些蒙古文網(wǎng)站已經(jīng)開始CSS2中定義的writing-mode屬性制作蒙文網(wǎng)頁。代碼如下所示?！磗tyletype="text/css">body,td,th{font-family:"MongolianBaiti";font-size:24px;color:#FFF;}body{background-color:#6FC;}.mw{font-size:18px;writing—mode:tb-lr;}</style>但是由于其豎排功能的局限性，還必須對網(wǎng)頁上顯示的蒙古文字進行如下形式的處理。在網(wǎng)頁編輯軟件或蒙文控件中臨蒙古文字，將輸入的蒙古文單詞按從右向左（或從后向前）反序處理，在網(wǎng)頁中對顯示的內(nèi)容進行文本寫模式設(shè)置Writing-mode二tb-rl對蒙文單詞作方向改變處理的程序片斷：這樣蒙古文才能夠在網(wǎng)頁中按照從上到下、從左到右的書寫習(xí)慣顯示出來。另外，這種處理方式在選擇網(wǎng)頁上的蒙古文字時，應(yīng)按從右向左方向拖動鼠標(biāo)，而不是通常習(xí)慣的從左向右拖動鼠標(biāo)。3.2利用HTML代碼中元素的編輯模式要實現(xiàn)蒙古文的豎排，必不可少的要應(yīng)用html代碼。contentEditable是html中的一個屬性。設(shè)置html的contentEditable二‘true'時，即可開啟該元素的編輯模式。Html中的contentEditable的屬性可以打開某些元素的可編輯

狀態(tài)。也許你沒用過contentEditable屬性。甚至從未聽說過contentEditable的作用相當(dāng)神奇?？梢宰宒iv或整個網(wǎng)頁，以及span等等元素設(shè)置為可寫。我們最常用的輸入文本內(nèi)容便是input與textarea使用contentEditable屬性后，可以在div，table，p，span，body，等等很多元素中輸入內(nèi)容。如果想要整個網(wǎng)頁可編輯，請在body標(biāo)簽內(nèi)設(shè)置contentEditable。contentEditable已在html5標(biāo)準(zhǔn)中得到有效的支持。使用標(biāo)簽<divcontentEditable="true"style二"writing-mode:tb-lr"title二"請從此處開始輸入">。當(dāng)contentEditable二"true"時，元素的編輯模式被開啟。當(dāng)style二"writing-mode:tb-lr"時，實現(xiàn)蒙古文字從上到下、從左到右的書寫形式。title=〃請從此處開始輸入〃是在插入處光標(biāo)顯示的內(nèi)容。制作效果如圖4所示。蒙古文翻譯網(wǎng)dd圖4內(nèi)容顯示4結(jié)束語從以上的介紹可以看出，利用CSS3中有關(guān)文本書寫方向的定義就可以非常簡單的制作出符合蒙古文書寫習(xí)慣的蒙文網(wǎng)頁?，F(xiàn)在所缺少的只是網(wǎng)頁瀏覽器能否支持CSS3中定義的屬性。目前可以利用html代碼與CSS樣式結(jié)合，靈活的把蒙文文本輸入到制作的蒙文網(wǎng)頁中，可以同時顯示出英文和漢文，并且所有網(wǎng)頁中的文字全部都是字符方式。另外，在制作蒙文網(wǎng)頁時需要使用UNICODE編碼的蒙文字庫，否則在瀏覽網(wǎng)頁時還需要同時下載相應(yīng)的蒙文字庫，才能顯示出蒙古文字。致謝在本網(wǎng)頁的設(shè)計和本文寫作過程中得到了王斯日古楞老師的精心指導(dǎo)，在此表示衷心的感謝。參考文獻鞏政，圖雅，陳巖?用樣式表制作蒙文網(wǎng)頁?內(nèi)蒙古大學(xué)學(xué)報（自然科學(xué)版）.2005,6.王俊義，尹雁君，孟磊等?蒙文網(wǎng)頁編輯與瀏覽技術(shù)的研究[A].少數(shù)民族語言信息技術(shù)研究進展[C].北京：中國科學(xué)院自動化研究所，2004.411?414.孟和吉亞，敖其爾，王俊義等?網(wǎng)頁上顯示蒙古文的幾種技術(shù)[A].少數(shù)民族語言信息技術(shù)研究進展[C].北京:中國科學(xué)院自動化研究所,2004,415?418.楊浩JavaScript入門與提高[M].北京:清華大學(xué)出版社，1999.http://www.microsoft.comTextVerticalMethodOfMongolianWebpageMaking.ComputerandInformationEngineeringCollegelevel2009MonglianclassLiDi20092103399DirectedbyWangsirigulengProfessorAbstractOnthewebpagedisplayingandeditingMongolianisoneofthemanyproblemsofMongolianinformationnetwork.Mongolianinstructureandthemodeofwritinghasitsowncharacteristicscomparedwithotherlanguages,inadditionMongoliatextlibrarycodeisnotunified,thereasonmostbrowsersdonotsupport,hasi