If you've ever worked on or constructed a multi-lingual website you will recognize there space a million and also one things to store in mind. Sorting out domain names, internet server configuration, URL structure, web page layout and the translate in of contents are most likely to it is in high on her 'to do' list.

You are watching: How do you serve a page with content in multiple languages?

With every that keeping you busy, conference the accessibility requirements for her website may slip to the bottom the the pile. This shouldn't it is in the case as making her multi-lingual website easily accessible is basic to achieve.

What is a multi-lingual website?

A multi-lingual website is a website wherein the contents is written in an ext than one language. The information presented in different languages is regularly the same, however maybe tailored for various audiences. Booking.com is an instance of a multi-lingual website as its contents is accessible in 35 different languages.


Booking.com homepage shown in English (left) and also Portuguese (right)

1: Language Codes

The first thing to acquire right when working through multiple language on a website is making sure the language is determined in the code of the page. The internet Content ease of access Guidelines require under success standard 3.1.1 Language of web page that:

The default human language of each web page have the right to be programmatically determined.

Assistive innovations such as display screen readers and also Braille tools can not immediately identify the language being offered on a website from the text alone. The language need to be determined in the code of the page in order for assistive modern technologies to translate it correctly. As soon as recognized, these innovations can immediately switch to that language, adjusting the accent, pitch and also speaking rate of the content depending upon the language in question. Modern-day screen readers such together Jaws and home window Eyes are able to speak multiple languages in suitable accents with suitable pronunciation.

Setting the main language

First of all you will need to choose the main language for your pages. This is the language the bulk of your content is composed in. For example if your page is predominantly written in English then your main language must be set as English.

Once the primary language of her pages has actually been chosen, friend will require to uncover the language code which synchronizes to that language. Language codes usually consist of 2 letters, yet four letter codes can be provided for further specifying the language into various dialects.

A 2 letter language password 'en' could be supplied to specify 'English', vice versa, the four letter language code 'en-GB' could be supplied to distinguish British English indigenous American English 'en-US'. Please keep in mind 'en-UK' is not a valid 4 letter language code. Following we need to use the language password to ours page.

To set the major language that our web page as English we use the 'lang' attribute together with our 'en' language code and also apply this to the HTML element at the beginning of every page.

If you are using XHTML, girlfriend will must apply an additional attribute to set the language provided in an XML document. The 'xml:lang' attribute serves the same function as the 'lang' attribute and should usage the very same language code. Her pages will not pass the W3C HTML validation examine without this attribute.

For a multi-lingual website consists of English, French and German pages, the major language have to be reset for each language.


Using the wrong language code

If friend don't administer a major language code or set the code mistakenly it may be impossible for someone using a display screen reader or Braille machine to know the content. If the primary language that the net page has not to be identified, display screen reading software in general will review out the content in the same language together the default setup for the display reader.

So if your display reader has actually English set as the default language, the will read out internet page content in English. This isn’t too lot of a problem if girlfriend are only viewing net pages written in English.

However if the page provides the wrong language code, for circumstances if the contents is composed in English, but identified in the password as French the display reader will attempt to speak the English content using a French accent and pronunciation. Because that those of you familiar with 'Allo Allo', her website might end up sound something choose Officer Crabtree, below. While amusing, this might not be really easy come understand.


2: many Languages

The bulk of web pages use a single language in ~ a time, yet there possibly occasions once you want to include a language various other than the major one on your pages. If this is the case, the web Content availability Guidelines success criterion 3.1.2 Language of parts requires that:

The person language of each passage or phrase in the content deserve to be programmatically established except for suitable names, technical terms, indigenous of indeterminate language, and words or phrases that have actually become part of the vernacular of the immediately surrounding text.

If you wanted to include a i in French on your web page you would have to use the 'lang' attribute to note the readjust in language. The 'lang' attribute can be used with almost every HTML element, making it really easy to readjust languages within a page. To incorporate a French quotation on one English web page you would certainly simply include the lang attribute come the blockquote tag:

Le plus grand faible des hommes, c"est l"amour qu"ils ont de la vie.


If friend are creating a multi-lingual website you may also need to administer links to the various other language version of her site. If the web page you are linking come is created in a different language come the existing page, you should let civilization using assistive innovations know around this. This have the right to be done by making use of the 'hreflang' attribute.

The 'hreflang' attribute permits you to inform world the major language of the page discovered when following the attach is various to the existing page. For instance to connect to a web page written in French indigenous a page written in English, you would use:

