CSS Japanese text not centred in span

user_4179644 0
Viewed 337

I have this Japanese text segmented into <span>s. In the images below I added red borders to the spans to illustrate the problem. The vertical text is achieved using the writing-mode: vertical-rl; CSS property on the surrounding div.

Browser: Chromium Japanese example text

Browser: Firefox enter image description here

Browser: Android enter image description here

As you can see the text inside centred inside each span either having a gap left or at the top. Or in the case of Android it doesn't even seem to put each character inside of a square. Is there a way to ensure each character is perfectly centred inside of the <span>s?

Example HTML file:

<!DOCTYPE html>
<html lang="ja">

<style>
    span {
        border: 1px solid red;
        text-align: center;
    }
</style>

<body>
    <div>
        <span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
    </div>
    <br>
    <div style="writing-mode: vertical-rl">
        <span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
    </div>
</body>

</html>

Result seems to depend on the browser!

css html
2 Answers

It would be more helpful if I could see the CSS code, but try using the text-align CSS property if you haven't yet. You can use it like this: text-align: center;

span {
  border: 1px solid red;
  text-align: center;
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="ja">
<body>
  <div>
    <span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
  </div>
  <br>
  <div style="writing-mode: vertical-rl">
    <span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
  </div>
</body>
</html>

user_140953000

You should look at this post. Try padding-right or text-align: center on the CSS. I could probably tell you what is is if I saw the code.

user_122490450
Related