a rough qa

Hi all,

firstly my apologies to everyone for the tardiness of the q and a, been 
swamped lately. So, unfortunately, here is a last minute draft. I don't 
have the templates on this computer so just sending it on as text. Will 
have a power nap before the teleconfernece in four hours.

Andrew

===================

Question

How do I apply different styles using CSS for different languages in a 
multilingual document?


Answer:

Although CSS2 provides langauge specific selectors, these selectors are 
not widely supported by web browsers. It is neccessary to use more 
generic CSS selectors for applying different styles for differnet 
languages within a XHTML/HTML document.

The most efficient method is to use a CSS class or id selector. For 
example, the sentence "The Nuer language is Thok Nath" could be marked 
up as:

<p>The Nuer language is <span lang="ssa" xml:lang="ssa" 
class="nuer">Thok Nath</span></p>

And a class .nuer could be defined in the stylesheet as

.nuer {font-style: italic; font-weight: bold;} or alternatively, as

span.nuer {font-style: italic; font-weight: bold;}


Background:

For those interested, CSS2 provides the language psuedo-class selector 
:lang() and language attribute selectors to allow XHTML/HTML document 
authors to specify rules for langauge specific  presentation..

The :lang() psuedo-class selector allows authors to specify rules that 
match languages. I could markup the sentence "The Nuer refer to 
themselves as Naath" as

<p xml:lang="en-AU" lang="en-AU">The Nuer refer to themselves as <span 
xml:lang="ssa" lang="ssa">Naath</span></p>

In order to display the English text in blue and the Nuer text in green, 
the following rules could be used:

:lang(en-AU) {color: blue;}
:lang(ssa) {color: green;}

The selector :lang(en-AU) will only match elements that have a language 
value of  “en-AU” or have inherited that langauge value. If the css rule 
specified :lang(en-US), the rule would not match our sample paragraph.

Alternatively, we could make the language designation more general and 
use the following rules:

:lang(en) {color: blue;}
:lang(ssa) {color: green;}

The rule for :lang(en) would math elements with a language value of 
“en”. It would also amtch more specific langauge specifications such as 
en-US and en-NZ.

The second method of specifying rules is to use attribute selectors. If 
I markup “Yeŋö loi rot Aboja” as

<p xml:lang="din" lang="din">Yeŋö loi rot Aboja</p>

I could write a rule matching the langauge attribute.

*[lang="din"] {font-style: italic; color: green;} This rule will match 
all elements that have a langauge attribute equal to “din”.

If the XHTML/HTML markup was

<div xml:lang="en" lang="en">
<p>The first line was <span xml:lang="din" lang="din">Yeŋö loi rot 
Aboja</span></p>
</div>

and I had two rules

p[lang="en"] {color: blue;}
*[lang="din"] {font-style: italic; color: green;}

Only the second rule would match. The paragraph has no language 
attribute to match.

There is a significant difference between [lang="en"] and [lang|="en"]. 
The first language selector will only match elements with an langauge 
attribute equal to “en”, while the second selector will match any 
element with a langauge attribute starting with “en”. Therefore the 
second selector would match “en-US”, ”en-HK” or ”en-CA”.

It is important to note that not all web browsers can use langauge 
selectors and it is best to use more generic selectors in your CSS rules.

By the way

I have used the ISO-639-2 language code ssa for Nuer. Nuer doesn't have 
a unique ISO-639-2 language code. This is teh code for a group of 
languages: Nilo-Saharan (Other). Seven Nilo-Saharan languages have 
unique ISO-639-2 codes, while approximately 178 languages share the 
generic ssa langauge code. The Ethnologue lists the languages at 
http://www.ethnologue.com/show_iso639.asp?code=ssa.

Useful links
The language pseudo-class: :lang
http://www.w3.org/TR/REC-CSS2/selector.html#lang

Attribute selectors
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

Class selectors
http://www.w3.org/TR/REC-CSS2/selector.html#class-html

ID selectors
http://www.w3.org/TR/REC-CSS2/selector.html#id-selectors

Received on Wednesday, 30 July 2003 11:10:18 UTC