[Fix] Tibetan renders properly

[tomer-gom]

Summary

Currently Tibetan isn't rendered properly, characters aren't stacking as they are supposed to. This is because the font used doesn't support Tibetan script stacking. This PR addresses that.

• Add a Tibetan font fallback (local-only, unicode-range: U+0F00-0FFF) so Tibetan text stacks correctly without bundling fonts.
• Load that fallback once after /theme/current so it wins over the theme’s body font but still respects user custom styles.
• Preserve each theme’s typography by setting --lute-theme-font-stack to match its existing font stack; To keep each theme’s typography intact (and avoid falling back to the base stack), each theme needed to set --lute-theme-font-stack to match its existing font choices. That way, the new fallback can prepend Tibetan-capable fonts while preserving the look each theme already defined for non-Tibetan text.
• Include the fallback CSS on all pages (reader, term popup, term sentences, image search) so term-related views get the same Tibetan rendering.

Testing

• Manual: verified Tibetan text stacks in reader, title, term popup/selector, sentences.
• Manual: confirmed script-fallbacks.css loads after /theme/current on those pages.
• Manual negative checks: temporarily broke the Tibetan stack and the theme fallback to ensure the Playwright assertions fail when expected.
• Automated: created pytest tests/playwright/test_tibetan_font.py (with app running on :5001) passes when fallbacks are correct and fails under the simulated breakages (simulated Tibetan text using not supported font, and simulated non-Tibetan text overriden with Tibetan font instead of theme font)

Before (Characters not stacking properly)

After (Correct character stacking)

[jzohrab]

Marking as "requesting changes", due to my lack of understanding. On first read through the idea seems well organized, I just have questions about the backwards compatibility for existing themes people may have.

[jzohrab]

Hm, is this a potential breakage point? e.g, there's a PR for a new theme, #658 . Also, some users may have their own custom themes (ref https://luteorg.github.io/lute-manual/usage/themes/themes.html#custom-themes).

Is there a way to define this variable at a global level so that new submissions and existing styles will always work?

[jzohrab]

This looks interesting, and I don't know enough about it to comment intelligently. Is this file to be augmented with other scripts for different languages? i.e. different unicode-range entries would get different "handlers".

[jzohrab]

Or could/should this be handled by "custom themes", instead of adding new behaviour to the code?

[jzohrab]

Still learning about this code -- I see in the LingQ theme that there's a body { ... font: .... } block at the top, so this --lute-theme-font-stack is basically duplication of that existing code. Duplication is a sign of a potential code problem, so it would be good to see what options there are for dealing with this.

[axel584]

I tried importing Tibetan (from the Tibetan Wikipedia) and I was able to display it perfectly in my version of Lute without needing this pull request. I don't think it's really Lute's responsibility to manage the operating system's fonts.

[tomer-gom]

I tried importing Tibetan (from the Tibetan Wikipedia) and I was able to display it perfectly in my version of Lute without needing this pull request. I don't think it's really Lute's responsibility to manage the operating system's fonts.

This is correct actually. Which browser did you use? Can you also show the add term when you select a word? Which lute version are you running and do you have custom theme css?

On my Mac with chrome at November 25 fresh lute install it didn’t show correctly. I'll reproduce it in case something changed, but I doubt it.

[axel584]

I tested it on Chrome and Firefox, and both display correctly. On Firefox, I even get information about the font that's actually being used. It's Noto Serif Tibetan.

When I select a word, it seems to work fine.

Do you have the Noto serif Tibetan font installed on your computer?

[jzohrab]

(PRs should go to develop :-), cheers!)

[jzohrab]

I tried this out, with a Mac and Chrome, Lute dev version version 3.10.1 (actually a little ahead of that but not much). With Language > load predefined ... > Tibetan, the default story that comes with it renders incorrectly:

Safari is the same.

The first element in that text, ཐུགས, is given in devtools as

<span id="ID-0-0" class="textitem click word word7 sentencestart status98 kwordmarked newmultiterm" data-lang-id="14" data-paragraph-id="0" data-sentence-id="0" data-text="ཐུགས" data-status-class="status98" data-order="0" data-wid="7" style="font-size: 1rem;">ཐུགས</span>

and devtools gives the font family as "Lucida Grande", Arial, sans-serif, STHeiti, "Arial Unicode MS", MingLiu.

According to ChatGPT, "macOS includes some Tibetan font support, but it’s not always great.". They suggested installing a proper font: brew install --cask font-noto-serif-tibetan. I did that and restarted Chrome, but chars still don't stack correctly.

The words བོད་ཡིག appear stacked correctly in my text editor (emacs), but when I copy-paste that into an edited Lute reading page it shows up as non-stacked characters:

[jzohrab]

Some hacking: adding <style> body { font-family: "Noto Serif Tibetan", serif; } </style> to lute/templates/read/index.html fixed the rendering:

.... so probably some kind of custom styling would do in a hack, instead of changing code. But I'm curious as to why I had to do this at all, if @axel584 didn't.

[tomer-gom]

Some hacking: adding <style> body { font-family: "Noto Serif Tibetan", serif; } </style> to lute/templates/read/index.html fixed the rendering:

.... so probably some kind of custom styling would do in a hack, instead of changing code. But I'm curious as to why I had to do this at all, if @axel584 didn't.

I also checked again with normal lute and had the same result. Maybe this is needed on mac, but for some reason on @axel584's linux environment it's not needed.

@jzohrab Would you suggest a different way to implement the change I did? If so how would you imagine it?