CODEWITHSUNDEEP
htmlcssioswebmongolian-vertical-script
Frank
Frank

Reputation: 160

How can I make vertical-lr traditional Mongolian texts dispaly correctly on iOS broswers?

With the writing-mode set to be vertical-lr, a text box containing traditional Mongolian doesn't display correctly on iOS as shown in the first part of the first figure below. If the writing-mode is horizontal-tb, the text displays just fine. How can I make the Mongolian text in the vertical-lr mode display correctly on iOS/iPadOS? The vertical and horizontal modes work fine for desktop browsers, though. The html that can reproduce the figures is:

<!DOCTYPE html>
<html>
<head>
<style>
    @font-face {
      font-family:'hawang';
      src: url('A Traditional Mongolian Font File; Removed because of data sensitivity');
    }
    .mongol-text-vertical {
      writing-mode: vertical-lr;
      font-family: "hawang";
    }
    .mongol-text-horizontal {
      writing-mode: horizontal-tb;
      font-family: "hawang";
    }
    
</style>
</head>
<body>
<h2>Vertical mode; wrong display</h2>
<div class="mongol-text-vertical">
<p>
ᠠᠷᠪᠠᠨ ᠬᠤᠶᠠᠷ ᠵᠢᠯ <br>
ᠮᠤᠡᠭᠭᠤᠯ ᠠᠷᠠᠳ ᠤᠨ ᠲᠠᠭᠤᠤ  
</p>
</div>
<h2>Horizontal mode; wrong display</h2>
<div class="mongol-text-horizontal">
<p>
ᠠᠷᠪᠠᠨ ᠬᠤᠶᠠᠷ ᠵᠢᠯ <br>
ᠮᠤᠡᠭᠭᠤᠯ ᠠᠷᠠᠳ ᠤᠨ ᠲᠠᠭᠤᠤ  
</p>
</div>
</body>
</html>

The webpage in Firefox on iPadOS. Firefox on iPadOS

Edit: added the page in a desktop browser.

The webpage in Firefox on Windows 11. Firefox on Windows

Upvotes: 1

Views: 264

Answers (1)

Frank
Frank

Reputation: 160

It turned out that I had to set text-orientation as sideways so as to make the Mongolian script show correctly in browsers on iOS/iPadOS. I suspect the problem is that browsers on iOS don't support vertical scripts so the default value of text-orientation (mixed) just doesn't work since the browsers don't know how to Lays out the characters of vertical scripts naturally (quoted from MDN).

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

The text-orientation property is specified as a single keyword from the list below.

Values

mixed

Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.

sideways

Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

Upvotes: 2

Related Questions