使用writing-mode实现中文竖排

在网页中实现中文竖排最方便的方法就是使用CSS的writing-mode属性,而最新的webkit已经支持这个属性了,但还是不能直接使用,需要在它前面加个-webkit-前缀。如下:

-webkit-writing-mode: vertical-rl;

在中国使用最多的两个浏览器引擎,一个是webkit,一个是IE的Trident,而IE本身就已经支持writing-mode属性,那么现在等于大多数的中文使用者都能够正确浏览到网页中竖排的中文。而使用CSSfloat属性,可以轻松实现古书中的排版样式,查看演示。如下图:

writing-mode

HTML代码如下:

<div>
  <h2>本纪第一 太祖一</h2>
  太祖开天行道肇纪立极大圣至神仁文义武俊德成功高皇帝,讳元璋,字国瑞,姓硃氏。先世家沛,徙句容 ,再徙泗州。父世珍,始徙濠州之钟离。生四子,太祖其季也。母陈氏,方娠,梦神授药一丸,置掌中有光,吞之,寤,口余香气。及产,红光满室。自是夜数有光起,邻里望见,惊以为火,辄奔救,至则无有。比长,姿貌雄杰,奇骨贯顶。志意廓然,人莫能测。
</div>

CSS代码如下:


body{
  padding:5px;
  background:#fff;
}
div{
  width:300px;
  height:275px;
  margin:0;
  padding:0;
  line-height:16px;
  font-size:14px;
  line-height:1.4em;
  -webkit-writing-mode: vertical-rl;
  writing-mode:tb-rl;
  letter-spacing:2px;
}
h2{
  float:left;
  margin:0;
  padding:0;
  font-size:28px;
  line-height:32px;
  margin-bottom:10px;
}

下面是JsFiddle的在线演示,如果不能正确显示请直接点这里查看在线演示


但是使用搜狗浏览器的高速模式时,它的显示样式是这样的,如下图:

writing-mode

看来搜狗没有使用最新的webkit。最新的搜狗浏览器4.2版本已经支持中文竖排了。

网页中文竖排后,会给代码带来很多改变,如:

  • line-height控制竖行之间的距离了,也就是说line-height变成控制字的水平距离的了;
  • letter-spacing控制一行中字与字之间的距离,也就是说letter-spacing变成控制字的垂直距离的了;
  • 滚动鼠标滑轮时,普通样式网页会上下移动,但如果是中文竖排,网页就要左右移动了,这种效果可以使用JavaScript实现;
  • 有提示时,如元素的title属性,属性中的文字仍然是默认的横排,如下图,但这个可以用js,如jqTip等创建div,然后在div里面使文字竖排显示。

writing-mode

不过到现在火狐Opera仍然不支持writing-mode属性。

参考:

此条目发表在 前端 分类目录,贴了 , , 标签。将固定链接加入收藏夹。