Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

complete css guide

Language selectors

Browser support

Get browser support information for langauge selectors in the downloadable version of this guide or our browser support tables.

Explanation

In HTML, the human language that an element is expressed in can be encoded in the web page. With CSS you can select elements on the basis of their human language encoding.

To specify the language of an element in HTML 4.0, you use the lang attribute in the following way. If a paragraph is in a particular language, this is encoded as <p lang="language code"> where language code is usually a two character standard code for common languages. For example, French has the language code "fr", while Chinese the code "zh". The above examples would be <p lang="fr"> and <p lang="zh">, for French and Chinese respectively. See the HTML 4 specification for more about the various language codes.

The language pseudo class selector allows developers to select elements encoded in a particular language.

Syntax

To select a particular element based on its language encoding, simply add :lang(language code) to the selector for the element. For example, to select quotes in French, we have the selector q:lang(fr).

Use

Different languages have different formatting conventions, for cues such as use of italics and bold, indenting, quotation marks and so on. This selector allows one style sheet to describe how elements should appear in different languages. This way, a single style sheet could easily be shared by a multi-lingual organization or company.

Web Directions Conference