CODEWITHSUNDEEP
htmlcss
Meng-Yuan Huang
Meng-Yuan Huang

Reputation: 2333

HTML/CSS RTL and vertical-rl cause trailing punctuation marks placed to wrong places

Many Chinese books are written from right to left and vertically. I try to use HTML/CSS to layout some Chinese texts in this way. For example,

  <head>
  <style>
    p.rtl {
      writing-mode: vertical-rl;
      display: inline-block;
      height: 100vh;
      white-space: normal;
      text-align: left;
    }

    body {
      margin: 0px;
      white-space: nowrap;
      direction: rtl;
      display: flex;
    }
  </style>
</head>

<body>
  <p class="rtl">
    123中文中文中文中...
  </p>
 ...

The full code is here: https://codepen.io/mrrogerhuang/pen/ZEWeQGd

However, I find if there is a trailing punctuation mark in a paragraph, the punctuation mark is placed in the leading of the last line, like the red circle annotated texts in this macOS Safari 13 screenshot: enter image description here

Chrome 84 on macOS has the same problem. Is this a browser bug?

Upvotes: 0

Views: 362

Answers (1)

Unbywyd
Unbywyd

Reputation: 966

I think this is exactly what you need

p.rtl {
   direction: ltr;
}

Full example:

p.rtl {
  writing-mode: vertical-rl;
  display: inline-block;
  height: 100vh;
  white-space: normal;
  text-align: left;
  direction: ltr;
}

body {
  margin: 0px;
  white-space: nowrap;
  direction: rtl;
  display: flex;
}

The page explains why uses "direction: ltr" for texts in "Han-based writing mode":

Han-based systems are commonly written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction, or a top-to-bottom inline direction with a leftward (right-to-left) block flow direction. Many magazines and newspapers will mix these two writing modes on the same page. https://www.w3.org/TR/css-writing-modes-4/

Upvotes: 2

Related Questions