So this time it’s League of Legends from Riot Games. I had an opportunity to talk with a development manager from the team and it was a really good experience. The game itself is multiplayer arena games that runs on both mobile platforms and PC. The game is operating in Thailand and has its client support Thai language natively.

Let’s see how well this is implmented.

The Good

Right from their website, the installer shipped is dedicated to Thai region. Once the installer finished their job, Riot Games laucher runs with all UI in Thai. This is so far so good.

Riot Games in Thai

The settings Windows are also in Thai as well.

Riot Games settings

From the discussion I mentioned earlier, on the PC version the laucher is based on Chromium (or probably … Electron? which is also Chromium-based). Chromium/Chrome has a very good support for Thai text rendering and shaping for quite a long time now so there’s nothing to worry about. Or at least that’s what I think.

Anyway let’s jump into the game

Game launcher

In-game menu seems to be very well executed. Text is shaped correct. Words like “แชมเปี้ยน” is layout well without overlapping between PO PLA and SARA II mark above.

Or so I thought …

Apparently the in-game menu is also a browser-based that is separated from the actual game play. It should have a good Thai language support built-in.

Uppon choosing the game mode, the game/game launchger closes itself and launch another game window. This time for real it’s the game engine capability displaying, not the browser engine.

In-Game

Now we have the actual game running, not the web browser stuffs. As you can see Thai text is shaped nicely as well, although there are issues to discuss. Let’s set the settings menu.

In-Game Settings menu

With more text it should be more apparent that the text is quite nicely shaped. Tonemarks are in the proper place, whether above a charactors or above floating vowels. There’s no “floating tonemarks” issue to be seen anywhere.

However this is the place where we started so see some problem.

The bad

From what I can see, one of the most prominent issue is with ป (U+0E1B Po-Pla). In Thai writing system, there are 4 levels of placement:

  • Baseline,
  • Mark above Baseline,
  • Mark above the mark above baseline,
  • And the under baseline

The characters are usually sit in one position, with some exceptions where parts of the glyph can extended beyond the placement and impede into the other area. These kind of charactors includes:

  • 0E0D ญ THAI CHARACTER YO YING
  • 0E0E ฎ THAI CHARACTER DO CHADA
  • 0E0F ฏ THAI CHARACTER TO PATAK
  • 0E10 ฐ THAI CHARACTER THO THAN
  • 0E1B ป THAI CHARACTER PO PLA
  • 0E1D ฝ THAI CHARACTER FO FA
  • 0E1F ฟ THAI CHARACTER FO FAN
  • 0E24 ฤ THAI CHARACTER RU
  • 0E26 ฦ THAI CHARACTER LU

As you can see, these charactors have parts that extends into the under baseline area or above the baseline charactors area. If the next charactor is placed in the said area, as it it would collide.

Alt text

When this happen, the shaper has to do something so the text is still legitable. For the League’s case, that is not the case.

For example “แชมเปี้ยน”

Alt text

The shaper should move the SARA II and MAI THO to the left to avoid the “tail” of PO PLA here. The same goes to the line below, but in this case it’s SARA I, not SARA II.

This is how it should looks like.

Alt text

From what I see, it looks like the text layout is based on the TrueType layout algorithm which place a charactor relatively to the caret position, and then move the caret along the baseline. On top of that there is also kerning where the charactor is moved according to the prior charactor. This can work when the font is design for such algorithm, but most modern Thai fonts are now attune to the OpenType specification where more advance layout algorithm is supported. Those old fonts are dying breed.

In this particular situation, what is missing is the MarkToBase Attachment (mark) and MarkToMark attachment (mkmk). These two features provide a way to attach one glyph to another based on their position, rather than position it in relative to the base line.

I am also expecting issues around the YO YING (ญ) charactor as well, as this is another common problem. I haven’t come across any though.

The Ugly

League of Legends are consists of 3 pieces of software: The Riot Launcher, The Game Menu, and the Game Engine. I found that these three parts uses different fonts to display Thai Text.

Alt text

In my opinion, at least the in-game screens and the game play should have consistent choice of fonts. It just looks weird.

Also the text in the Riot Launcher is rather small. The header text is almost illegible.