书写模式

书写模式的基本概念

CSS3的writing-mode属性控制文本在水平或垂直方向上的排列方式。它决定了行内内容的流动方向以及块级元素的堆叠顺序。这个属性最初是为了支持东亚语言的垂直排版而设计，但现在已扩展到支持更多复杂的布局需求。

.example {
  writing-mode: horizontal-tb;
}

主要属性值

writing-mode有五个主要值，每个值都会改变文本的流动方向：

1. horizontal-tb：默认值，文本从左到右水平排列，行从上到下堆叠
2. vertical-rl：文本从上到下垂直排列，行从右到左堆叠
3. vertical-lr：文本从上到下垂直排列，行从左到右堆叠
4. sideways-rl：文本侧向排列，字符顺时针旋转90度
5. sideways-lr：文本侧向排列，字符逆时针旋转90度

.vertical-text {
  writing-mode: vertical-rl;
  height: 200px;
  border: 1px solid #ccc;
}

实际应用场景

垂直排版在中文、日文等东亚文字中很常见。报纸标题、书籍封面、传统招牌等都可能使用垂直排版。现代网页设计中，垂直文本可以创造独特的视觉效果。

<div class="magazine-title">
  <h2>春</h2>
  <p>万物复苏的季节</p>
</div>

<style>
.magazine-title {
  writing-mode: vertical-rl;
  font-size: 24px;
  line-height: 1.5;
  padding: 20px;
  background: #f5f5f5;
}
</style>

与其他CSS属性的交互

writing-mode会影响多个CSS属性的行为：

1. text-orientation：控制垂直排版时字符的方向
2. text-combine-upright：将多个字符组合为一个单位（如日期中的数字）
3. 盒模型属性：width和height的含义会根据书写模式变化

.combined-date {
  writing-mode: vertical-rl;
  text-combine-upright: all;
  font-size: 16px;
}

响应式设计中的应用

结合媒体查询，可以根据屏幕尺寸切换书写模式：

@media (max-width: 600px) {
  .responsive-text {
    writing-mode: vertical-rl;
  }
}

浏览器兼容性考虑

虽然现代浏览器普遍支持writing-mode，但需要注意：

• sideways-*值的支持较新
• 某些旧版本浏览器需要前缀
• 测试时应在多个浏览器中验证渲染效果

/* 带前缀的写法确保兼容性 */
.legacy-support {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

创意布局示例

结合Flexbox或Grid，可以创建复杂的多方向布局：

<div class="creative-layout">
  <div class="item">项目一</div>
  <div class="item">项目二</div>
  <div class="item">项目三</div>
</div>

<style>
.creative-layout {
  display: flex;
}

.item {
  writing-mode: vertical-lr;
  padding: 10px;
  margin: 5px;
  background: #e0e0e0;
  transform: rotate(180deg);
}
</style>

国际化考虑

不同语言的排版需求差异很大。阿拉伯语等从右向左书写的语言可能需要结合direction属性使用：

.arabic-text {
  writing-mode: horizontal-tb;
  direction: rtl;
}

性能影响

频繁改变书写模式可能导致重排和重绘，特别是在动画中应用时。最佳实践是：

• 避免在动画中动态改变书写模式
• 对静态内容使用书写模式
• 在will-change属性中提前声明

.optimized {
  writing-mode: vertical-rl;
  will-change: transform;
}

与JavaScript的交互

通过JavaScript可以动态控制书写模式：

document.getElementById('toggleMode').addEventListener('click', function() {
  const element = document.querySelector('.dynamic-text');
  const currentMode = getComputedStyle(element).writingMode;
  element.style.writingMode = currentMode === 'horizontal-tb' ? 'vertical-rl' : 'horizontal-tb';
});

印刷媒体中的应用

在打印样式表中，垂直排版可以节省空间：

@media print {
  .print-vertical {
    writing-mode: vertical-rl;
    page-break-inside: avoid;
  }
}

常见问题解决

1. 文本溢出处理：

.overflow-handling {
  writing-mode: vertical-rl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 100px;
}

2. 混合方向文本：

<div class="mixed-directions">
  <span class="horizontal">水平文本</span>
  <span class="vertical">垂直文本</span>
</div>

<style>
.mixed-directions {
  display: flex;
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-lr;
}
</style>

高级技巧：结合变换

当基本书写模式不满足需求时，可以结合CSS变换：

.transformed-text {
  writing-mode: horizontal-tb;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}