垂直书写模式（Vertical Writing Modes）：`vertical-rl` 下的盒模型旋转与流向计算

大家好，今天我们来深入探讨 CSS 中的垂直书写模式，特别是 vertical-rl 模式下的盒模型旋转和流向计算。垂直书写模式在处理亚洲语言（如中文、日文、韩文）的排版时至关重要，它定义了文本的排列方向以及元素在页面上的布局方式。vertical-rl 是一种从右到左、自上而下的垂直书写模式。理解其背后的机制，能帮助我们更好地控制页面布局，创建更符合语言习惯的用户界面。

1. 书写模式（Writing Modes）简介

在深入 vertical-rl 之前，我们先简单回顾一下 CSS 中书写模式的概念。书写模式（writing-mode 属性）定义了文本的行进方向，以及块级元素的排列方向。常见的取值包括：

horizontal-tb：水平方向，从上到下（默认值）。文本水平排列，行从上到下堆叠。
vertical-rl：垂直方向，从右到左。文本垂直排列，行从右到左堆叠。
vertical-lr：垂直方向，从左到右。文本垂直排列，行从左到右堆叠。

还有一些其他的取值，比如 sideways-rl 和 sideways-lr，它们将文本内容旋转 90 度，但保持水平布局。我们今天的重点是 vertical-rl。

2. vertical-rl 的基本特性

vertical-rl 将文本和元素的流向改变为垂直方向，从右到左。这意味着：

文本方向： 文本中的字符垂直排列，从上到下。
行方向： 新的“行”从右到左排列，取代了水平书写模式中的从上到下的行排列。
块方向： 块级元素（如 <div>、<p>）仍然会形成块，但这些块会沿着垂直方向排列，从右到左。

3. 盒模型在 vertical-rl 中的旋转

理解 vertical-rl 的关键在于理解盒模型是如何旋转的。在 horizontal-tb 模式下，盒模型的尺寸属性（width 和 height）的含义很直接：width 控制元素的水平宽度，height 控制元素的垂直高度。但在 vertical-rl 模式下，这些属性的含义会发生转变。

属性	`horizontal-tb`	`vertical-rl`
`width`	水平宽度	垂直高度
`height`	垂直高度	水平宽度
`margin-top`	上边距	右边距
`margin-right`	右边距	下边距
`margin-bottom`	下边距	左边距
`margin-left`	左边距	上边距
`padding-top`	上内边距	右内边距
`padding-right`	右内边距	下内边距
`padding-bottom`	下内边距	左内边距
`padding-left`	左内边距	上内边距

简单来说，width 和 height 的作用互换了，margin 和 padding 的上下左右也顺时针旋转了 90 度。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>vertical-rl Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  width: 200px; /* 垂直高度 */
  height: 300px; /* 水平宽度 */
  border: 1px solid black;
  padding: 20px; /* 相当于上内边距 */
  margin: 50px; /* 相当于左外边距 */
}

.item {
  width: 100px; /* 垂直高度 */
  height: 50px; /* 水平宽度 */
  background-color: lightblue;
  margin-bottom: 10px; /* 相当于左外边距 */
}
</style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
</body>
</html>

在这个例子中，.container 的 width 实际上控制的是它的垂直高度，而 height 控制的是它的水平宽度。 .item 元素的 margin-bottom 实际上表现为元素之间的左侧间距。

4. 流向的计算

在 vertical-rl 模式下，元素的排列方式遵循从右到左、自上而下的规则。这意味着：

行内元素： 行内元素（如 <span>、<a>）会垂直排列，形成一列文本。
块级元素： 块级元素会占据整行（垂直方向），并从右到左依次排列。
浮动元素： float 属性的行为也会发生变化。float: left 会使元素浮动到其包含块的上方，float: right 会使元素浮动到其包含块的下方。
定位元素： 绝对定位和固定定位元素的 top、right、bottom、left 属性的含义也会发生旋转，与盒模型的旋转规则一致。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>vertical-rl Flow Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  width: 300px; /* 垂直高度 */
  height: 200px; /* 水平宽度 */
  border: 1px solid black;
}

.item {
  width: 100px; /* 垂直高度 */
  height: 50px; /* 水平宽度 */
  background-color: lightblue;
  margin: 10px; /* 相当于旋转后的所有边距 */
}

.float-left {
  float: left; /* 浮动到上方 */
}

.float-right {
  float: right; /* 浮动到下方 */
}
</style>
</head>
<body>
  <div class="container">
    <div class="item float-left">Float Left</div>
    <div class="item float-right">Float Right</div>
    <div class="item">Normal Item</div>
  </div>
</body>
</html>

在这个例子中，float: left 使元素浮动到 .container 的上方，而 float: right 使元素浮动到下方。普通的 .item 元素则会从右向左排列。

5. 逻辑属性（Logical Properties）

为了更好地支持不同的书写模式，CSS 引入了逻辑属性。逻辑属性使用描述性的名称，而不是物理方向（如 top、right、bottom、left）。例如：

margin-block-start：相当于 margin-top 在 horizontal-tb 模式下，相当于 margin-right 在 vertical-rl 模式下。
margin-block-end：相当于 margin-bottom 在 horizontal-tb 模式下，相当于 margin-left 在 vertical-rl 模式下。
margin-inline-start：相当于 margin-left 在 horizontal-tb 模式下，相当于 margin-top 在 vertical-rl 模式下。
margin-inline-end：相当于 margin-right 在 horizontal-tb 模式下，相当于 margin-bottom 在 vertical-rl 模式下。

