Language selector problem in CSS

**Christoph Paeper** · Jul 20 '05, 09:45 PM

Re: Language selector problem in CSS

*Lian Liming*:[color=blue]
>
> The language in my web site may be Simplified Chinese or English.[/color]

Both in one file or in separate files?
[color=blue]
> I want to define different styles for each language.
> For each language, the http header is different.[/color]

That would be the 'Content-Language' header, the counterpart of the
'Accept-Language' one sometimes sent by the client.
[color=blue]
> <meta name="language" content="en" /> means the language is english
> <meta name="language" content="zh" /> means the language is
> Simplified Chinese.[/color]

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.
[color=blue]
> Then I use a css selector to define different style for each language.[/color]

That is possible in principle, but I don't know of any implementation of the
':lang()' selector.
[color=blue]
> body:lang(en)
> {
> background-image:url(../images/body-background.png) ;
> font-size: 11px;
> padding:14px;
> }
> lang(zh)[/color]

That would be "body:lang(zh)" .
[color=blue]
> {
> background-image:url(../images/body-background.png) ;
> font-size: 20px;
> padding:14px;
> }[/color]

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;
}
[color=blue]
> The difference is the font-size , i want the default font-size of
> Chinese is bigger than English.[/color]

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.cs s">
<link rel="stylesheet " type="text/css" href="en.css">
foo.zh.html:
<link rel="stylesheet " type="text/css" href="common.cs s">
<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** · Jul 20 '05, 09:45 PM

Re: Language selector problem in CSS

On Tue, 17 Feb 2004, Lian Liming wrote:
[color=blue]
> The language in my web site may be Simplified Chinese or English. I want
> to define different styles for each language.[/color]

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".
[color=blue]
> My css code is
> font-size: 11px;
> font-size: 20px;[/color]

Please do not specify absolute font sizes (whether pixels or points).
Leave this choice to the reader!
[color=blue]
> The difference is the font-size , i want the default font-size of
> Chinese is bigger than English.[/color]

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.

DU · Jul 20 '05, 09:45 PM

Re: Language selector problem in CSS

Lian Liming wrote:
[color=blue]
> 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!
>[/color]

I replied 4 posts to your thread "what is the recommended "lang" for
Chinese simplified?" in comp.infosystem s.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)

Welcome!

http://www.editions-eyrolles.com/css2/tests/selecteurs/select10.htm

works in Mozilla 1.7a and in Opera 7.50 PR1
}

DU

Language selector problem in CSS

Language selector problem in CSS

Comment

Comment

Comment