Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    To achieve consistent horizontal alignment of text across different browsers when using writing-mode: vertical-lr;, you can use additional CSS properties to control the alignment. Specifically, you can use the text-align and text-orientation properties to ensure that the text aligns as desired.

    <h1 style="writing-mode: vertical-lr; text-align: start; text-orientation: upright;">

    結ꦲꦂꦠꦤ꧀ꦠ

    text-align: start;:This property ensures that the text aligns to the start of the line, which in the case of vertical text, means aligning to the top of the container. This helps maintain consistent alignment across different browsers.

    Login or Signup to reply.
  2. 0

    Unfortunately, inconsistent alignment problems are not uncommon, especially when using vertical text and different alphabets.
    If you discover language specific issues please file a bug-report.

    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%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search