writing-mode实现竖直排版

好久没有写关于css相关的博客了，结合这周的工作，介绍给大家一个关于很少接触的css特性“writing-mode”。

writing-mode介绍

前些天，产品妹子问我能不能实现关于字体的竖版的排版方式，我犹豫了一下，好像曾经在日本的旅游网站见过,查了一下果然有一个属性，没错就是它 - -“writing-mode”,通过设置就可以实现类似古诗词相关的竖版样式。高大上啊，来一个栗子先：

1
2
3
4
5
6

<h4>诗情</h4>
<p>多少语言和往事<br>都在微笑中消溶<br>　　我们走进了夜海<br>　　去打捞遗失的繁星</p>
<div class="verticle-mode">
    <h4>诗情</h4>
    <p contenteditable>多少语言和往事<br>都在微笑中消溶<br>　　我们走进了夜海<br>　　去打捞遗失的繁星</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
    *width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
    *display: inline;
    *writing-mode: tb-rl;
}
.verticle-mode h4 {
    *float:right;
}

效果

是不是好清新，好湿的排版来自css。

兼容效果

设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式，但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
作为IE的私有属性之一，IE5.5率先实现了 writing-mode ，后期被w3c采纳成标准属性；
此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。
对应的脚本特性为writingMode。

细节介绍

• writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb(ie) | tb-rl(ie)
• 默认值：normal
• 适用于：除 <’ display ‘> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素
• 继承性：有
• 动画性：否
• 计算值：特定值

各个属性具体的实现效果：

• ← Previous Post
• Next Post →