Displaying Khmer Characters (with vowels) in HTML input type text

Question

For the word cambodian in Khmer it is កម្ពុជា. This word in Khmer is taller than normal ASCII characters because of the combination of the two vowels at the bottom of the second character.

In IE (version 8 - 11) and Mozilla Firefox (version 28), the vowels are not displayed fully in the input type text. But in Google Chrome (version 34), the vowels are displayed.

I have a test page at JsFiddle.

The Khmer font I have set to use in my browsers is the Khmer OS System font.

The only solution I can think of is by increasing the height of the input type text e.g. input[type='text'] { height: 25px; }. But in IE 9, although the height is taller, the vowels still do not display unless a space is typed next to it.

Is there a JavaScript or CSS hack I can use to have IE and FIrefox display the vowels like how Google Chrome does it?

Answer 1

The problems may depend on font face, font size, and rendering engine. What you can do about this is to set input { font-size: 100% }, which overrides the common defaults in browsers—they use a font size reduced by about 10% for input elements. This rule alone fixed the problem when testing on Firefox in Windows 7 (which otherwise exhibited the problem described in the question).

On IE 11, the problem appears much worse: the Khmer characters are really unreadable (about 1mm tall), and the font size setting does not help much. The reason seems to be that IE uses a different font. Adding input { font-family: Khmer UI } fixed this. But this of course depends on the existence of a suitable font in the system. Your mileage will vary, but setting font size to 100% and font family to a suitable font (the same is that used for normal text if it works OK) for input elements probably fixes the problem locally.

On web pages, the situation is much more complicated. Khmer characters are still very rarely found in fonts—the odds are that a user’s system has no font that supports them. (According to Fileformat.info data on this, only two fonts have Khmer characters: Code2000 and GNU unifont. There are some more, but they are most probably fonts that users would need to download and install, rather than anything shipped with an OS.) So it seems that the only practical approach is to use a downloadable font, such as the Google font Khmer. Deploy it according to Google’s instructions and set it for both Khmer content in normal text and for input (and set size to 100%).