使用 CSS 实现中文直书排版
by Yan
还记得那个假古文么,可以把横排文字转换成竖排,把简体中文转换成繁体。能不能用 CSS 实现中文直书排版呢?
有大牛们已经做过不少尝试。他们发现,使用 CSS 制作中文直书排版,能做的事情很有限。在这个方面,众多浏览器中,目前最好的其实是微软的 IE。Firefox 能做的非常有限,1.5 版勉强可以使用 Column 模拟出直排效果。而 Opera 和 Safari 根本就不行。他们的结果在这里,你可以用 IE 和 Firefox 分别看下效果。有兴趣专研的朋友,可以看看这些资料:(1、2、3)。
有大牛们已经做过不少尝试。他们发现,使用 CSS 制作中文直书排版,能做的事情很有限。在这个方面,众多浏览器中,目前最好的其实是微软的 IE。Firefox 能做的非常有限,1.5 版勉强可以使用 Column 模拟出直排效果。而 Opera 和 Safari 根本就不行。他们的结果在这里,你可以用 IE 和 Firefox 分别看下效果。有兴趣专研的朋友,可以看看这些资料:(1、2、3)。
注:使用 IE 的话,上面一段应该是直排的,使用 Firefox 的话,下面一段是直排的。
我用的 Opera,没有直排的 🙂
用css实现竖排的话,假古文最重要的一个特性,防GFW就没了
要是可以用css把原本竖排的文字,显示成横排,我倒觉得用处很大
用CSS实现竖排,正好再次强调假古文的防范功能。CSS只是调整了显示,并没有调整内容,而防火墙只看内容,不管显示。
这个还是IE做得好,把E文单词都转向了,FX没有转E文。
两者都有用到非标准的CSS。如果是阿拉伯语无需竖排,只需要标准的direction:ltr就可以了,不过英文也被转向了。
如果是防止过滤,那么可以用软件把文本内容反向写在网页中,然后用css的direction:ltr再反一次即可。
MingLiu是繁体OS上的常用字体。可以改用@KaiTi_GB2312或者@simsun
其实 Hui 的方法并不能解决问题。direction只是说明文本是从左向右呢,还是从右向左。并不会影响文本内容上的顺序!
除非读者知道从右向左读,不过这可能比较明显!
我知道假古文的本意是防GFW,但还有很多人有纯粹为了获得直排的需要,能用CSS实现我觉得还是更加 elegant。
再说使用假古文防GFW,只是变态形势下的非正常手段。
直行印刷品的缺点是需要眼球作大幅度运动,尤其是现代印刷书籍总是长大于宽。
人的视觉通常是横向范围大于纵向范围。
随着时代的发展,这个直行方式注定应用范围不大,阿拉伯数字和拉丁字母都需要转向,手写起来太慢。在科技文章里,就算把数字和字母都转向了,公式不能也转向。
阿拉伯文是横行、右起,遇到拉丁文混杂的时候更乱(手写的话,还得算好距离)。
即使直排,也不是说要从页顶一直直排到页底,可以分成好多块。:)
不过我也认为现代直书应用范围不会很大。
阿拉伯文混杂拉丁文时,不是把拉丁文也从右到左写么?那样是不是方便一点。:)
http://arabic.cnn.com/2006/middle_east/5/15/israel.explosive/index.html
.tneinevnoc不会怕恐
[…] http://yanfeng.org/blog/819/ […]
IE 在5.5版就已经引入了这个特征:
http://www.microsoft.com/china/MSDN/library/archives/MSDNonline/features/articles/verticaltext.asp
奇怪的是,作为一个W3C的标准,为什么FF反而没有引入?
我爱妞妞: 我的意思是把“如果是防止过滤”在网页中反向写成“滤过止防是果如”,然后用direction:rtl。
呵呵。我知道你的意思。不过这样够费劲的!
[…] 月初的時候辦了場HappyDesigner聚會,跟zonble聊到說,寫個交換日記好像不錯。要去粽大師家寫文章,當然要準備點東西,所以實驗了一下直書排版的可行性,去寫了篇「CSS中文直書排版」。不過看到桑林志的討論,有朋友講說「用CSS實現豎排的話,假古文最重要的一個特性,防GFW就沒了」、「用CSS實現豎排,正好再次強調假古文的防範功能」……害我有點啼笑皆非(汗)。倒是秀給Hedger看的時候,他很捧場地說,用來呈現中文廣告,效果應該不錯。我也覺得這個應用應該挺好玩的。另外有趣的一點是,Firefox Windows版本跟Mac版本的呈現方式居然不一樣,請看比較圖:Windows、Mac。 […]
小弟我正在撰寫直排中文的網頁,尚未完成。請各位先敬蒞臨指教。
http://www.users.bigpond.net.au/winebear/index.html
[…] 这些天在做这个WP的skin设计,设计的过程中涉及到文字竖排显示的问题,怕到时候做页面无法实现所以搜索了一下相关文章。且自己做了些研究。看桑叶的这个研究报告,使用了一种很变态的方法就是字体样式前加@。So,我觉得很不实用,特别是在英文的时候,且中文还会倒过来,反正是各种各样的问题都会有。 还有一种方法就是writing-mode,相关用法大家可以去搜索一下就行了,且这个方法只针对IE有效。所以我在写css的时候用了hack写法=。= […]
[…] 这些天在做这个WP的skin设计,设计的过程中涉及到文字竖排显示的问题,怕到时候做页面无法实现所以搜索了一下相关文章。且自己做了些研究。看桑叶的这个研究报告,使用了一种很变态的方法就是字体样式前加@。So,我觉得很不实用,特别是在英文的时候,且中文还会倒过来,反正是各种各样的问题都会有。 还有一种方法就是writing-mode,相关用法大家可以去搜索一下就行了,且这个方法只针对IE有效。所以我在写css的时候用了hack写法=。= #story_list .content h3{background:url(images/bg_titile.gif); float:left; width:1em; padding:5px 5px 1em; font:2em “微软雅黑”, “宋体”; margin:0 0 0 10px; line-height:1.1em; overflow:hidden; *writing-mode:tb-rl; *letter-spacing:2px; } […]
Chrome……上下两端都不是直排 XD
支持IE(6/7/8)、FF、WebKit
期待HTML5能解决好类似问题