Stylesheets - Language selector problem in CSS

Author

Language selector problem in CSS

Lian Liming

2004-02-17, 4:28 am

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!

Christoph Paeper

2004-02-17, 6:29 am

*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

Andreas Prilop

2004-02-17, 12:29 pm

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.

2004-02-17, 5:29 pm

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/cs...rs/select10.htm

works in Mozilla 1.7a and in Opera 7.50 PR1
}

DU