ansaurus

Question

Use different fonts for Latin characters and Japanese characters with CSS

Answer 1

A:

How are you telling the page what language to print to screen?

If you are getting a variable can you not use this variable as a class which you use for a div of body.

<body class="english">

or

<body class="japanese">

AxelTron 2010-09-16 13:44:40

Answer 2

A:

We are declaring the lang property in the body tag. The problem is we want English characters to use a font like Helvetica and Japanese characters to use something like Meiryo. On IE it will make the English characters Meiryo too even if we declare English fonts first. We get the expected behavior in every other browser.

Franky 2010-09-17 13:39:11

Answer 3

+3 A:

You cannot get around marking every language section with a class and font if you want this to work cross-browser. It cannot be done with only CSS.

You can apply a language class manually or automatically. Manually might be a lot of work to support and maintain, but is robust. Dynamically it can be done using a back-end script or Javascript, by scanning a string for characters that fall within certain unicode character blocks, and applying a language class accordingly.

You can find the block definitions here (Japanese is Hiragana and Katakana): http://www.fileformat.info/info/unicode/block/index.htm

I'd recommend the back-end way of doing this, because changing a font on the page might cause flickering or shifting of elements during page load.

Blaise Kal 2010-09-18 17:53:03

Hiragana and katakana are only the syllabic character sets, you're leaving out all the kanji (the CJK characters).

Nathan Hughes 2010-09-24 13:23:12

Answer 4

A:

Create css class for English and Japanese text.

body.ja { font-family: meiryo, sans-serif; }
body.en { font-family: arial, verdana, sans-serif; }
*.ja { font-family: meiryosans-serif; }
*.en { font-family: arial, verdana, sans-serif; }

If entire page is in Japanese, add class="ja" to body tag, if there's mixed content, add class="ja" to the html element that contains Japanese text, for example:

<td class="ja">日本語</td>

djrsargent 2010-09-24 13:18:58

ansaurus

tags:

views:

answers:

Use different fonts for Latin characters and Japanese characters with CSS

related questions