你不知道的CSS：writing-mode的深度探索与应用

一、writing-mode基础：打破水平排版的桎梏

在传统Web开发中，文本默认以水平方向从左到右（LTR）或从右到左（RTL）排列，这种模式对拉丁语系和阿拉伯语系等语言有效，但面对中文、日文、蒙古文等垂直书写的语言时，开发者常陷入布局困境。CSS的writing-mode属性正是为解决这一问题而生，它通过重新定义文本流的基线方向，实现垂直或混合方向的排版。

1.1 属性值详解

writing-mode的核心值包括：

• horizontal-tb：默认值，水平排列，从上到下（Top-to-Bottom）。
• vertical-rl：垂直排列，从右到左（Right-to-Left），适用于中文、日文等传统竖排文本。
• vertical-lr：垂直排列，从左到右（Left-to-Right），常见于蒙古文等少数语言。

1.2 基础示例

<div class="vertical-text">垂直排版示例</div>

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

此代码将文本垂直排列，从右向左流动，高度固定为300px，形成类似古籍的排版效果。

二、垂直排版的进阶应用

2.1 多语言混合排版

在全球化项目中，页面可能同时包含中文、英文和阿拉伯文。通过writing-mode结合direction属性，可实现无缝混合排版：

.mixed-languages {
  display: flex;
}
.chinese {
  writing-mode: vertical-rl;
  margin-right: 20px;
}
.arabic {
  direction: rtl;
  writing-mode: horizontal-tb;
}

<div class="mixed-languages">
  <div class="chinese">中文垂直文本</div>
  <div class="arabic">عربي نص أفقي</div>
</div>

此布局中，中文垂直排列，阿拉伯文水平右对齐，两者和谐共存。

2.2 响应式垂直导航

在移动端，垂直导航栏可节省横向空间。结合writing-mode和媒体查询，可创建自适应的垂直菜单：

@media (max-width: 768px) {
  .nav {
    writing-mode: vertical-rl;
    height: 100vh;
    width: 60px;
    position: fixed;
    right: 0;
  }
}

当屏幕宽度小于768px时，导航栏变为垂直排列，固定在右侧，高度为视口高度。

三、writing-mode在创新设计中的潜力

3.1 艺术化文本布局

设计师常利用writing-mode创造独特的视觉效果。例如，将标题垂直排列并旋转90度，形成动态的视觉焦点：

.artistic-title {
  writing-mode: vertical-rl;
  transform: rotate(90deg);
  transform-origin: left top;
  position: absolute;
  left: 50px;
  top: 0;
}

此代码将标题垂直排列后旋转，适合用于海报或封面设计。

3.2 表格与数据可视化

在数据密集型应用中，垂直标签可提升可读性。例如，将表格的列标题垂直排列：

.vertical-header th {
  writing-mode: vertical-rl;
  height: 150px;
  padding: 10px;
}

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>A</td>
    <td>$10</td>
    <td>50</td>
  </tr>
</table>

垂直标题使表格更紧凑，尤其适合窄屏设备。

四、常见问题与解决方案

4.1 文本溢出与换行

垂直排版时，文本可能超出容器宽度。需结合word-break或overflow-wrap控制换行：

.vertical-box {
  writing-mode: vertical-rl;
  width: 100px;
  word-break: break-all; /* 强制断词 */
}

4.2 浏览器兼容性

尽管现代浏览器广泛支持writing-mode，但旧版IE（如IE11）需添加前缀：

.legacy-support {
  -ms-writing-mode: tb-rl; /* IE11 */
  writing-mode: vertical-rl;
}

建议通过特性检测（如Modernizr）提供降级方案。

五、实战案例：古籍数字化项目

在某古籍数字化平台中，需还原古籍的垂直排版风格。解决方案如下：

1. 全局样式：

   body {
   writing-mode: vertical-rl;
   font-family: "SimSun", serif;
   line-height: 2;
   }

2. 注释与批注：

   .annotation {
   writing-mode: horizontal-tb;
   margin-top: 20px;
   color: #666;
   }

3. 响应式调整：

   @media (max-width: 1024px) {
   body {
    writing-mode: horizontal-tb;
   }
   .annotation {
    margin-left: 20px;
   }
   }

   此案例中，大屏显示垂直排版，小屏切换为水平，注释始终水平排列，确保可读性。

六、总结与建议

writing-mode不仅是多语言支持的工具，更是设计创新的利器。开发者应：

1. 测试兼容性：在关键项目中，通过渐进增强策略确保兼容性。
2. 结合其他属性：与text-orientation、direction等属性配合，实现复杂布局。
3. 关注可访问性：垂直文本可能影响屏幕阅读器的解析，需通过ARIA属性补充说明。

通过深入理解writing-mode，开发者能突破传统布局的限制，创造出既符合文化习惯又富有创意的Web体验。