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

Question

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:

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

i think you are running into the same problem that got discussed here: https://stackoverflow.com/questions/31788315/strange-behavior-with-trailing-white-space-in-pre-element-with-rtl-direction — Warden330, Aug 25 '20 at 08:35
Jukka K. Korpela's answer in this page explains the punctuation mark placement with CSS RTL direction: "The reason is that the exclamation mark “!” has the BiDi class O.N. ('Other Neutrals'), which means effectively that it adapts to the directionality of the surrounding text." https://stackoverflow.com/questions/20798667/why-is-a-trailing-punctuation-mark-rendered-at-the-start-with-directionrtl — Meng-Yuan Huang, Aug 27 '20 at 14:00

score 2 · Accepted Answer · edited Aug 26 '20 at 06:19

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/

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

1 Answers1