Adding Khmer fonts to texts.

[KimHongPhong]

Is it possible to add a different Khmer font to the website? There is a plethora of available fonts online, for example, the Noto Sans and the Noto Serif Khmer fonts, and many others from Google Fonts. Here is the Google Fonts website for the Khmer fonts: https://fonts.google.com/?lang=km_Khmr

[ricktu288]

Continuing the discussion in https://hosted.weblate.org/translate/ray-optics-simulation/simulator/km/?checksum=dca67d7e999fb75e

I think there are two separate issues/proposals related to language specific fonts:

1. Specify a default font (possibly with a font file) for the webpages (including the web app) per language
2. Specify the list of fonts in the options of the Text Label tool per language.

For 1, it seems that Bootstrap (the UI library we use) does not specify the exact font name for each language, and only the font family. So that the font it actually uses is chosen by the browser and depends on the environment. On my laptop, it is already Noto Sans Khmer that you mentioned.

Since I didn’t manually set up any environment for Khmer and has no knowledge about this language, I would like to know that, is it true that on most computer used by Khmer user, this webpage will instead show some font which is not usually preferred? Note that this may possibly an issue of Bootstrap if it causes the browser to use a font for Khmer not usually preferred in the context.

For 2, I need to see how other similar web apps are handling this, as I am not familiar with fonts, especially in multiple languages. If you are familiar with Khmer fonts, can you tell me what is the expected to show up in the font selection menu of a text label? I mean like a dozen of them, rather than like in Microsoft Word where there are sometimes more than a hundred which is clearly overkilled for this web app.

A related issue of is about the Tamil font, where the Tamil script’s combining character does not work on the CI environment except for using the “Courier New” font for the text label, which makes the text looks weird. See

ray-optics/scripts/buildImages.mjs

Line 206 in 582c70f

// For Tamil, override the font of all `TextLabel`s to Courier New, as it appears to be the only one that supports combining characters in Tamil script on Ubuntu, which is the OS used for the CI. Since there is no such issue on Fedora as well as Firefox on Ubuntu, this is likely an issue of node-canvas or some of its dependencies, and therefore this should be treated as a temporary workaround.

for more information. Currently I also do not know how to solve this issue for the Tamil language either. Note also that the font in the CI environment (which generate the text in the images in the Gallery) is installed in https://github.com/ricktu288/ray-optics/blob/master/.github/workflows/deploy.yml#L32

[KimHongPhong]

(1.) Yes, it is preferred for most Khmer websites to display Khmer texts with Noto Sans Khmer in their UI. Regarding the image you have attached, my browser still displays the undesired font.

The font is displayed properly in Android platforms:

As I went through some CSS, I can see that the website is using Helvetica Neue as its display font, which is not for displaying Khmer. I have tried modifying the CSS to use the desired font and linked the font file from Google Fonts by adding this line of code:

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Khmer&display=swap" rel="stylesheet">

After that, it has finally displayed the desired font:

(2.) I would expect the fonts below to be shown in the fonts list:

• Noto Sans Khmer
• Noto Serif Khmer
• Siemreap
• Battambang
• Moul
• Dangrek
• Content
• Fasthand
• Freehand
• Kdam Thmor Pro
• Arial (For English)
• Times New Roman (For English)

I would like to recommend the Khmer Times or the Koh Santepheap website to see how they managed to display 3 languages (English, Khmer, Chinese).
Khmer Times: https://www.khmertimeskh.com/category/national/
Koh Santepheap: https://english.kohsantepheapdaily.com.kh/

[ricktu288]

For the webpage font, can you try that whether you can make it a desired font by just editing the CSS (without linking to external server like Google Fonts)? The AI agent in my IDE told me that it should be the case, and there should be no need to link to an external font server or bundling.

It suggests adding a list of common preferred fonts to the meta section of the Main locale component for each language

{
  "meta": {
    "languageName": "ភាសាខ្មែរ",
    "fonts": "Noto Sans Khmer, Khmer Sangam MN, Leelawadee UI, Khmer UI, sans-serif"
  }
}

And use the primary list as the CSS font stack for the webpage where the best font is the first, and if unavailable on the device, fallback go the second, and so on.

For TextLabel fonts, however, it seems that the font list you provided are mostly only available via Google Fonts and not on most systems. I have been avoiding CDNs in this project as

1. They may not be available in all parts of the world.
2. This app supports running locally or as a standalone node.js package. Internet may not be available.
3. They can cause privacy concerns (this is especially true for those users who want to run locally).

The AI agent suggests adding a list of fonts widely available on most systems:

{
  "textLabelFonts": "Noto Sans Khmer, Khmer OS, Khmer OS System, Hanuman, serif"
}

If some users really want to use other fonts, I may add a "Custom..." option on the font dropdown of TextLabel to enter a custom font name which is installed on their system.

[ricktu288]

1. I have added the system-ui to the font stack of all the webpages, so now it should use the same font as your operating system's UI.
2. I have added a sceneObjs.TextLabel.fonts key for the font list. See https://hosted.weblate.org/translate/ray-optics-simulation/simulator/en/?checksum=7ade9b5485d2759e
   The Khmer version should be like:

Serif: ("Serif" in Khmer)
Noto Sans Khmer: (the font name in Khmer)
... (other common Khmer fonts)
Arial: Arial
Times New Roman: Times New Roman 

Note that as no font CDN is used, please only add fonts which are most likely to be available on the user's system (you can add some common fonts on each of Windows, Mac, etc and let the user decide which to use).

[KimHongPhong]

Okay, the font I have requested is now live. Thank you.
You may close this conversation.