Page MenuHomePhabricator

Include styles for embedded Mongolian script
Open, Needs TriagePublicFeature

Description

The Mongolian script needs extra CSS to display properly. This has resulted in lots of wikis having templates for applying styles to text in Mongolian script, such as Template:MongolUnicode, Template:MongolUnicode-div and Template:ManchuSibeUnicode.

MediaWiki should include styles for Mongolian script so that appropriate styles can be easily applied to words in Mongolian script in a MediaWiki installation, such as

  • by anyone editing wikitext, without needing to first create templates like these
  • by extensions which are not working with wikitext (e.g. Wikibase, ULS)

Some of the issues:

  • The Mongolian script is written vertically and needs writing-mode: vertical-lr, and sometimes also display: inline-block.
  • When embedded in horizontal text, there needs to be a limit on the height to avoid large gaps between the horizontal lines.
  • A font needs to be set so that shaping rules work properly (Chrome can't do shaping across font boundaries, which causes problems with characters like the narrow non-breaking space used to attach suffixes to words).
  • Text in Mongolian script normally needs a larger font size and smaller line height than Latin script.
  • Mongolian and Manchu/Sibe have different sets of letters and most fonts for Mongolian script don't include both.
  • There are almost no freely licensed fonts for Mongolian script and the ones which do exist are bad, incomplete or unsuitable.
  • The alignment often needs to be adjusted using vertical-align or text-align.

Event Timeline

Some examples:

The Mongolian script text in the first sentence of https://en.wikipedia.org/wiki/Morin_Dawa_Daur_Autonomous_Banner is currently added to the page by wrapping Template:MongolUnicode around each individual word.

If I change the HTML for it to <span lang="mn" style="writing-mode: vertical-lr">ᠮᠣᠷᠢᠨ ᠳᠠᠪᠠᠭ᠎ᠠ ᠳᠠᠭᠤᠷ ᠥᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠬᠣᠰᠢᠭᠤ</span>, in Firefox I get this:

Bildschirmfoto_2023-06-26_13-00-19.png (292×663 px, 35 KB)

  • The last letter of the text is aligned with the surrounding text, rather than the first letter.
  • Firefox has chosen a font designed for Manchu/Sibe which can't display most of the characters in these words.
  • The text is illegibly small.
  • The text is displayed as a single line which creates a large gap in the horizontal lines.

Adding vertical-align: text-top is needed to fix the vertical alignment.

The English Wikipedia version of the template uses font-family: "Menk Hawang Tig", "Menk Qagan Tig", "Menk Garqag Tig", "Menk Har_a Tig", "Menk Scnin Tig", "Oyun Gurban Ulus Tig", "Oyun Qagan Tig", "Oyun Garqag Tig", "Oyun Har_a Tig", "Oyun Scnin Tig", "Oyun Agula Tig", "Mongolian Baiti", "Noto Sans Mongolian", "Mongolian Universal White", "Mongol Usug", "Mongolian White", "MongolianScript", "Code2000", "Menksoft Qagan" to set a list of fonts which attempt to support Mongolian that might be available, and sets font-size: 1.25em to make it legible.

Adding height: min-content makes it wrap each word onto another line, so that it's only as tall as the tallest word:

Bildschirmfoto_2023-06-26_13-34-29.png (93×312 px, 7 KB)

and then line-height: 1.2 reduces the gaps between each word:

Bildschirmfoto_2023-06-26_13-37-39.png (86×266 px, 7 KB)

And now the original section displays like this:

Bildschirmfoto_2023-06-26_13-40-29.png (151×671 px, 45 KB)

Doing something similar with the text in the infobox results in:

Bildschirmfoto_2023-06-26_13-49-08.png (119×288 px, 11 KB)

One of the parent elements has text-align: center and this translates into the Mongolian script words here being centred vertically, which makes them look somewhat arbitrarily positioned. To make each word start from the same position at the top, it also needs text-align: left (or better: text-align: start):

Bildschirmfoto_2023-06-26_13-55-16.png (119×288 px, 11 KB)