CSS中的字形方向：`text-orientation`在混合排版中的直立与旋转控制 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 中的字形方向：`text-orientation` 在混合排版中的直立与旋转控制

大家好，今天我们来深入探讨 CSS 中一个相对冷门但功能强大的属性：text-orientation。虽然它不如 font-size 或 color 那么常用，但在处理垂直排版，特别是混合了横排和竖排文字的场景下，text-orientation 却能发挥关键作用，实现精细的字形控制。

`text-orientation` 的基本概念与取值

text-orientation 属性定义了文本行中字符的字形方向。它主要影响垂直书写模式（writing-mode: vertical-lr 或 writing-mode: vertical-rl）下的文本显示。在水平书写模式下，text-orientation 的作用通常不明显，除非你结合其他属性进行特殊设置。

text-orientation 属性主要有以下几种取值：

mixed: 这是默认值。浏览器会尝试优化字形方向，通常将拉丁字母、数字等横排字符旋转 90 度，使其适应垂直方向，而东亚字符（如汉字、日文、韩文）保持直立。
upright: 强制所有字符保持直立显示，不进行旋转。这对于希望东亚字符和拉丁字符在垂直排版中都保持水平方向的情况下非常有用。
sideways: 强制所有字符都旋转 90 度，使其侧向显示。在垂直排版中，这通常意味着字符会横向排列。
sideways-right: 与 sideways 相同，但明确指定了旋转方向（顺时针旋转 90 度）。某些旧版本的浏览器可能不支持 sideways，可以使用 sideways-right 作为替代方案。
use-glyph-orientation: 这个值相对少用，它允许 SVG 字形根据嵌入在字体文件中的 glyph-orientation-vertical 属性进行旋转。这主要用于 SVG 文本，在 Web 开发中并不常见。

为了更清晰地理解这些取值的效果，我们来看一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<title>text-orientation 示例</title>
<style>
  .vertical-text {
    writing-mode: vertical-lr; /* 或 vertical-rl */
    font-size: 2em;
    line-height: 1.5;
  }

  .mixed { text-orientation: mixed; }
  .upright { text-orientation: upright; }
  .sideways { text-orientation: sideways; }
  .sideways-right { text-orientation: sideways-right; }
</style>
</head>
<body>

<div class="vertical-text mixed">混合排版 Mixed 123 你好世界</div>
<div class="vertical-text upright">直立排版 Upright 123 你好世界</div>
<div class="vertical-text sideways">侧向排版 Sideways 123 你好世界</div>
<div class="vertical-text sideways-right">侧向排版 (右) Sideways-right 123 你好世界</div>

</body>
</html>

在这个例子中，我们创建了四个 div 元素，都使用了垂直书写模式。每个 div 元素应用了不同的 text-orientation 值，以便观察它们对文本显示的影响。你可以将这段代码复制到 HTML 文件并在浏览器中打开，观察效果。

`text-orientation` 在混合排版中的应用场景

text-orientation 属性在处理混合了不同语言或字符集的文本时非常有用。例如，在垂直排版的日文文档中，我们可能希望汉字保持直立，而拉丁字母和数字则旋转 90 度。text-orientation: mixed 正好可以满足这种需求。

另一种常见的场景是，我们希望所有字符都保持直立，即使是在垂直排版中。例如，在某些设计风格中，我们可能认为所有字符都直立显示更美观或更易于阅读。这时，可以使用 text-orientation: upright。

text-orientation: sideways 或 text-orientation: sideways-right 则适用于需要将整个文本块旋转 90 度的场景，例如在创建垂直标签或侧边栏时。

`text-orientation` 与其他 CSS 属性的配合使用

text-orientation 常常需要与其他 CSS 属性配合使用，才能达到最佳的排版效果。

writing-mode: 这是 text-orientation 的前提。writing-mode 决定了文本的书写方向，只有当 writing-mode 设置为 vertical-lr 或 vertical-rl 时，text-orientation 才会产生明显的效果。
direction: direction 属性用于指定文本的阅读方向（从左到右或从右到左）。在垂直排版中，direction 属性可以影响文本的排列顺序。例如，direction: rtl 会导致文本从右向左垂直排列。
unicode-bidi: unicode-bidi 属性用于处理双向文本（既包含从左到右的文本，又包含从右到左的文本）。在复杂的混合排版场景中，unicode-bidi 可以帮助浏览器正确地显示文本。
text-combine-upright: 这个属性可以将多个字符组合成一个直立的字形。例如，可以将两个数字组合成一个垂直排列的两位数。这对于显示竖排日期或编号非常有用。注意：此属性兼容性较差。
font-variant-east-asian: 这个属性控制东亚字体的变体，例如 simplified, traditional, proportional-width 等。它会影响汉字、日文和韩文的显示方式，可以与 text-orientation 结合使用，以实现更精细的排版效果。

为了演示这些属性的配合使用，我们来看一个更复杂的示例：

