开心老爸

文字竖排

2011-03-30,02:12

在知乎网看到一个问题:如何在网页中竖排显示中文字体?

因为对这个问题比较感兴趣,所以仔细看了下面的各个回答,毕竟作为中国人,如果网页可以漂亮、清晰竖向排列......

这里整理一下看到的各种回答。很遗憾的是,这么多方法,其实都算不上完美。希望完美竖排解决方案能尽快出现。

Lawrence Li 在回答中给出了三个延伸阅读的网页。第一个是 jjgod 的一篇 blog :《网页 CJK 竖排的最新进展》文中提到了 CSS 实现文字竖排的方式;第二个是一个用 JS 实现文字竖排的解决方案:涅槃(nehan),是日本人的创造;第三个是国人在涅槃基础上制作的文字竖排的 wordpress 风格

其中,用 CSS 实现文字竖排理论上来说当然是最好的解决方式,但是无奈现在各浏览器刘这些相关的 CSS 属性支持都不太好。所以单纯地使用 CSS 来定义文字的竖排、排列方向等等,看来还要等很久呢。

至于上面提到的 JS 实现方式:涅槃,mimiqiao 提到了一篇台湾人写的 blog :《CSS3 與 Javascript 東亞文字直排》(墙外),那篇 blog 里提到涅槃实现文字竖排的方式是把文字装进 <table/> ,并且要求原文内容要遵循一定的规则,在一定程度上会打破语义什么的,所以作者更倾向于另外一个 JS 实现方式:竹取(taketori)。我也引用原文来简单介绍一下竹取:

...会用 CSS 的 transform 把整个 block 转 +90 度,然后侦测裡面的汉字一个一个用 <span/> 包起来转 -90 度,处理断行归则与标点等等...因为这样用可以处理几乎所有 html 的排版,像是 table, margin, padding 等等。呈现的结果相当优秀...

另外,进入竹取的网站,会看到一个输入框,输入任何网站然后回车,会把你输入的那个网址用文字竖排的形式显示出来,很有意思。

本文也使用了竹取提供的 JS ,显示效果应该还是不错的,不过比较别扭(或者说更好?)的地方是,英文全是顺时针旋转了 90 度的,阅读的时候你得扭转脖子......哈哈,久坐电脑桌前,我们活动一下脖子吧。

除了上述的一些方式,Shawphy 还提到维基文库用人肉给每句文字写入 CSS 的方式实现文字竖排。也就是说人工判断在什么地方另起一列,每一竖列都用 div 标签包裹起来并且加上 CSS 属性:width:1.5em; float:right;

宽度 1.5em 可以确保每个 div 元素在横向上只写入一个中文字符,靠右浮动则保证文字从右向左排列。这种做法比较适合小范围使用,而且竖列的文字长度基本要靠人工设定。总之比较麻烦。

说到这里,其实如果忽略语义的话,直接把一段文字像摆积木一样"摆"成竖向排列的也是个简单的做法。比如这里就提供了一个工具,把一段文字摆成竖列的。而且,不经意间,这样摆出来的文字,还有了"墙免疫"属性!因为搜索引擎或者"",这些机器们根本不知道你在说什么......

:如本文所示,即便是引入了一个巨大的 JS 文件来完成这一简单的竖排工作,仍然会有很多不尽人意之处。比如图文混排时改变浏览器窗口会造成排版混乱;比如中文的"避头点"完成的不太好----列首列尾不应出现标点符号。再次希望中文竖排的完美解决方案诞生,顺便附上 Yin Dian 给 LaTeX 开发的割注 gezhu 宏包演示效果图,漂亮啊:

美丽的竖排文字

2011/03LearningWeb

fin.

哈喽,我是定格咖啡创始人 dimlau本站界面由我设计。

你可以在其他地方关注我:新浪微博腾讯微博Google+

© 2007-2018 dimlau.