文字竖排

dimlau

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

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

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

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 宏包演示效果图:

20210823修复竖排脚本,但因脚本老旧,展示效果不是太好。

延伸阅读

本站架设在 RamNode VPS

Grav -> Hugo