By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,045 Members | 2,120 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,045 IT Pros & Developers. It's quick & easy.

Language selector problem in CSS

P: n/a
Hi,

The language in my web site may be Simplified Chinese or English. I want
to define different styles for each language.
For each language, the http header is different.
<meta name="language" content="en" /> means the language is english
<meta name="language" content="zh" /> means the language is
Simplified Chinese.
Then I use a css selector to define different style for each language.
My css code is

body:
lang(en)
{
background-image:url(../images/body-background.png);
font-size: 11px;
padding:14px;
}
lang(zh)
{
background-image:url(../images/body-background.png);
font-size: 20px;
padding:14px;
}

The difference is the font-size , i want the default font-size of
Chinese is bigger than English. But it doesn't work, no matter the
language is "en" or "zh", the font-size is alwayw be 11px.
Can anyone tell me what's wrong with my code?

Thanks in advance!

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
*Lian Liming*:

The language in my web site may be Simplified Chinese or English.
Both in one file or in separate files?
I want to define different styles for each language.
For each language, the http header is different.
That would be the 'Content-Language' header, the counterpart of the
'Accept-Language' one sometimes sent by the client.
<meta name="language" content="en" /> means the language is english
<meta name="language" content="zh" /> means the language is
Simplified Chinese.
No, for HTML

<html lang="en">
<html lang="zh">

or for (real) XHTML

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<html xml:lang="zh" xmlns="http://www.w3.org/1999/xhtml">

respectively, would tell the language in a way UAs should and a few do
understand. Additionally you should send the corresponding real HTTP header.

You can set the 'lang' (or 'xml:lang') attribute on nearly any element in
HTML, but it's inherited, so it makes sense to put it in the root element.
Then I use a css selector to define different style for each language.
That is possible in principle, but I don't know of any implementation of the
':lang()' selector.
body:lang(en)
{
background-image:url(../images/body-background.png);
font-size: 11px;
padding:14px;
}
lang(zh)
That would be "body:lang(zh)".
{
background-image:url(../images/body-background.png);
font-size: 20px;
padding:14px;
}
You should define shared rules in one ruleset, that is what the cascade (the
C in CSS) is for, and it is better backwards compatible in this case, too:

body {
background-image:url(../images/body-background.png);
padding:14px;}
body:lang(en) {
font-size: 11px;
}
body:lang(zh) {
font-size: 20px;
}
The difference is the font-size , i want the default font-size of
Chinese is bigger than English.


Why do you want to torture English readers wih an unreadable small
font-size?

I don't have much experience with CJK scripts, but I understand they have to
be bigger than Latin, Cyrillic or Greek ones to be readable. However, is
mixed text (Latin + Chinese glyphs) readable with browser defaults, i.e.
without any CSS? Because then, relative font-sizes would be---like most of
the time---the better solution. It probably would even be, if Chinese text
really had to be bigger than Latin:

body:lang(en) {font-size: 100%;}
body:lang(zh) {font-size: 180%;}

As said 'lang()' isn't well supported, so you are probably better off with
separate stylesheets depending on the (main) language of a file:

foo.en.html:
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="en.css">
foo.zh.html:
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="zh.css">

or just

foo.en.html:
<link rel="stylesheet" type="text/css" href="en.css">
foo.zh.html:
<link rel="stylesheet" type="text/css" href="zh.css">

with the common rulesets repeated in both CSS files.

--
"Computers are useless. They can only give you answers."
Pablo Picasso
Jul 20 '05 #2

P: n/a
On Tue, 17 Feb 2004, Lian Liming wrote:
The language in my web site may be Simplified Chinese or English. I want
to define different styles for each language.
Language markup is not a question of style. Mark all your text with the
LANG attribute. For example:
<html lang="en">
...
<p lang="zh"> ... <span lang="en"> ...

This has the advantage that Mozilla/Netscape will take the reader's
preferred typefaces for "Western" and "Chinese".
You might write "zh-CN" or "zh-..." instead of generic "zh".
My css code is
font-size: 11px;
font-size: 20px;
Please do not specify absolute font sizes (whether pixels or points).
Leave this choice to the reader!
The difference is the font-size , i want the default font-size of
Chinese is bigger than English.


Put all Chinese characters into <big> </big>. I do the same for Arabic
and think it is better readable with current typefaces. You might
additionally specify the font size of <big> *in percent* via CSS.

Jul 20 '05 #3

P: n/a
DU
Lian Liming wrote:
Hi,

The language in my web site may be Simplified Chinese or English. I want
to define different styles for each language.
For each language, the http header is different.
<meta name="language" content="en" /> means the language is english
<meta name="language" content="zh" /> means the language is
Simplified Chinese.
Then I use a css selector to define different style for each language.
My css code is

body:
lang(en)
{
background-image:url(../images/body-background.png);
font-size: 11px;
padding:14px;
}
lang(zh)
{
background-image:url(../images/body-background.png);
font-size: 20px;
padding:14px;
}

The difference is the font-size , i want the default font-size of
Chinese is bigger than English. But it doesn't work, no matter the
language is "en" or "zh", the font-size is alwayw be 11px.
Can anyone tell me what's wrong with my code?

Thanks in advance!

I replied 4 posts to your thread "what is the recommended "lang" for
Chinese simplified?" in comp.infosystems.www.authoring.html newsgroup,
including this chunk:
{
If you really need to specify a font-size for some Chinese-lang-defined
elements, then use the attribute selector instead of the :lang
pseudo-class: :lang as a pseudo-class is not much supported, even among
recent browsers.

E.g.:
p[lang="zh"] {font-size:120%;}
will be much more supported than
p:lang(zh) {font-size:120%;}

This testpage on lang as a selector (not as a pseudo-class)

http://www.editions-eyrolles.com/css...s/select10.htm

works in Mozilla 1.7a and in Opera 7.50 PR1
}

DU
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.