2

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.

Flux
  • 9,805
  • 5
  • 46
  • 92

1 Answers1

3

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

  • Trivia: the text you copied from is [墨經校釋 by 梁啟超](https://ctext.org/mo-jing-jiao-shi). It is a commentary on [Mozi](https://en.wikipedia.org/wiki/Mozi_(book)), a text from the [Warring States period](https://en.wikipedia.org/wiki/Warring_States_period) (475 - 221 BC). Also, the text in the question above is from [Mencius](https://en.wikipedia.org/wiki/Mencius_(book)) (c. 300 BC). – Flux Feb 18 '19 at 22:01
  • Thanks for the info, I will definitely read the Wikipedia pages. I remember now that the text comes indeed from the Chinese Text Project; actually, I have been using their [Character lookup dictionary](https://ctext.org/dictionary.pl?if=en) as a reference for one of my Unihan-related utility apps. I do have a passion for Chinese characters in general, but I must confess that the only CJK language I'm familiar with is Japanese... –  Feb 18 '19 at 22:44