Search code examples
csscjkpunctuationvertical-text

How to center punctuation in vertical CJK text?

I have a CJK (Chinese) text displayed vertically using CSS (body { writing-mode: vertical-rl; }). Unfortunately, punctuation is not centered by default:

Chinese punctuation

The full stops and commas are aligned to the top right, rather than the center. I get the same result in Firefox 65.0 and Chromium 71.0.

Is there an established method for centering the punctuation? I feel like I must be missing something obvious. The physical Chinese books I have are printed with centered punctuation, and yet reading the W3C article on vertical text and the MDN CSS documentation turned up nothing on centering punctuation for vertical CJK texts.

Solution

  • It seems that the alignment of punctuation is influenced by the language attribute lang; in Chinese, for instance, it depends on whether the attribute value is plain "zh" or traditional "zh-Hant".

    Firefox screenshot

    Here is the HTML document I used to test it (I had to shorten the Chinese text to be allowed to post it inline):

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

    BTW, I have absolutely no idea about the meaning of the Chinese text I copied from a random site...

    UPDATE:

    According to Best Practices for Chinese Layout – Bobby Tung, it appears that Chinese punctuation gets centered only if the text is displayed in a Traditional Chinese font, regardless of the writing mode (horizontal or vertical).

    Web browsers like Firefox or Safari respect the lang attribute and assign automatically an appropriate font for display; it seems, however, that Chrome ignores it. An extra :lang CSS selector is needed then...

    Here is another test page with centered punctuation for both horizontal and vertical text:

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

    Note: the font stack for Traditional Chinese is the one used on the Chinese Text Project web site.

    enter image description here