Kerning/text-width issues in display of Japanese text

[FioraAeterna]

Describe the bug

I am trying to restore an old Japanese flash game so that it can be accessible with modern browsers. However, the text rendering is fairly off in a number of ways compared to Adobe Flash, resulting in text often overflowing the textbox, like this:

Furthermore, the kerning is very weird, which makes it a bit painful to read, even ignoring the issue with the text sometimes clipping. By contrast, Flash looks like this:

It may not be obvious to someone who can't read Japanese, but the text in the Ruffle version is weirdly squished, with some letters horizontally shrank relative to others in a strange way.

Expected behavior

I expect the text rendering to be similar to Adobe Flash, or at least similar to "typical Japanese text". Ideally, it shouldn't clip over the edge, as well.

Content Location

https://fioraaeterna.github.io/ar-tonelico.jp/1avs/cosmosphere.html

Affected platform

Browser's extension

Operating system

macOS Sonoma 14.7

Browser

Chome 131

Additional information

No response

[FioraAeterna]

Worth noting, I found an English translated version of the same game and it also has problems with text rendering in Ruffle, resulting in cut off text. So there might actually be two issues here; one with the cut-off text rendering, and (separately) the general poor display of Japanese text.

[n0samu]

Yes, here is a comparison of the spacing in the English version (desktop FP vs desktop Ruffle):

Ruffle:

FP:

Note that while the original game specifies the text field's font as _ゴシック (Gothic), the English version specifies it as ＭＳ ゴシック (MS Gothic)

[nebulas-star]

Note that while the original game specifies the text field's font as _ゴシック (Gothic), the English version specifies it as ＭＳ ゴシック (MS Gothic)

Font ＭＳ ゴシック is using in all subsequent chapters for it (at least for the preview rendering), so English version edit it for all chapters in same font design.

Additionally, in FP, font scaling should be implemented as an increase or decrease in font size. However, when the size falls below a certain threshold, FP will switch to the bitmap version of that font (if have), resulting in a different effect compared to Ruffle's rasterized glyphs. (Does this feature also need to be emulated?)

---

BTW, this text box is design for three line each sentence, so may main post "flash version" image even have any problem. in my desktop, it looks like:

(The latest desktop version appears to produce consistent results with the latest browser plugin version.)

[nebulas-star]

After some editing and verification, I've concluded that the typesetting issue in the English version occurs when the font ＭＳ ゴシック falls back to the embedded Noto Sans.

However, even after introducing MS Gothic.ttf to the browser extension version, proper display still couldn't be achieved. it only worked after modifying the SWF file to replace ＭＳ ゴシック with MS Gothic.

This suggests that browser version may cann‘t recognize non-English font names embedded within font files.

[kjarosh]

@FioraAeterna Sorry for commenting so late.

I don't see the text overflowing anywhere, it's laid out nicely. (It's properly been fixed by various text improvements.)

The weird kerning and squished text results from the font being used. You're setting the font to MS UI Gothic, but that's what the text looks like in this font. Below you have a comparison, top: how the text should look with this font, bottom: how it looks in Ruffle.

The config from your website:

window.RufflePlayer.config = {
    fontSources: ["msgothic.ttc"],
    defaultFonts: {
        japaneseGothic: ["MS UI Gothic"]
    }
}

In order to fix this issue, you need to set a different font, perhaps some that is more similar to FP's.

We're working on making device fonts work out of the box on web, but that's not an easy thing to do.

---

Regarding the English version, no device font is being provided on the site, so we're falling back to the default font, Noto Sans. That's currently expected and will be fixed when we start supporting device fonts properly on web.

---

Of course, we're pretty bad on desktop with those fonts, so there's a lot of work to do in regard to that.