如何在垂直 CJK 文本中居中标点符号？

Question

我使用 CSS (body { writing-mode: vertical-rl; }) 垂直显示 CJK（中文）文本。不幸的是，标点符号默认不居中：

句号和逗号对齐到右上角，而不是居中。我在 Firefox 65.0 和 Chromium 71.0 中得到相同的结果。

标点居中有固定的方法吗？我觉得我一定错过了一些明显的东西。我的中文实体书都是标点居中印刷的，但阅读 W3C article on vertical text 和 MDN CSS 文档没有发现任何有关垂直 CJK 文本标点居中的内容。

Answer 1

标点符号的对齐方式似乎受语言属性影响lang；例如在中文中，这取决于属性值是普通 "zh" 还是繁体 "zh-Hant".

这是我用来测试它的 HTML 文档（我不得不缩短中文文本以允许 post 它内联）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Vertical Writing Punctuation</title>
    <style>
        body { writing-mode: vertical-rl; }
        .vertical-text { height: 9em; }
    </style>
</head>
<body>
<hr>
<div class="vertical-text" lang="zh">
「體也若有端」五字，張惠言謂為第二條之錯簡，孫從之。
</div>
<hr>
<div class="vertical-text" lang="zh-Hant">
「體也若有端」五字，張惠言謂為第二條之錯簡，孫從之。
</div>
<hr>
</body>
</html>

顺便说一句，我完全不知道我从随机站点复制的中文文本的含义...

更新:

根据 Best Practices for Chinese Layout – Bobby Tung，似乎只有当文本显示为 繁体中文 字体时，中文标点符号才会居中，而不管书写模式（水平或垂直）。

Firefox 或 Safari 等 Web 浏览器尊重 lang 属性并自动分配适当的显示字体；然而，Chrome 似乎忽略了它。然后需要一个额外的 :lang CSS 选择器...

这是另一个测试页，其中水平和垂直文本的标点符号都居中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Centered Punctuation</title>
    <style>
        :lang(zh-Hant) { font-family: Verdana, Arial, Helvetica, sans-serif, times, Heiti TC, PMingLiU, PMingLiu-ExtB, SimSun, SimSun-ExtB, HanaMinA, HanaMinB; }
        .horizontal-text { width: 9em; writing-mode: horizontal-tb; }
        .vertical-text { height: 9em; writing-mode: vertical-rl; }
    </style>
</head>
<body lang="zh-Hant">
<hr>
<div class="horizontal-text">
「體也若有端」五字，張惠言謂為第二條之錯簡，孫從之。
</div>
<hr>
<div class="vertical-text">
「體也若有端」五字，張惠言謂為第二條之錯簡，孫從之。
</div>
<hr>
</body>
</html>

注意：繁体中文的字体堆栈是中文文本计划网站上使用的字体堆栈。

如何在垂直 CJK 文本中居中标点符号？

How to center punctuation in vertical CJK text?

css

cjk

vertical-text

punctuation