文字竖排
2009年4月13日 – 21:36今日闲逛，走到了维基文库水调歌头 (明月几时有)，恰巧发现他居然是文字竖排的，很有兴趣一看。
网上目前两种方法竖排，
一种是用 writing-mode:tb-rl;
另一种是用 layout-flow: vertical-ideographic;
但遗憾的是，这两种方法都基本是 IE Only 的……
那么维基文库是如何做到的呢？随便翻看一下代码，恍然大悟~
- <div style="font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;">水調歌頭</div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">蘇軾 </div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">明月幾時有 </div>
- <div style="width:1.5em; float:right;">把酒問青天 </div>
- <div style="width:1.5em; float:right;">不知天上宮闕 </div>
- <div style="width:1.5em; float:right;">今夕是何年 </div>
- <div style="width:1.5em; float:right;">我欲乘風歸去 </div>
- <div style="width:1.5em; float:right;">又恐瓊樓玉宇 </div>
- <div style="width:1.5em; float:right;">高處不勝寒 </div>
- <div style="width:1.5em; float:right;">起舞弄清影 </div>
- <div style="width:1.5em; float:right;">何似在人間 </div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">轉朱閣 </div>
- <div style="width:1.5em; float:right;">低綺戶 </div>
- <div style="width:1.5em; float:right;">照無眠 </div>
- <div style="width:1.5em; float:right;">不應有恨 </div>
- <div style="width:1.5em; float:right;">何事長向別時圓 </div>
- <div style="width:1.5em; float:right;">人有悲歡離合 </div>
- <div style="width:1.5em; float:right;">月有陰晴圓缺 </div>
- <div style="width:1.5em; float:right;">此事古難全 </div>
- <div style="width:1.5em; float:right;">但願人長久 </div>
- <div style="width:1.5em; float:right;">千里共嬋娟 </div>
虽然代码不是很优雅（自动生成的……）但大概意思也知道了。设置宽度为1.5倍的字宽，保证列距，然后让所有div右浮动。
很简单又很有用的技巧，兼容各个主流浏览器~
最后引用一句，对于IE“不應有恨……”，他有些私有属性还是挺有趣的……
（注：原文中“恨”是遗憾的意思。）
7 Responses to “文字竖排”
蚂蚁线 on 四 14, 2009
以前一直用BR，效果很坏
Reply
闲耘 on 四 14, 2009
赞，把样式抽出来，就可以控制显示为好几种格式了。
Reply
cssrain on 四 17, 2009
呵呵，想法不错。前几天项目中还遇到竖着的文字，结果ff始终不知道如何实现，用这个去试试看看。
Reply
挖客 on 四 22, 2009
有时候在写导航时图省事
会这样写
Reply
李之瀾 on 八 21, 2009
每句話都要改的話，還不如截圖。。。有沒有更自動化一點的辦法？
Reply
醉鄉子 on 八 30, 2009
我一开始是在维基大典发现这种方法的。挺好的，反正一般需要竖排的也只不过是很少的一段。
Reply
i.am.Ben on 九 2, 2009
想到有人说考研的数据结构：该暴力就暴力，别管什么时间复杂度了…
Reply