1

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

中文标点符号

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

有没有固定的标点符号居中方法？我觉得我一定遗漏了一些明显的东西。我的实体中文书籍是用居中标点符号印刷的，但阅读W3C 关于竖排文本的文章和 MDN CSS 文档并没有发现竖排 CJK 文本的居中标点符号。

4

1 回答 1

3

标点符号的排列似乎受语言属性的影响lang；例如，在中文中，它取决于属性值是 plain"zh"还是繁体"zh-Hant"。

火狐截图

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

<!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>

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

更新：

根据中文布局的最佳实践 – 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>

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

在此处输入图像描述

于 2019-02-18T16:27:18.770 回答