[SOLVED] Relative horizontal alignment on text when `writing-mode: vertical-lr;`

Relative horizontal alignment on text when `writing-mode: vertical-lr;`

When working with the CSS style writing-mode: vertical-lr; and two different languages font, my text would get aligned to the left side of the kanji on Chrome, but to the right side on Firefox.

This code snippet that I'm working with:

<h1 style="writing-mode: vertical-lr;">
  結ꦲꦂꦠꦤ꧀ꦠ
</h1>

How can I modify my code it so it can be similar to the Chrome counterpart, where the script text is horizontally aligned to the left side of the kanji, and to be consistent across browsers?

Solution

Unfortunately, inconsistent alignment problems are not uncommon, especially when using vertical text and different alphabets.

A possible workaround could be to wrap each language in a separate <span> element and tweak the baseline position via ascent-override.

/* javanese */

@font-face {
  font-family: 'Noto Sans Javanese';
  font-style: normal;
  font-weight: 400 700;
  src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH507U9dp0.woff2) format('woff2');
  unicode-range: U+200C-200D, U+25CC, U+A980-A9DF;
  ascent-override: 190%;
}


/* latin */

@font-face {
  font-family: 'Noto Sans Javanese';
  font-style: normal;
  font-weight: 400 700;
  src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH59bU9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: "Noto Sans Javanese", sans-serif;
}

.vt {
  writing-mode: vertical-lr;
  height: max-content;
}

<h1 class="vt">
  <span>結</span> <span>ꦲꦂꦠꦤ꧀ꦠ </span>
</h1>

In the above example I'm setting a custom ascent value only for the Javanese unicode range

@font-face {
  font-family: 'Noto Sans Javanese';
  font-style: normal;
  font-weight: 400 700;
  src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH507U9dp0.woff2) format('woff2');
  unicode-range: U+200C-200D, U+25CC, U+A980-A9DF;
  ascent-override: 190%;
}

Text directions for "non-western" alphabets/writing-systems

Whether we like it or not – most text-rendering engines are foremost optimized for "latin" "left-to-right" rendering.
While modern browsers and OS' have implemented quite a few unicode-based auto-detections for e.g right-to-left or top-to-bottom writing-systems maybe also including regional deviations or contextual ligatures – it's safe to say, there are still a lot of issues.

If you discover language specific issues in a browser please file a bug-report!

You're mixing Kanji letters where the browser prevents a rotation (knowing vertical text direction is valid/preferred) when applying a vertical text mode with Javanese text (preferring an horizontal direction) – speculative: maybe Javanese is in particular not well supported in the current layout engines.