EnlightenCode

CSS 文字书写方向与排版技巧 ​

简介 ℹ️ ​

在网页设计中，有时我们需要改变文字的书写方向来实现特殊的排版效果，比如古诗词的竖排展示。CSS 提供了强大的文字排版功能，让我们能够轻松实现这些效果。

核心属性介绍 🔍 ​

writing-mode ​

  • horizontal-tb: 水平方向，从左到右（默认）
  • vertical-rl: 垂直方向，从右到左
  • vertical-lr: 垂直方向，从左到右

text-orientation ​

  • mixed: 默认值，允许字符混合朝向
  • upright: 字符保持直立
  • sideways: 字符横向排列

text-combine-upright ​

用于控制垂直文本中的数字等内容的组合显示方式。

实战示例 💡 ​

1. HTML 结构 ​

html
<div class="poem">
  <h1>临江仙</h1>
  <div class="author">
    <span>杨慎</span>
    <span class="year">1438</span>
    <span class="to">~</span>
    <span class="year">1559</span>
  </div>
  <p>滚滚长江东逝水</p>
  <p>浪花淘尽英雄</p>
  <p>是非成败转头空</p>
  <p>青山依旧在</p>
  <p>几度夕阳红</p>
  <p>白发渔樵江渚上</p>
  <p>惯看秋月春风</p>
  <p>一壶浊酒喜相逢</p>
  <p>古今多少事</p>
  <p>都付笑谈中</p>
</div>

2. CSS 样式 ​

css
.poem {
  color: #333;
  font-size: 1.4em;
  writing-mode: vertical-rl;
  float: right;
  padding: 2em;
  line-height: 2;
  /* 添加优雅的字体 */
  font-family: "STKaiti", "楷体", serif;
}

.author {
  color: #666;
  font-size: 0.8em;
  margin-right: -30px;
  text-align: end;
}

.author .year {
  text-orientation: upright;
  text-combine-upright: all;
}

/* 添加悬停效果 */
.poem p:hover {
  color: #c41;
  transition: color 0.3s ease;
}

注意事项 ⚠️ ​

  1. 浏览器兼容性：

    • writing-mode 在现代浏览器中支持良好
    • IE11 需要添加前缀 -ms-writing-mode

  2. 性能考虑：

    • 垂直排版可能影响页面渲染性能
    • 建议限制垂直排版内容的数量

  3. 响应式设计：

    • 在移动设备上可能需要调整为横向排版
    • 可以使用媒体查询进行适配

扩展应用 🚀 ​

除了古诗词排版，vertical writing-mode 还可用于：

  • 创意标题设计
  • 导航菜单设计
  • 东亚语言网站设计

效果展示 🖼️ ​

垂直排版效果

浏览器支持情况 💻 ​

  • Chrome: 完全支持
  • Firefox: 完全支持
  • Safari: 完全支持
  • Edge: 完全支持
  • IE11: 部分支持（需前缀）

参考资料 📚 ​