文字竖排

今日闲逛,走到了维基文库水调歌头 (明月几时有),恰巧发现他居然是文字竖排的,很有兴趣一看。

网上目前两种方法竖排,
一种是用 writing-mode:tb-rl;
另一种是用 layout-flow: vertical-ideographic;
但遗憾的是,这两种方法都基本是 IE Only 的……
那么维基文库是如何做到的呢?随便翻看一下代码,恍然大悟~

水調歌頭
 
蘇軾 
 
明月幾時有 
把酒問青天 
不知天上宮闕 
今夕是何年 
我欲乘風歸去 
又恐瓊樓玉宇 
高處不勝寒 
起舞弄清影 
何似在人間 
 
轉朱閣 
低綺戶 
照無眠 
不應有恨 
何事長向別時圓 
人有悲歡離合 
月有陰晴圓缺 
此事古難全 
但願人長久 
千里共嬋娟 

虽然代码不是很优雅(自动生成的……)但大概意思也知道了。设置宽度为1.5倍的字宽,保证列距,然后让所有div右浮动。
很简单又很有用的技巧,兼容各个主流浏览器~

最后引用一句,对于IE“不應有恨……”,他有些私有属性还是挺有趣的……
(注:原文中“恨”是遗憾的意思。)

《文字竖排》有8个想法

  1. 呵呵,想法不错。前几天项目中还遇到竖着的文字,结果ff始终不知道如何实现,用这个去试试看看。

  2. 我一开始是在维基大典发现这种方法的。挺好的,反正一般需要竖排的也只不过是很少的一段。

  3. 这个我也想到了。但这个方法,在中则不好用。限制了文字长度。超出长度时,不知自动换“竖”行。

发表评论