Open Road

The W3C website has an article on using CSS 2.1 selectors to apply language specific styling based on the language of an element. This is quite an effective tool for developing websites with multilingual content.

The key drawback to using language specific styling is Internet Explorer’s limited support for CSS 2.1 selectors. Although there are strategies to address Internet Explorer’s deficiencies.

Vicnet’s internal projects may involve one language, five languages or seventy languages. Language specific styling is a useful way to address a range of design issues within websites with multilingual content. this article will provide a brief look at the some of the strategies and techniques we use within our projects.

The W3C article identifies four approaches to handling language specific styling:

1. the :lang() pseudo-class selector
2. a [lang |= "..."] attribute selector that matches the beginning of the value of a language attribute
3. a [lang = "..."] attribute selector that exactly matches the value of a language attribute
4. a generic class or id selector

Strategy one

In some of our older internal projects, we’ve used a mix of the first and fourth approaches. All language content is marked up appropriately. The stylesheets contain rules for the various languages using the :lang() pseudo-class selector. This provides excellent results for Firefox and Opera.

For Internet Explorer we rely on the default style of the website coupled with the internal font linking mechanisms in Internet Explorer and in Windows font rendering system. This approach will work for the major languages supported by Microsoft but will fail for minority and lesser used languages that are not supported by Microsoft.

For such languages we use class selectors. The rules for these class selectors which contain the same sets of rules the corresponding language pseudo selector uses.

For instance, Greek text may be wrapped in a div element which identifies the language of the content:

Whereas for a language like Nuer, which isn’t supported by fonts shipped in Windows 2000 or XP, we would use:

The stylesheet rules specifying the fonts would be:

Although the class would be redundant for Firefox and Opera.

Strategy two

An alternative strategy is to use javascript to approximate language selector support in Internet Explorer. /IE7/ is a javascript library that will allow Internet Explorer to render CSS selector rules that are unsupported by Internet Explorer.

This would reduce the Nuer example to:

There is no need for the additional class attribute. This results in minimal code and lays the groundwork for a flexible approach to multilingual web typography.

Multilingual styling

The greatest challenge is developing the language specific CSS rules to enhance multilingual web typography. The most obvious use of language specific CSS rules is to control font related rules including font family, weight, style, size and leading (line height). Numerous people have also discussed language specific styling to achieve appropriate automatic use of quotation marks based on the conventions of each language.

There are also other aspects of web typography that should be addressed. The default styles applied to various HTML elements are not universal across all writing scripts and it is necessary to change these styles based on the language and writing script of the text.

Some of the elements that need to be evaluated on a language per language basis are:

• ol and ul. CSS1, CSS 2.1 and the proposed CSS 3 have different sets of language/script specific ordered lists. Where possible use an appropriate list style type.
• cite. The default rendering is to display the contents of the cite element using an italic typeface. Not all scripts use or possess italic faces. Appropriate typographic conventions for the current language should be used.
• em and strong. em by default is rendered using an italic typeface, while strong uses a bold typeface. Some of the scripts may not have italic versions of a typeface. Additionally, in some contexts, using bold amke make text more difficult to read, e.g. traditional Chinese characters at a small size.
• a. The default underlining of hypertext links may impact on legibility of some languages.
• pre, tt, textarea, input[type=”textarea”], option. These elements are by default rendered using a monospaced or fixed-width font. It is best to specify the fonts you want to use in forms. Not all scripts contain monospaced fonts.

It is important to also take into account nested typography, where one language is embedded in another.