« 與互動裝置有關的部落格分享 | 為何使用表格排版是不明智的 »
遇見中文直排
2007年12月15日週六21:34
留下您的回應,或將本文收藏到








© 風痕影,採用「創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款」授權。
猶記得多年以前,曾經誤入藝術家姚大鈞的《新邏輯藝文網》;這網站本身就是個藝術品,以黑色的底搭配鮮艷的簡單圖案,雖然簡約卻又不失藝術性,並給人一種神祕的感覺。直到後來,在報上看見了姚大鈞的名字,才知他是個知名人物。
文字直排機
在這個網站裡,有許許多多的文字作品,還有用機器造出的新詩以及仿歷史小說的實驗小說。也是因為這篇小說,至今我仍認為反文是寫給鬼看的呢!
該站有大半的內容全都弄成直排,而且還說他們造出了一個自製的「文字直排機」,和那造出新詩的機器一樣都引起我極大的興趣。後來,吾始學CSS,得知IE對CSS有中文直排的擴充,但那畢竟不是標準,因此便去信尋求此直排程式,而他則說要問另一個人。可惜的是,自從我轉問另一人後便從此石沉大海。
假古文
時至今日,CSS標準中早已出現了由右往左排的語法(direction: rtl),但IE的直排擴充則是直到CSS 3草案裡才出現(writing-mode),而Firefox也還不支援,因此在IE以外的瀏覽器上要達到直排除了剛才的直排機,似乎也沒其他的辦法。直到後來,我發現了一個叫做「假古文」的網站;但在此時,我已沒多少讓文字直排的慾望了。
這個工具是對岸的清華大學做的,以JavaScript寫成,可以輕易地將文字轉為直排,只需選擇每頁的寬高、每行的分隔符號即可。據說這個工具也被拿來避過對岸的審查。
用分欄模擬直排
這個問題後來終於解決了!就在去年的時候,hlb寫了一篇文章,十分有意思。由於Firefox本身已經做出CSS 3的分欄效果,且已以擴充語法的形式出現(-moz-column),於是zonble就先把文字設成由右往左排列,再把每欄的寬度設為1em就解決了!
不過呢,由於Firefox會在這種情況下把中文的標點往右挪,為了避免文字重疊,所以只好再用-moz-column-gap來設美欄的間距;因此,完整的語法如下:
direction: rtl;
-moz-column-width:1em;
-moz-column-gap:1em;
到底為什麼標點會跑掉呢?
老實說,我覺得跑掉以後的樣子很像是古早時候的標點排法,也就是全都放在文字的右方,其實還滿有趣的,但依然有些困惑。直到寫這篇文章的今天,我才發現hlb的文章底下其實早已有人解釋了原因:原來是為了避頭點啊!為什麼之前我會沒想到呢?
那麼避頭點是什麼呢?其實就是避免標點符號處於一行的開頭啦!不過,我還是在之前找了資料之後,才知道這功能其實不僅是Word等文書處理軟體及排版軟體支援,原來我們平常所用的瀏覽器本身就有這種功能唷!所以Firefox才會出現剛才所說的那個問題啦!
剛才搜尋了一下,找到兩篇當時看到的文章,分別是老貓寫的出版辭典,以及《Materiality‧避頭點》,可惜沒找到當初說明瀏覽器也有此功能的文章。
中文到底該從左往右還是從右往左?
當初看到上面那兩篇文章時,同時也找到了一些資料;礙於待會兒我還要做畢製的東西,就不再把他們挖出來了,直接把當時得到的結論告訴大家:
中文直排的時候應該是從右往左的,這點照理來說應該眾所皆知,可是我依然看過有人由左往右排,而且資料中也說有人習慣橫排後便不知此種規則。可是,如果是單行的中文橫排的時候,到底該怎麼擺才對呢?
目前看來似乎是左起和右起都有,支持右起的人通常都是以扁額為論點。可是,我當時找到的資料卻突然使我恍然大悟:匾額根本就不是橫排,它只是一字一行的直排!
再往下看,覺得其所言十分合理。因為在匾額的左右有時會有一些文字說明贈送給誰,或是題字的人是誰;這時,你就會發現那些文字全都是由上到下、從右往左的直排。也就是說,以後如果要寫單行的橫排中文時,其實無論從哪邊開始都是可以的,端看你自己是把它當作橫排或是一字一行的直排。
網頁之翼的相關教學
老實說,我明明記得自己在數個月前,甚至更久以前寫過一篇文章,把這篇文章裡談的所有內容全部寫過,卻怎麼也找不到,也沒見到有相關草稿。恰巧今天看到了相關的東西,所以再次將他們集結起來寫成文章。
順帶一提,我的教學網站網頁之翼裡,我也寫了篇直排教學,裡頭所用的範例引自我零三年三月九日於DOB發表的教學。印象中,那好像是我學到IE的語法之後沒多久就寫的,由此也可大致看出我開始學CSS的時間。順帶一提,我在零五年六月十三日搜尋自己暱稱的時候,發現那篇DOB的教學被引用了,該文位於《萎萎陰陰‧咱病態地迷戀直排》。
其實他也有提到我說的這些東西,或許我是把他這篇文章當成我印象中自己寫過的文章了?
後記
寫完這篇文章以後,我突然想起早年有人以「人的眼睛是左右排列的」來說明中文直排是多麼地不符人性,可我卻一直覺得這種論點十分古怪;畢竟,眼睛又不是不能上下運動。不過,剛才重新搜尋了一下,又發現了一種說法,是說我們在看直排的字時頭會不斷上下搖動。老實說,我也不知道他說的是否真實,因為我總覺得自己根本就只有眼睛在動啊XD!當然,也可能是因為我看專心了以後渾然不覺吧?
維克拉倫在廿二日補充道,眼球肌肉其實會使眼睛的上下移動較不費勁,而且早有研究說人類瀏覽垂直頁面時的效率比水平頁面高上許多。
還有,剛才也找到一個談文字直排的文章,該blog叫做《符號工作站》,其設計十分清爽,裡頭全都是跟華語文有關的文章,所以把它納入我的訂閱清單。
有趣的是,它的文章標題都有陰影且為黑體,因此全都弄成圖片,我想可能是用後端程式動態生成的吧?
留下您的回應,或將本文收藏到








