各位观众，掌声欢迎！（假装有掌声）今天咱们聊聊 CSS 里有点意思，但又容易被忽视的“Writing Modes”。别怕，这玩意儿没那么玄乎，搞明白了，能让你的网页排版瞬间高大上。
开场白：文本流的那些事儿
在深入 Writing Modes 之前，咱们得先回忆一下网页上的文本是怎么流动的。默认情况下，文本就像水一样，从左到右，从上到下，填满容器。这就是所谓的“水平书写模式”（horizontal-tb），也是咱们最常见的模式。
但是，世界那么大，文字的流动方式可不止这一种。比如，古代的竹简，文字就是竖着写的。CSS 里的 Writing Modes 就是用来控制文本流动的方向的。
主角登场：Writing Modes 家族
Writing Modes 主要有以下几种：
horizontal-tb：水平方向，从上到下。这是默认值，不用特意设置。vertical-rl：垂直方向，从右到左。vertical-lr：垂直方向，从左到右。
注意，这里说的“方向”指的是行的排列方向。每行里面的文字方向是由 direction 属性控制的，后面咱们会讲到。
实战演练：vertical-rl 初体验
咱们先来个简单的例子，看看 vertical-rl 是怎么工作的。
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl;
width: 100px; /* 必须设置宽度，否则容器会塌陷 */
height: 200px;
border: 1px solid black;
font-size: 20px;
}
</style>
</head>
<body>
<div class="vertical-text">
这是一段垂直方向从右到左排列的文字。
</div>
</body>
</html>这段代码会把文字垂直排列，并且从右到左显示。注意，我们必须给容器设置宽度，否则容器会塌陷成一条线，因为在垂直书写模式下，容器的宽度变成了文字的高度。
vertical-lr：你的另一半
vertical-lr 和 vertical-rl 类似，只是文字的排列方向相反，是从左到右。
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-lr;
width: 100px; /* 必须设置宽度 */
height: 200px;
border: 1px solid black;
font-size: 20px;
}
</style>
</head>
<body>
<div class="vertical-text">
这是一段垂直方向从左到右排列的文字。
</div>
</body>
</html>direction 属性：控制文字方向
direction 属性用来控制文字在行内的排列方向。它有两个值：
ltr：从左到右（left-to-right），这是默认值。rtl：从右到左（right-to-left）。
direction 属性通常和 unicode-bidi 属性一起使用，处理双向文本（比如同时包含英文和阿拉伯文）。这里咱们先不深入探讨双向文本，只关注 direction 属性对垂直书写模式的影响。
在垂直书写模式下，direction 属性会影响文字的旋转方向。默认情况下，文字会顺时针旋转 90 度。如果设置 direction: rtl;，文字会逆时针旋转 90 度。
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl;
width: 100px;
height: 200px;
border: 1px solid black;
font-size: 20px;
direction: rtl; /* 设置文字方向为从右到左 */
}
</style>
</head>
<body>
<div class="vertical-text">
这是一段垂直方向从右到左排列的文字。
</div>
</body>
</html>在这个例子中，文字会垂直排列，从右到左显示，并且逆时针旋转 90 度。
text-orientation 属性：更精细的控制
text-orientation 属性用来控制垂直书写模式下文字的显示方向。它有以下几个值：
mixed：允许字符垂直和水平显示。这是默认值，通常用于拉丁字母和数字。upright：强制所有字符都直立显示。sideways：强制所有字符都侧向显示（顺时针旋转 90 度）。sideways-right：等同于sideways。use-glyph-orientation：使用 SVG 的glyph-orientation-*属性（很少使用）。
咱们来看几个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl;
width: 100px;
height: 200px;
border: 1px solid black;
font-size: 20px;
}
.upright {
text-orientation: upright;
}
.sideways {
text-orientation: sideways;
}
</style>
</head>
<body>
<div class="vertical-text">
默认：这是一段文字。
</div>
<div class="vertical-text upright">
upright: 这是一段文字。
</div>
<div class="vertical-text sideways">
sideways: 这是一段文字。
</div>
</body>
</html>在这个例子中，upright 类会让文字直立显示，而 sideways 类会让文字侧向显示。
表格总结：Writing Modes 相关属性
为了方便大家理解，咱们用一个表格来总结一下 Writing Modes 相关的属性：
| 属性 | 值 | 描述 |
|---|---|---|
writing-mode |
horizontal-tb (默认), vertical-rl, vertical-lr |
设置文本的行排列方向。 |
direction |
ltr (默认), rtl |
设置文字在行内的排列方向。在垂直书写模式下，会影响文字的旋转方向。 |
text-orientation |
mixed (默认), upright, sideways, sideways-right, use-glyph-orientation |
设置垂直书写模式下文字的显示方向。 |
高级应用：结合 Flexbox 和 Grid
Writing Modes 可以和 Flexbox 和 Grid 结合使用，创建更复杂的布局。
例如，我们可以使用 Flexbox 来垂直居中一个垂直排列的文本：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 200px;
height: 200px;
border: 1px solid black;
}
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical-text">
垂直居中的文字
</div>
</div>
</body>
</html>在这个例子中，container 使用 Flexbox 布局，将 vertical-text 垂直居中。
注意事项：兼容性问题
虽然 Writing Modes 已经得到了广泛的支持，但仍然存在一些兼容性问题。特别是在一些老版本的浏览器中，可能需要添加浏览器前缀才能正常工作。
例如，对于 writing-mode 属性，可能需要添加 -webkit- 和 -ms- 前缀：
.vertical-text {
-webkit-writing-mode: vertical-rl; /* Safari 和 Chrome */
-ms-writing-mode: tb-rl; /* IE */
writing-mode: vertical-rl;
}在实际开发中，建议使用 Autoprefixer 这样的工具，自动添加浏览器前缀，提高代码的兼容性。
实际应用场景：不止于花哨
Writing Modes 并非只是为了让网页看起来更炫酷。在某些情况下，它可以解决实际问题。
- 垂直导航栏： 可以使用
vertical-rl或vertical-lr创建垂直导航栏。 - 亚洲语言排版： 对于一些亚洲语言（比如中文、日文），垂直排版是很常见的。
- 创意排版： 可以结合其他 CSS 属性，创造出独特的排版效果。
进阶练习：制作一个垂直导航栏
咱们来做一个简单的垂直导航栏，巩固一下所学知识。
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
width: 50px;
height: 200px;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item {
writing-mode: vertical-rl;
text-orientation: upright;
padding: 10px;
text-decoration: none;
color: #333;
}
.nav-item:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="navbar">
<a class="nav-item" href="#">首页</a>
<a class="nav-item" href="#">产品</a>
<a class="nav-item" href="#">关于</a>
<a class="nav-item" href="#">联系</a>
</div>
</body>
</html>这个例子使用 Flexbox 布局，将导航项垂直排列，并使用 writing-mode 和 text-orientation 属性将文字垂直显示。
总结：掌握文本流动的力量
今天咱们聊了 CSS 的 Writing Modes，了解了如何控制文本的流动方向。掌握了这些技巧，你就可以创建更灵活、更具创意的网页布局。
记住，CSS 的世界是无限的，勇于尝试，你会发现更多惊喜！
课后作业：
- 尝试使用
Writing Modes创建一个更复杂的布局。 - 研究
unicode-bidi属性，了解如何处理双向文本。 - 分享你使用
Writing Modes的经验和心得。
好啦，今天的讲座就到这里。谢谢大家！（假装有掌声）