真正的文字竖排

POPOEVER在上个贴子中说

引用:

---

文字竖排有两种方法(CSS)：
1. writing-mode: tb-rl
2. layout-flow: vertical-ideographic
不过这两种方式都会自动由右向左排，就像中国的古文格式，不知道用direction: ltr 能否强制其由左向右排，还没试过。

---

well

<style>
#webfx {
    position:        absolute;
    background:        red;
font-family:     Verdana, Helvetica, Sans-Serif;
    top:            50px;
    right:            100px;
    width:            20px;
    writing-mode:    tb-rl;
    filter:            flipH() flipV() alpha(opacity=50);
}
</STYLE>
<div id=webfx>竖着的文字 我是 <a href=#>Poorfish</a></div>
<br>
<div style="layout-flow: vertical-ideographic"><p>为什么，唔唔!!<p>把这个人给我拖出去</div>


去MSDN看了看
-----------------------------------------------------------------------------
writing-mode
HTML { writing-mode : sFlow }
Scripting object.style.writingMode [ = sFlow ]

sFlow的值為:
lr-tb
Default. Content in the object flows horizontally—from left to right, top to bottom. The next horizontal line is positioned underneath the previous line. All glyphs are positioned upright. This layout is used in Roman-based typography.

tb-rl
Content in the object flows vertically—from top to bottom, right to left. The next vertical line is positioned to the left of the previous line. Wide-cell glyphs are positioned upright; nonwide-cell glyphs—also known as narrow Latin or narrow Kana glyphs—are rotated 90-degrees clockwise. This layout is used in East Asian typography.

很好記哦,從上到下top-bottom就是tb,從左到右left-right就是lr,從右到左right-left就是rl

layout-flow
HTML { layout-flow : sFlow }
Scripting object.style.layoutFlow [ = sFlow ]

sFlow的值為:
horizontal
Default. Content in the object flows from left to right, and the next horizontal line is positioned underneath the previous line. This layout is used in most Roman-based documents.

vertical-ideographic
Content in the object flows from top to bottom, and the next vertical line appears to the left of the previous one. This layout is used in East Asian typography.




writing-mode版本：IE5.5+专有属性　

语法：

writing-mode : lr-tb | tb-rl

参数：

lr-tb : 左-右，上-下
tb-rl : 上-下，右-左

说明：

设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右，上-下的书写方式。但是亚洲语言常有上-下，右-左的书写方式。
当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。
对应的脚本特性为writingMode。

示例：

div { writing-mode: tb-rl; }
===================================================

layout-flow版本：IE5.5+专有属性　

语法：

layout-flow : horizontal | vertical-ideographic

参数：

horizontal : 　对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 　对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系

说明：

设置或检索对象内文本的流动和方向。
当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。
对应的脚本特性为layoutFlow。

示例：

div { layout-flow : horizontal; }