473,786 Members | 2,404 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Language selector problem in CSS

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
3 6619
*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.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
Jul 20 '05 #2
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
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.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)

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2329
by: Richard Barnet | last post by:
Dear CSS gurus, My question regarding 'the cascade' is a simple one, but one that I haven't heard anyone talk about before: When cascading (for instance, when applying two linked stylesheets), does the whole selector definition supercede and replace a previous one, or does it go through the selector definition line by line (rule by rule) and only supercede rules and attributes that are previously defined?
4
2797
by: Zane | last post by:
Hi, I am having some grieve with the following part of my CSS, basically when using a composite selector using an ID as the first element the it doesn't display the expected results. Am I doing something incorrect? For example my CSS goes something like this: #leftnavbar a:link { color: #333; text-decoration: none; }
2
2150
by: Chris Sharman | last post by:
See http://services.ccagroup.co.uk/testform.htm Looks as intended in firefox, is valid (bulk of inputs centred in a div occupying the left half of the page). ie ignores the child selector, positioning everything aligned left. I'm familiar with http://w3development.de/css/hide_css_from_browsers/ I thought the ie child selector bug only occurred where there were no spaces (parent>child) - I'd thought it worked when there were (parent >
37
4203
by: Jan Wagner | last post by:
Hi, can't figure this one out, what's the CSS way to specify the language? In HTML it would be simply an lang="xx" attribute, or XHTML xml:lang="xx", but, how about in CSS? This would be required for a screen reader (text to speech) for accessibility, to help the reader software use the correct presentation method (e.g. correct language module).
8
2338
by: sajid | last post by:
The CSS 2.1 Specification describes how to sort a list of selectors in order of specificity, but it doesn't provide a method to calculate the specificity of a single selector in isolation. I've devised a method to do this, which I describe in the following article: http://calculating-css-selector-specificity.blogspot.com/ Comments and/or criticisms welcome.
3
1938
by: JakDaniel | last post by:
is it possible, create a selector as alias of another selector... (maybe) in another stylesheet file? ex: html page .... <link rel="stylesheet" type="text/css" href="style1.css" /> <link rel="stylesheet" type="text/css" href="style2.css" /> ....
6
7197
by: _googlepost | last post by:
I have some CSS that goes something like this: table.TableStyle {font-family: "Helvetica", "Ariel"; background- color:white; border-collapse:collapse;} table.TableStyle COLGROUP { background- color:lavender;} The second line is a style that is applied to a particular named COLGROUP element in tables assigned the TableStyle class. Unfortunately, while this works in most modern browsers (including
9
9835
by: aleplgr | last post by:
Hi! I'm trying to let the end-user select the language of the menues I'm showing him. To do that I've got this Selector class that shows the end user a combo box, a label and a button. In the combo box the user selects the language (English,Spanish,French,..) and when he clicks in the button shows the label in the language selected. This works fine but it's just one form, I need to change the language of all the menues in an application, so...
4
4626
elamberdor
by: elamberdor | last post by:
Hi All! I have a working dropdown language selector powered by google that loads the page in your chosen langauge: <p align="center"><font size="2">Translate&nbsp; : <SCRIPT language=javascript1.2 type=text/javascript>document.write(' <select name="to_lang" onchange="lp=this.options.value; if(lp!=\'\') window.location=\'http://www.google.com/translate?hl=en&ie=UTF-8&oe=UTF-8&u=http://WWW.WEBSITE.COM/PAGE.ASP</select> From here,...
0
9647
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10360
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9960
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8988
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6744
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5532
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4064
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3668
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2894
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.