FrenchIf you require to identify both the message of the link, and also the web links target as different languages you must use both the 'lang' and 'hreflang' attributes:

FrancaisPlease note the 'hreflang' attribute must only be provided for links.

3: Google and also language recognition

Unlike assistive innovations such as screen readers, Google does not recognise language identifiers such as 'lang' characteristics in the code of the page. Google tries to job-related out the key languages of her pages itself. In stimulate to make language identification easier for Google, Google recommends only using one language every page.


4: Language direction

If you are producing a multi-lingual website i beg your pardon caters because that languages created from right-to -left quite than left-to-right, girlfriend will need to make sure the direction of message is specified correctly in the code of the page. You can collection the direction of message by using the 'dir' attribute ~ above the HTML element. For languages such as Arabic, Persian and Urdu the 'dir' attribute have to be collection to be collection to rtl (right-to-left):

A 'dir' attribute is not needed for pages written using left-to-right language such as English as this is the default direction the text. Different page layouts room often forced for right-to-left languages, as most right-to-left languages should be right aligned quite than left aligned.

This means the page layout will must be adapted for these languages, basically mirroring the layout of the left to appropriate language pages. For instance the United countries website adapts its layout for the Arabic language which is written from right-to-left. The totality layout the the page is reversed when contrasted to the English language version.These types of layout alters can be completed using CSS.


The layout of the United countries pages readjust depending ~ above the language used

5: character encoding

A personality encoding is basically a vital to decipher one encrypted repertoire of letters and also symbols provided in a writing system. There are numerous different types of personality encodings for this reason it's really important to make sure you use the best character encoding otherwise human being may not be able to read the text on her pages.

Character encoding likewise helps computer systems understand your information, if you usage the wrong encoding her pages may not be uncovered by part search engines. The most widely provided character encoding is 'Unicode'. 'Unicode' contains characters for most languages and also scripts in the world and also is supported on a huge number of operating systems.

This means Unicode can screen multiple languages and also scripts within a page, which provides it wonderful choice to usage for multi-lingual websites. Come specify Unicode for pages created in HTML 4 placed the adhering to line in the head of your pages:

For HTML 5 use:

Please view 'Declaring personality encoding in HTML' for more information about character encoding.

6: Font sizes

When developing your multi-lingual website, that is vital to realise that the font size you decided for her default language might not be an ideal for every languages. Different languages such as Chinese, Japanese and Arabic might be an overwhelming to read at font sizes the are an ideal for English, French and German languages. For internet pages displaying Chinese, Japanese or Arabic language the default font size will have to be boosted so the text is legible ~ above screen.

There space two ways this deserve to be achieved. The very first uses the CSS 'lang' pseudo class to collection different font sizes and also font families relying on the worth of the 'lang' attribute: HTML

or CSS

:lang(en) font-size: 85%;

font-family: arial, verdana, sans-serif;


font-size: 125%;

font-family: helvetica, verdana, sans-serif;

This method is sustained in Firefox, Opera and Internet traveler 8 and also higher. Chrome and Safari carry out not support this pseudo class. If you want to support web-kit browsers and earlier execution of Internet traveler as well, the 2nd option would certainly be to usage classes on the body facet for each language required: HTML

or CSS

.english font-size: 85%;

font-family: arial, verdana, sans-serif;


font-size: 125%;

font-family: helvetica, verdana, sans-serif;

7: size of words

The length of words varies from language come language. Content composed in one language may take up an ext or less an are on the web page than an additional language. The style of the website should cater for various length words provided through the site. Acquisition Amazon as an example, the length of content in the search bar that the website varies in between languages. The word 'search' takes increase 10 characters in French however only two characters in Japanese. The word 'basket' takes increase 6 characters in English yet when translated to German takes increase a enormous 13 characters. Amazon have adapted the design of this area of your pages, removed the wish list button from the search bar for those language which use longer words such as German and Italian.


Depending top top the content on your multi-lingual website, it might not be feasible to adjust the layout and design of your site in this way. You can overcome these varieties of troubles by using much shorter words come fit in to the an are available on her page and making certain you have actually your content translated prior to making essential design decisions.

See more: H I Drop Bombs Like Hiroshima

medtox.org is one award-winning UX design firm with offices in Bristol, London and also Amsterdam.If you would prefer to find out an ext about theweb access serviceswe offer, provide us a call on 01179 297 333 or send us a message and we'll get ago to you.