Using Links to Translated Pages or Sites

To help, here are some brief suggestions, based on the assumptions that you are linking to translations (rather than different country sites), and have enough space on the user interface to list all alternatives.

(Disclaimer: These are quickly written stream-of-consciousness notes that haven't been reviewed.)

- use utf-8 as the page encoding if you can - use the name of the target language in the native language and script as the link, eg. 'French' would be written 'français' (note, beware of different capitalisation conventions) - use a graphic if you are concerned about users not having the appropriate font/rendering capability for the language you are showing (note that these will never be translated, so the usual translatability issue about text in graphics is mute) (note also that the person who speaks the language linked to will usually have the necessary fonts etc., so this is more of a cosmetic issue)(Of course, it is slightly more time consuming to change graphics if your styling is changed.) - if you are not using utf-8 or another Unicode encoding you may need to use a graphic or numeric character references - put the links near the top of the page (and ideally to the right side, if the design allows). At least make them above the fold. - don't forget to post visible links to all language versions on all pages that have translations - since you are using text in another language, identify the language using lang/xml:lang attributes - add title and alt text *in the language of the current page* that explains that this is a link to a translated version of the page. It is likely that the language name alone is sufficient here (see the example below) - this certainly helps when adding new translations to the list, since you can look up the appropriate text rather than having to ask all the translators for additional translations of language names). - note that lang/xml:lang values reflect the language of attribute text as well as element content. For this reason you may need to nest elements as in the example below.
- consider specifying styling for the foreign text - especially if this is Chinese, Japanese or Korean, where fonts may be automatically applied by the user agent (see http://www.w3.org/International/tests/results/lang-and-cjk-font ). For info on how to apply the style see http://www.w3.org/International/questions/qa-css-lang .

EXAMPLE

Here is an example of an English document that points to romanian and swedish translations using text:

>

<a href="/International/articles/serving-xhtml/Overview.ro.html" xml:lang="ro" lang="ro">Română</a> <a href="/International/articles/serving-xhtml/Overview.sv.html" xml:lang="sv" lang="sv">svenska</a>

Note that the span is added to support the title information, since that is in English. (The <html> tag declares the context to be English.)

Here is an example using graphics:

>

<a href="/International/articles/serving-xhtml/Overview.ro.html"><img src="romanian.gif" alt="Romanian" title="Romanian"/></a> <a href="/International/articles/serving-xhtml/Overview.sv.html"><img src="swedish.gif" alt="Swedish" title="Swedish"/></a>

SHOULD I USE HREFLANG?

You could, but it doesn't really seem to have any effect here (unlike in the <link> element). There are also some potential issues you should consider. See http://www.w3.org/International/geo/html-tech/tech-lang.html#ri20050128.152033553

Also, it should be redundant because you should ensure that you declare the language of the target page in its <html> tag anyway !

OTHER IDEAS (SOME FROM WSG FOLK)

- if using graphics, you could use a roll-over mechanism to reveal the name of the language of the target page in the language of the current page (rather than just the title and alt attributes).

- I'm not convinced an automated gif is a good idea - especially if you have several going at the same time (too much like blink text).

- It is also possible to include the name of the language of the target page in parentheses in the language of the current page - an example makes this clear, on an English page you might have: français (French). This uses up a lot of space, however, and it could be argued that it is unnecessary.