CSS3 高级特性 - writing-mode 属性

1. 什么是 writing-mode 属性？

writing-mode 属性用于控制文本的书写方向和排版模式，它定义了文本是水平排列还是垂直排列，以及文本的阅读顺序。这对于支持多语言文本布局（如中文、日文、韩文等竖排文本）非常重要。

2. writing-mode 的语法

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

2.1 取值说明

• horizontal-tb：默认值，水平排版，文本从左到右排列，行从上到下排列
• vertical-rl：垂直排版，文本从上到下排列，行从右到左排列
• vertical-lr：垂直排版，文本从上到下排列，行从左到右排列
• sideways-rl：垂直排版，文本向右旋转 90 度，行从右到左排列
• sideways-lr：垂直排版，文本向左旋转 90 度，行从左到右排列

3. 核心知识点

3.1 书写模式的概念

书写模式是指文本在页面上的排列方式，主要包括：

• 水平书写模式：文本水平排列，如英文、阿拉伯文等
• 垂直书写模式：文本垂直排列，如中文、日文、韩文等在某些情况下的排版

3.2 不同书写模式的应用场景

1. horizontal-tb：适用于大多数语言，如英文、中文横排、阿拉伯文等

2. vertical-rl：适用于中文、日文、韩文等的竖排排版，特别是传统书籍、报纸的排版

3. vertical-lr：适用于需要垂直排列但从左到右阅读的场景

4. sideways-rl 和 sideways-lr：适用于需要特殊视觉效果的场景，如标题、装饰性文本等

3.3 与其他属性的关系

writing-mode 属性会影响其他相关属性的行为，如：

• text-orientation：控制垂直文本的方向
• direction：控制文本的阅读方向
• text-align：控制文本的对齐方式
• margin、padding、border：元素的盒模型方向会受到影响

4. 实用案例

4.1 中文竖排文本

HTML 结构：

<div class="vertical-text">
  <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
</div>

CSS 样式：

.vertical-text {
  writing-mode: vertical-rl;
  height: 400px;
  padding: 20px;
  font-size: 18px;
  line-height: 2;
  border: 1px solid #ddd;
}

4.2 混合排版模式

HTML 结构：

<div class="mixed-layout">
  <div class="horizontal-section">
    <h2>水平排版标题</h2>
    <p>这是一段水平排列的文本，适用于大多数语言的阅读习惯。</p>
  </div>
  <div class="vertical-section">
    <h2>垂直排版标题</h2>
    <p>这是一段垂直排列的文本，适用于中文、日文、韩文等的传统排版。</p>
  </div>
</div>

CSS 样式：

.mixed-layout {
  display: flex;
  gap: 40px;
  padding: 20px;
}

.horizontal-section {
  flex: 1;
}

.vertical-section {
  flex: 1;
  writing-mode: vertical-rl;
  height: 300px;
}

.vertical-section h2 {
  margin: 0;
  padding-bottom: 20px;
}

4.3 侧边栏导航

HTML 结构：

<aside class="vertical-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻资讯</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</aside>
<main class="content">
  <!-- 主内容 -->
</main>

CSS 样式：

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

.vertical-nav {
  writing-mode: vertical-rl;
  background-color: #333;
  color: white;
  padding: 20px;
}

.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.vertical-nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

4.4 特殊标题效果

HTML 结构：

<div class="title-container">
  <h1 class="sideways-title">创意标题</h1>
  <div class="content">
    <p>这是一段普通文本，旁边是一个垂直旋转的标题，创造出独特的视觉效果。</p>
  </div>
</div>

CSS 样式：

.title-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.sideways-title {
  writing-mode: sideways-rl;
  margin: 0;
  font-size: 36px;
  color: #333;
  transform: rotate(180deg); /* 调整旋转方向以获得更好的视觉效果 */
}

.content {
  flex: 1;
}

5. 浏览器兼容性

6. 最佳实践

1. 考虑语言特性：根据文本语言选择合适的书写模式，如中文、日文、韩文等可以考虑使用垂直排版

2. 响应式设计：在不同屏幕尺寸下，可能需要调整书写模式，例如在移动设备上使用水平排版，在大屏幕上使用垂直排版

3. 性能考虑：垂直排版可能会影响文本渲染性能，特别是在大量文本的情况下，需要注意优化

4. 可访问性：确保使用 writing-mode 后，文本仍然可以被屏幕阅读器正确读取

5. 与其他属性配合：writing-mode 可以与 text-orientation、direction 等属性配合使用，以实现更复杂的文本布局效果

7. 代码优化建议

1. 使用简写属性：当你需要同时设置书写模式和文本方向时，可以考虑使用 writing-mode 简写属性

2. 避免过度使用：vertical-rl 和其他垂直排版模式主要用于特定场景，不要在所有文本上都使用

3. 测试不同浏览器：不同浏览器对 writing-mode 的支持可能存在差异，特别是在垂直排版的细节上，需要进行充分测试

4. 考虑文本长度：在使用垂直排版时，需要考虑文本长度对布局的影响，特别是在狭窄的容器中

8. 总结

writing-mode 属性是 CSS3 中一个非常实用的高级特性，它可以帮助开发者控制文本的书写方向和排版模式，支持多语言文本布局。通过合理使用 writing-mode，你可以创建更加灵活、多样化的文本布局，特别是在需要支持中文、日文、韩文等竖排文本的场景中。

9. 练习

1. 练习 1：创建一个包含水平排版和垂直排版文本的混合布局

2. 练习 2：创建一个使用 vertical-rl 书写模式的侧边栏导航

3. 练习 3：创建一个使用 sideways-rl 书写模式的特殊标题效果

4. 练习 4：创建一个响应式布局，在大屏幕上使用垂直排版，在移动设备上使用水平排版

10. 相关资源

• MDN 文档：writing-mode
• CSS-Tricks：CSS Writing Modes
• Web Dev：CSS Writing Modes