<!DOCTYPE html>
<html>
<head>
<title>text-orientation 综合示例</title>
<style>
  .container {
    display: flex;
    flex-direction: row;
  }

  .vertical-text {
    writing-mode: vertical-lr;
    font-size: 2em;
    line-height: 1.5;
    margin-right: 20px;
  }

  .mixed { text-orientation: mixed; }
  .upright { text-orientation: upright; }
  .sideways { text-orientation: sideways; }

  .rtl {
    direction: rtl;
    unicode-bidi: bidi-override; /* 强制从右向左 */
  }

  .combined {
    text-combine-upright: all; /* 将所有字符组合成一个直立的字形 */
    -webkit-text-combine-upright: all; /* 兼容性 */
    -ms-text-combine-upright: all;   /* 兼容性 */
  }

  .east-asian {
    font-variant-east-asian: traditional; /* 使用繁体字变体 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="vertical-text mixed">混合排版 Mixed 123 你好世界</div>
  <div class="vertical-text upright">直立排版 Upright 123 你好世界</div>
  <div class="vertical-text sideways">侧向排版 Sideways 123 你好世界</div>
  <div class="vertical-text upright rtl">从右向左 RTL 123 你好世界</div>
  <div class="vertical-text upright combined">组合文字 12</div>
  <div class="vertical-text upright east-asian">繁體字 你好世界</div>
</div>

</body>
</html>

在这个例子中，我们使用了 direction 和 unicode-bidi 属性来创建从右向左的垂直文本，使用了 text-combine-upright 将数字组合成一个直立的字形，并使用了 font-variant-east-asian 来选择繁体字变体。请注意，text-combine-upright 的兼容性有限，可能需要在不同的浏览器中使用不同的前缀。

浏览器兼容性与polyfill

text-orientation 属性的浏览器兼容性总体来说还不错，但仍然存在一些差异。以下是一个兼容性表格，展示了不同浏览器对 text-orientation 的支持情况：

浏览器	`mixed`	`upright`	`sideways`	`sideways-right`
Chrome	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes
Edge	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes
Internet Explorer	No	No	No	No

从表格可以看出，主流浏览器都支持 text-orientation 属性，但 Internet Explorer 不支持。对于需要兼容 IE 的项目，可以使用 JavaScript polyfill 来模拟 text-orientation 的效果。一个简单的 polyfill 的思路是：

检测浏览器是否支持 text-orientation 属性。
如果不支持，则使用 JavaScript 遍历文本节点，将每个字符包裹在一个 span 元素中。
根据 text-orientation 的值，为 span 元素添加相应的 CSS 类，例如 rotate-90 或 keep-upright。
在 CSS 中定义这些类的样式，例如使用 transform: rotate(90deg) 来旋转字符。

需要注意的是，polyfill 可能会影响性能，特别是对于大量文本。因此，应该谨慎使用，并进行充分的测试。

`text-orientation` 的局限性与替代方案

虽然 text-orientation 属性功能强大，但也存在一些局限性。

字符级别的控制: text-orientation 只能控制整个文本块的字形方向，无法对单个字符进行精细的控制。如果需要对某些字符进行特殊处理，可能需要使用 JavaScript 或 SVG。
复杂排版: 对于复杂的排版需求，例如需要在垂直文本中嵌入水平文本，text-orientation 可能无法胜任。在这种情况下，可以考虑使用 SVG 或 Canvas 来实现更灵活的排版。
与其他属性的冲突: text-orientation 可能会与其他 CSS 属性产生冲突，例如 letter-spacing 和 word-spacing。在使用 text-orientation 时，需要仔细测试，确保各个属性之间的相互作用符合预期。

如果 text-orientation 无法满足需求，可以考虑以下替代方案：

SVG 文本: SVG 提供了更强大的文本处理能力，可以对单个字符进行精细的控制，并支持复杂的排版效果。
Canvas: Canvas 允许使用 JavaScript 绘制文本，可以实现自定义的字形方向和排版效果。
JavaScript: 可以使用 JavaScript 遍历文本节点，并根据需要修改字符的样式。

最佳实践与注意事项

在使用 text-orientation 属性时，应该注意以下几点：

明确需求: 在开始编写代码之前，应该明确排版需求，例如是否需要垂直排版，是否需要混合排版，以及是否需要对某些字符进行特殊处理。
选择合适的取值: 根据需求选择合适的 text-orientation 取值。如果不确定，可以尝试不同的取值，观察效果。
测试兼容性: 在不同的浏览器和设备上测试代码，确保兼容性。
注意性能: 避免过度使用 text-orientation 和其他复杂的 CSS 属性，以免影响性能。
编写清晰的代码: 为代码添加注释，解释 text-orientation 的作用和用法，方便日后维护。

一些实用的例子

垂直导航菜单

<style>
.vertical-menu {
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.vertical-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid #ccc;
}
</style>

<nav class="vertical-menu">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

日文垂直排版

<style>
.japanese-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.2em;
  line-height: 1.8;
}
</style>

<div class="japanese-text">
  これは日本語のテキストです。This is some English text. 12345
  漢字、ひらがな、カタカナが混ざっています。
</div>

结合text-combine-upright显示年份

<style>
.year {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-combine-upright: all;
  -webkit-text-combine-upright: all; /* Safari */
  -ms-text-combine-upright: all; /* IE */
  font-size: 2em;
}
</style>

<div class="year">2024</div>

这些例子展示了 text-orientation 在实际应用中的一些可能性。通过灵活运用 text-orientation 属性，我们可以创建出各种各样的垂直排版效果，提升用户体验。

总结与展望

总而言之，text-orientation 是一个强大的 CSS 属性，可以用于控制垂直排版中的字形方向。它在处理混合了不同语言或字符集的文本时非常有用，可以实现精细的字形控制。尽管存在一些局限性，但通过与其他 CSS 属性配合使用，以及在必要时使用替代方案，我们可以充分利用 text-orientation 的功能，创建出美观且易于阅读的垂直排版效果。掌握这个属性，能让你在排版上更加得心应手。

更多IT精英技术系列讲座，到智猿学院