ศาลาชุมนุม

[chiangmaishrek]

On my website page http://lingopolo.com/flipcard/start_quiz/115/words I have some weird looking boxes appearing around some of the letters, see below:

thai_text_boxes.png (21.18 KiB) Viewed 28208 times

However, when I go into the detail of the words, e.g. http://lingopolo.com/thai/word/symbol-for-abbreviation then the boxes are not there.

I see too that on http://lingopolo.com/flipcard/start_quiz/100/words the ไ is displaying fine.

Any ideas what is causing this and how to fix it? Thanks!

[PerfectTHAI]

I took at look at your code and it doesn't look like you are using a font file to render the Thai text.
This means you're relying on the browser to have support for Thai characters - which is not always the case!

The only way to guarantee Thai text will display in all modern browsers is to use the "@font-face" function in CSS and specify font files.
I have described how it is done in a previous post: http://www.thai-language.com/forums/t/t ... s10#p51526

The links you posted do however seem to work just fine in Google Chrome.

[chiangmaishrek]

Hello PerfectTHAI,

Thanks for your response. You're correct that I'm not using a font file to render the characters. Now, I'm not sure why, but I cannot now reproduce the problem. Do you know of a particular browser where Thai characters consistently display badly so that I can test things?

[PerfectTHAI]

Hi chiangmaishrek,

The situation with web browsers is a little complicated.
Modern browsers will attempt to select a font from the user's operating system to render unicode characters that do not exist in the current font selected in CSS (http://en.wikipedia.org/wiki/Unicode_an ... er_support). This is generally a bad thing as there is no guarantee such a font will exist for all users, depending on the language/unicode range.
Worse still (at least for the obsessive web designer!), you will lose all control as to how the final text will look to the whims of the web browser.

This is why @font-face should always be used - it guarantees the text will look the same and can be displayed for all users.

If you really are worried about other browsers are doing and don't want to go down the @font-face route, you can try an online rendering service such as http://browsershots.org which will draw your page for you in a vast array of browsers and you can download the results.

[Richard Wordingham]

This is why @font-face should always be used - it guarantees the text will look the same and can be displayed for all users.

This of course matters unless it is the content rather than the presentation that matters.

What we don't know is what browser (including version) and operating system the problem was seen on. I did see something similar when I first used Windows 2002 on Windows 7. The problem may have been rendering was trying to use glyphs indexed via codepoints the private use area, and no such codepoints being mapped in the available fonts. This problem went away when I installed the capability for Word 2002 to use the Word XML formats. I am assuming the web page has not been changed since the problem appeared. I was expecting to see some strange or misplaced characters in the text of the web page, but I saw none. (One problem in typing Thai is that misplaced characters are not always displayed as one types, but only become apparent when the text is read using a different application.)

Richard.

[PerfectTHAI]

This of course matters unless it is the content rather than the presentation that matters.

The fact that all browsers rely on using fonts from the underlying operating system means that in some cases the text will not be displayed at all (if there is no suitable font available) and will appear as boxes or question marks.
Admittedly this is much less of a problem nowadays, as modern operating systems should come with a good range of fonts covering a wide unicode range - but there are always exceptions, which you should prepare for.

This is why I'm advising the use of @font-face - it's a cast-iron 100% guarantee that the Thai characters will be displayed regardless of browser or operating system (or maybe I'm just being overly pedantic!).