真正的文字竖排
|
|
|
|
作者：佚名
来源：InterNet 加入时间：2004-11-24 |
|
本文翻译自msdn，某些示例已省去。
在 Internet Explorer 5.5 中使用垂直布局
Mark Grinols
Microsoft Corporation
2000年10月
摘要： 垂直布局是 Microsoft Internet Explorer 5.5 的一种主要的新功能。本文对垂直布局的基本概念进行了探讨，帮助您避免某些常见的错误。
注意： 本文中的示例需要 Internet Explorer 5.5 或更高的版本.
什么是垂直布局？
当您浏览几乎所有的 Web 页时（如本页），段落中的文字走向都是从左向右的。文本自动换行时，新的一行位于前一行下方，从页面的左侧开始。这是非常自然的，你甚至不会注意到它。
但是对于世界上的很多地方，这却不是天经地义的。如果你曾经看到过日文或中文的书籍或杂志，那么你就知道其印刷的文字通常采取垂直布局。文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。例如报纸的大字标题就在每页右侧自上而下地安排；路牌、情书、以及大多数其它形式的书写文字也是按照这种方法安排的。Web 页是个例外，HTML 无法处理这种布局。但是，这并没有阻止 Web 作者进行从位图到非常窄的表单元格的各种尝试。然而到目前为止，仍然没有找到能够实现垂直布局的令人满意的方法。
Writing-mode 的属性
在 Microsoft® Internet Explorer 5.5 中，通过名为 writing-mode（英文）的 CSS（英文）属性（是当前为 CSS 3（英文）推荐的）启用对垂直布局的支持。下面的示例对于英文和日文内容进行了水平布局和垂直布局的比较。请浏览示例，然后我们将对细节进行深入探讨。
writing-mode 属性有两个要探讨的值：
tb-rl
lr-tb
Tb-rl 表示自上而下、从右向左，说明了应用这种样式的元素的内容走向。Lr-tb 表示从左向右、自上而下，它是所有文字的默认走向，也是英文读者所熟悉的典型的水平走向。与其它任何 CSS 属性一样，可通过外部 CSS 文件，或通过对象模型（style.writingMode（英文）），在一列上指定这些值。
请注意，虽然是东亚语言引发了对垂直布局的支持这一思路，但是任何语言文字都可以采用垂直文字走向。在这种走向中，单独字符的方向取决于它们所属的语言或文稿。为了保持垂直排版的传统，东亚文字的字符均采取竖直方向显示，而其它所有字符，包括拉丁文字符，在采用垂直布局时则顺时针旋转 90° 显示。
可用的元素
在 MSDN 联机 Web 工作室文档（英文）中可找到 writing-mode 所应用的元素的列表，但却无法在列表中找到 BODY 元素（英文）。这说明 BODY 元素总采取水平布局，但它所包含的元素却可以采用垂直布局。有时很难预料这种布局规则的组合结果是什么样的，这在下面的示例中会加以说明。
<HTML>
<BODY>
<DIV style="writing-mode:tb-rl; width:50cm">
This is a sentence in a DIV element with vertical layout.
</DIV>
</BODY>
<HTML>
当您在 Internet Explorer 5.5 中查看此标记时，一开始看不到文字，但却会看到水平滚动条。如果您将该页一直滚动到右端，则可以看到文字。为什么会这样呢？
BODY 元素总采用水平布局，而浏览器总是将可视区定位于起始于标记中最顶端元素的原点。在前面的示例中，原点位于页面的左上角，若要显示加载了文字的页面，必须使主体滚动到右端。其实现方法为：在全局 DIV 元素（英文）中，将主体上的方向属性设置为 RTL（从右向左），然后再将方向属性设置回 LTR（从左向右）。这样，就将原点放置在右上角了。
<HTML>
<BODY style="direction:rtl">
<DIV style="direction:ltr; writing-mode:tb-rl; width:50cm">
This is a vertical sentence.
</DIV>
</BODY>
</HTML>
与其它 CSS 属性 交互
很多 CSS 属性可能拥有与方向或位置相关的值，如顶部、底部、左边和右边等。在垂直布局的环境中应如何转换这些值呢？通常，影响方向或位置的 CSS 属性是被绝对转换的。这是从实际而言的，表明这种样式的隐含的或明确的方向性并不随垂直布局而改变。例如，请考虑 border-left 属性（英文）。举例而言，在垂直布局中，border-left 表示在元素的左边界上绘制一个边框。因为这种放置是绝对的，所以在垂直布局中，border-left 并不会变为 border-top（英文）。
但是，有些 CSS 属性的转换是相对的。这是从逻辑角度而言的，表明若按照上面那样对它们进行绝对转换是没有意义的。line-height 属性（英文）就是一个示例。如果行是水平布局的，则该属性控制行的高度；如果行是垂直布局的，则该属性控制行的宽度。换句话讲，line-height 属性在与基线垂直的维度上控制行的大小。因此，对属性进行绝对转换是没有意义的。World Wide Web Consortium (W3C) 提供了按照逻辑转换的 CSS 属性列表（英文）。
容器关系和继承
writing-mode 属性决定了元素内容的布局方式，而不是元素自身的位置，记住这一点十分重要。当元素 writing-mode 的值为 tb-rl 时，整个元素的内容采用垂直布局（此时，忽略对继承的限制或设置水平布局的子元素的情况）。这说明文字和子元素的走向为自上而下、从右向左。
对 writing-mode 属性的继承并不是统一的。某些元素根本不继承它。其它元素将 writing-mode 属性传递给它们的子元素，但自己却不采用这些属性。这将在 writing-mode 参考页（英文）中加以介绍。将鼠标指针移到“Applies To”列表中的任何元素上，可以查看该元素上是否应用了继承限制。关于有限制的继承的示例，请参见对 BUTTON 元素（英文）的 Web Workshop 参考。
元素高度
在水平布局中，如果没有指定特殊的尺寸调整，则块元素通常与其父元素、负页边距、边框和边距有相同的宽度。元素的高度将根据其内容多少进行调整（文字换行次数越多，则元素高度越高）。对于其父元素拥有垂直布局的垂直元素而言，其工作方式是类似的。块元素与其父元素、负页边距、边框和边距有相同的高度。
将垂直元素与水平父元素的行为一同考虑时，元素高度将变得错综复杂（请记住，因为 BODY 元素总是水平的，所以这种情况是常见的）。水平父元素的高度是可变的，— 根据父元素的内容，这个高度有时很小，有时很大。根据父元素的高度来决定子元素的高度并不是一个好的解决方案，应当通过计算来决定最合适的高度。这种计算建立在变量数目的基础之上，包括字符大小（以第一个为基准）和文章中最长的单词。通常，垂直子元素的最小高度是 10 个字符高度。
当然，通过在标记中指定高度、宽度和位置，你可以降低绝大部分的复杂程度，并更好地控制布局。
平台限制
操作系统的限制导致在某些配置中不能正确地按竖直方向显示东亚字符。Microsoft Windows® 2000 中消除了这一限制，但对于 Microsoft Windows NT® 4.0 和 Windows 9x 系统，对东亚语言仍需要已经本地化的操作系统版本，以确保可以正确显示这些字符。
摘要
在 Internet Explorer 5.5 中实现垂直布局是推广万维网 ( World Wide Web) 并使之更为人所用之路上的一个重要里程碑。垂直布局为东亚语言内容的 Web 设计者提供了一种全新的版面表现形式，它是对传统出版格式的更好的效仿，或者它也可以表示为引入了一个全新的外观。与其它任何事物一样，学习垂直布局的最佳方法就是实践。一旦您掌握了它的用法，就开始应用它吧。
以下内容为程序代码:
<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> | 
[文章录入员:tonny] |
|
|
|
|
