Meta:Language select

The JavaScript implementation of this proposal is now live. Please give comments, especially on the widget UI. — Ambush Commander ^(Talk) 04:16, 10 June 2006 (UTC) [reply ]

Language select allows users to hide foreign languages on multilingual pages. This would, for example, allow a French reader to see only French text on multilingual pages (though they would still see Spanish on a Spanish-only page).

At right are two screenshots of Template:Stub without and with a language selection of English and French. The extra space in the localised template exists because it was designed with a large body of text in mind. This could easily be fixed with minor changes to the template.

There are currently two implementations of this feature, both of which are working. One of them, implemented with JavaScript, will automatically detect the language of your browser and hide foreign languages accordingly (you can also configure it to ignore the browser setting). The other uses user CSS in order to create the effect (it gives you the ability to display multiple languages, a limitation to the JavaScript implementation, at the cost of greater difficulty changing languages).

A multilingual page is contained by the CSS class "multilingual", with text in every language contained within the class "lang-en", where en is a lowercase ISO 639 two-letter language code and the lang attribute. If there is no two-letter code, the lowercase three-letter code is used. If you're translating existing messages and don't know what the language is, use the code "und".

This is an example hypothetical page in English, Old English, French, and Latin:

<div class="multilingual">
<div class="lang-en" lang="en">This text is English.</div>
<div class="lang-ang" lang="ang">Þis wordu is Englisc.</div>
<div class="lang-fr" lang="fr">Ce texte est Français.</div>
<div class="lang-la" lang="la">Haec verba latina sunt.</div>
</div>

While the lang attribute, contextually, is more correct, the CSS required to hook into it is not supported by all browsers, so the class provides a fallback method.

Actually valid transitional XHTML requires xml:lang="xx" lang="xx", but on projects like Meta tidy inserts a missing corresponding xml:lang automatically. The W3C validator is too limited to identify such minor issues, however smarter XHTML validators do exist.

Of course any block level element, not only <div>, can be used to introduce a new language code, contained elements inherit the language. ^[unclear] In fact it also works with inline elements like <span>. ^[unclear]

Note that language attributes also affect attribute values in the same tag, e.g. <table xml:lang="de" lang="de" summary="Deutsches Gebrabbel">, or the same idea for attributes like title. This has no effect for Language select, if an element is hidden attributes in its starting tag are also invisible.

Templates that implement language selection will include a non-included notice linking back to this language page. In the future, multilingual pages may also have an icon linking to a language select help page.

• Zscout370 proposal
  Zscout370 proposal
• Pathoschild proposal 1
  Pathoschild proposal 1
• Pathoschild proposal 2
  Pathoschild proposal 2
• "Globe of letters" proposal
  "Globe of letters" proposal
• Visible with any browser
  Visible with any browser

See multilingualism in effect right here. If JavaScript is disabled, you will have to enable it in order to see the effect. The JavaScript degrades gracefully, so if language selection is disabled, all of the text will be displayed.

You can view the JavaScript code at MediaWiki:Monobook.js.

Template {{ls}} is designed to simplify implementing language select, for example:

{{ls|en|This text is English.}}

is equivalent to

<div class="lang-en" lang="en">'''English:''' This text is English.</div>

and expands into

This implementation will collide with the JavaScript, so you must turn the language select JavaScript off by adding ls_enable = false; to [[User:Example/monobook.js]].

By adding two lines of code to your user stylesheet (usually in the form of [[User:Example/monobook.css]]), the user will see the English and French text only.

.multilingual { display:none; }
.multilingual .lang-en, .multilingual .lang-fr { display:block; }

A user using this CSS would see only the following:

This text is English.

Ce texte est Français.

If you are using a browser with good support for CSS (such as Mozilla Firefox) you should use this CSS, which is more correct and emulates the JavaScript behavior more closely.

.multilingual *[lang] {display:none;}
.multilingual *[lang|=en], .multilingual *[lang|=fr] {display:inline;}

These pages currently have language selection enabled.

• Template:Stub - template content
• Meta:Babel - introduction
• User:Redux/Welcome - content
• Template:TR-side - Translation requests synopsis
• Template:TOTW-side

You may use this template to mark pages multilingual: {{multilingual}}.

• List of ISO 639 codes
• List of codes supported by {{ #language: }}

• Pages with broken file links