使用逻辑属性可以使样式表更具可读性和可维护性，并且更容易适应不同的书写模式。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Logical Properties Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  width: 200px; /* 垂直高度 */
  height: 300px; /* 水平宽度 */
  border: 1px solid black;
  padding-block-start: 20px; /* 相当于右内边距 */
  margin-inline-start: 50px; /* 相当于上外边距 */
}

.item {
  width: 100px; /* 垂直高度 */
  height: 50px; /* 水平宽度 */
  background-color: lightblue;
  margin-block-end: 10px; /* 相当于左外边距 */
}
</style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
</body>
</html>

在这个例子中，我们使用了 padding-block-start 和 margin-inline-start 等逻辑属性，它们会自动根据书写模式进行调整。

6. 文本方向（direction 属性）

除了 writing-mode 之外，direction 属性也对文本的显示方向有影响。direction 属性有两个常用的值：

ltr (left-to-right)：从左到右（默认值）。
rtl (right-to-left)：从右到左。

在 vertical-rl 模式下，direction 属性主要影响行内内容的排列方向。例如，如果 direction 设置为 rtl，则行内文本会从右到左排列，即使书写模式是 vertical-rl，文本仍然会从右侧开始向下书写。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Direction Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  direction: rtl; /* 文本从右到左排列 */
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
</style>
</head>
<body>
  <div class="container">
    This is a test sentence.
  </div>
</body>
</html>

在这个例子中，虽然 writing-mode 是 vertical-rl，但由于 direction 设置为 rtl，文本会从右侧开始向下书写。

7. 实际应用中的注意事项

字体选择： 并非所有字体都适合垂直书写。一些字体可能在垂直排列时显示效果不佳。选择专门为垂直书写设计的字体，或者测试不同字体在垂直模式下的显示效果。
标点符号： 标点符号在垂直书写模式下也需要进行调整。例如，句号（。）通常会旋转 90 度。浏览器会自动处理一些常见的标点符号，但可能需要手动调整一些特殊符号。
数字： 数字在垂直书写模式下的显示方式也需要考虑。有些设计会选择将数字横向排列，以便更容易阅读。可以使用 CSS 的 text-combine-upright 属性来实现这种效果。
兼容性： 不同的浏览器对 writing-mode 属性的支持程度可能有所不同。在使用时，需要考虑浏览器的兼容性问题，并提供适当的备选方案。

代码示例 (数字的横向排列):

<!DOCTYPE html>
<html>
<head>
<title>Text Combine Upright Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.upright {
  text-combine-upright: all; /* 将数字横向排列 */
  -webkit-text-combine-upright: all; /* 兼容 Safari */
  -ms-text-combine-upright: all; /* 兼容 IE */
}
</style>
</head>
<body>
  <div class="container">
    <span class="upright">12345</span>
  </div>
</body>
</html>

在这个例子中，.upright 类的 text-combine-upright 属性将数字 "12345" 横向排列，使其在垂直书写模式下更容易阅读。

8. 使用 Grid 和 Flexbox 进行布局

Grid 和 Flexbox 是强大的 CSS 布局工具，它们在 vertical-rl 模式下也能很好地工作。需要注意的是，Grid 和 Flexbox 的一些属性也会受到书写模式的影响。例如，justify-content 和 align-items 的含义可能会根据书写模式的方向进行调整。使用逻辑属性可以更好地控制 Grid 和 Flexbox 布局在不同书写模式下的行为。

代码示例 (Flexbox 在 vertical-rl 中的应用):

<!DOCTYPE html>
<html>
<head>
<title>Flexbox vertical-rl Example</title>
<style>
.container {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row; /* 主轴方向，相当于水平方向 */
  justify-content: flex-start; /* 主轴方向的对齐方式，相当于靠左 */
  align-items: center; /* 交叉轴方向的对齐方式，相当于居中 */
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

.item {
  width: 50px; /* 垂直高度 */
  height: 50px; /* 水平宽度 */
  background-color: lightblue;
  margin: 10px;
}
</style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个例子中，.container 使用了 Flexbox 布局。flex-direction: row 定义了主轴方向，在 vertical-rl 模式下，主轴是水平方向。justify-content: flex-start 将项目沿着主轴方向靠左对齐（实际上是靠上对齐），align-items: center 将项目沿着交叉轴方向居中对齐。

9. 总结与要点

通过今天的讨论，我们深入了解了 vertical-rl 书写模式下的盒模型旋转和流向计算。关键点包括：

vertical-rl 改变了文本和元素的流向，使其从右到左、自上而下排列。
盒模型的 width 和 height 属性的作用互换，margin 和 padding 的方向也发生了旋转。
逻辑属性可以更好地适应不同的书写模式，提高样式表的可读性和可维护性。
direction 属性影响行内内容的排列方向。
实际应用中需要考虑字体选择、标点符号、数字的显示方式以及浏览器的兼容性。
Grid 和 Flexbox 可以在 vertical-rl 模式下使用，但需要注意属性的含义会根据书写模式的方向进行调整。

希望这次讲解能帮助大家更好地理解和应用垂直书写模式，创建出更符合语言习惯的页面布局。掌握 vertical-rl 能够更灵活地处理亚洲文字排版，为用户提供更好的阅读体验。

更多IT精英技术系列讲座，到智猿学院

垂直书写模式（Vertical Writing Modes）：vertical-rl 下的盒模型旋转与流向计算

发表回复 取消回复

垂直书写模式（Vertical Writing Modes）：`vertical-rl` 下的盒模型旋转与流向计算

发表回复取消回复