*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