© 風痕影,採用「創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款」授權。
vertical lines in chinese
6則回應
-
阿怪 | 2007-12-19 04:17 |
FYI...「匾額根本就不是橫排,它只是一字一行的直排」
有個術語叫「字字抬頭」...
順口提一下
BTW 潛水一陣子了
你的blog很好看...(不知道該說甚麼)
thanks for these articles.....
Aguai -
維克拉倫 | 2007-12-22 05:51 |
人眼之所以會長成左右並列, 是緣自於從脊椎動物的先祖──脊索動物門起, 身體基本構造就有著維持左右均衡的方式發展的趨向。不過這是無關的題目...
人眼雖然是左右排列的, 但由於眼肌的限制, 眼球向左右移動所費的勁卻比上下移動為大。當書本的形式出現時, 各地域的文明都不約而同普遍選擇了直式而非橫式為主流外形。1980 年代 Apple 所推出的 Mac 電腦以直式螢幕為主, 頗受排版界歡迎;電腦螢幕從一開始出現時, 就以文字由下向上捲動的方式呈現, 而 accessibilities 的相關研究早已證實人眼在上下瀏覽連續頁面的效率高於左右的橫軸式版面。
時至今日, 一般網站與部落格系統在設計欄位配置時, 明顯也習慣於把從上至下的邊列做得比由左至右的導覽列長, 而一般人的部落格本文區即使在普通的寬形 4:3 螢幕顯示時, 也大都設定成高>寬的單頁視域。所以就人眼的構造來看, 或許直式版面才符合自然呢。
PS. 風同學的 blog 版式確實很耐看。 :)
-
吉野夫 | 2009-09-07 21:22 |
做了直排中文的網站:http://members.iinet.net.au/~winebear/ 請多指教。
誰引用了本文
- I'm not a designer! ::PIXNET BLOG:: | 2008-07-10 15:19