itVincent Blog - Java Working Fun!

技术引领时代!
posts - 117, comments - 181, trackbacks - 0, articles - 12

[转]使文字竖排的方式(兼容IE FF)

Posted on 2009-05-08 09:29 itVincent 阅读(911) 评论(0)  编辑  收藏 所属分类: html & css

文字竖排

2009年4月13日 – 21:36

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

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

  1. <div style="font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;">水調歌頭</div> 
  2. <div style="width:1.5em; float:right;"> </div> 
  3. <div style="width:1.5em; float:right;">蘇軾 </div> 
  4. <div style="width:1.5em; float:right;"> </div> 
  5. <div style="width:1.5em; float:right;">明月幾時有 </div> 
  6. <div style="width:1.5em; float:right;">把酒問青天 </div> 
  7. <div style="width:1.5em; float:right;">不知天上宮闕 </div> 
  8. <div style="width:1.5em; float:right;">今夕是何年 </div> 
  9. <div style="width:1.5em; float:right;">我欲乘風歸去 </div> 
  10. <div style="width:1.5em; float:right;">又恐瓊樓玉宇 </div> 
  11. <div style="width:1.5em; float:right;">高處不勝寒 </div> 
  12. <div style="width:1.5em; float:right;">起舞弄清影 </div> 
  13. <div style="width:1.5em; float:right;">何似在人間 </div> 
  14. <div style="width:1.5em; float:right;"> </div> 
  15. <div style="width:1.5em; float:right;">轉朱閣 </div> 
  16. <div style="width:1.5em; float:right;">低綺戶 </div> 
  17. <div style="width:1.5em; float:right;">照無眠 </div> 
  18. <div style="width:1.5em; float:right;">不應有恨 </div> 
  19. <div style="width:1.5em; float:right;">何事長向別時圓 </div> 
  20. <div style="width:1.5em; float:right;">人有悲歡離合 </div> 
  21. <div style="width:1.5em; float:right;">月有陰晴圓缺 </div> 
  22. <div style="width:1.5em; float:right;">此事古難全 </div> 
  23. <div style="width:1.5em; float:right;">但願人長久 </div> 
  24. <div style="width:1.5em; float:right;">千里共嬋娟 </div>

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

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


只有注册用户登录后才能发表评论。


网站导航: