文字竖排 今日闲逛,走到了维基文库水调歌头 (明月几时有),恰巧发现他居然是文字竖排的,很有兴趣一看。
网上目前两种方法竖排, 一种是用 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“不應有恨……”,他有些私有属性还是挺有趣的…… |
Music
Announcement
New Visitor
About/Statistics
用户名称:陈永勤 会员等级:普通会员 实时积分:1163 日志总数:57 评论数量:83 建立时间:2009年03月20日 |