See the html page.

// Internationalization or Localization:

If we are developing a web application using an MVC framework, we should follow
instruction provided that MVC framework.  This may involve creating language
files or message bundles.  If we are creating static pages, we may need to 
create one page for each language, for example home.fr.html.  We will need to
specify the lang attribute, and the dir attribute on the html element:

<html lang="en">

We will also need to set the character set to UTF-8 using a meta tag:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

For HTML 5 use:

<meta charset="UTF-8">

Assistive technologies such as screen readers and Braille devices can not 
automatically identify the language being used on a website from the text alone.  
The language must be identified in the code of the page in order for assistive 
technologies to interpret it correctly.

Language codes usually consist of two letters, however four letter codes can be 
used for further defining the language into different dialects. A two letter 
language code 'en' could be used to define 'English', whereas the four letter 
language code 'en-GB' could be used to distinguish British English from American 
English 'en-US'. Please note 'en-UK' is not a valid four letter language code. 

If you are using XHTML, you will need to apply an additional attribute to set 
the language used in an XML document. The 'xml:lang' attribute serves the same 
purpose as the 'lang' attribute and should use the same language code. Your 
pages will not pass the W3C HTML validation check without this attribute.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

If you wanted to include a passage in French on your page you would need to use 
the 'lang' attribute to mark the change in language. The 'lang' attribute can be 
used with almost every HTML element, making it very easy to change languages 
within a page. To include a French quotation on an English page you would simply 
add the lang attribute to the blockquote tag:

<blockquote lang=”fr”>
  <p>Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

If you are creating a multi-lingual website you may also need to provide links 
to the other language versions of your site. If the page you are linking to is 
written in a different language to the current page, you need to let people 
using assistive technologies know about this. This can be done by using the 
'hreflang' attribute. The 'hreflang' attribute allows you to inform people the 
primary language of the page found when following the link is different to the 
current page. For example to link to a page written in French from a page 
written in English, you would use:

<a href="" hreflang="fr">French</a>

If you need to identify both the text of the link, and the links target as 
different languages you need to use both the 'lang' and 'hreflang' attributes:

<a href="" lang="fr" hreflang="fr">Francais</a>

The 'hreflang' attribute should only be used for links.  If you are creating a 
multi-lingual website which caters for languages written from right-to -left 
rather than left-to-right, you will need to make sure the direction of text is 
specified correctly in the code of the page. You can set the direction of text 
by using the 'dir' attribute on the HTML element. For languages such as Arabic, 
Persian and Urdu the 'dir' attribute should be set to be set to rtl (right-to-

<html dir="rtl">

A 'dir' attribute is not needed for pages written using left-to-right languages 
such as English as this is the default direction of text. Different page layouts 
are often required for right-to-left languages, as most right-to-left languages 
should be right aligned rather than left aligned. This means the page layout 
will need to be adapted for these languages, essentially mirroring the layout 
of the left to right language pages. For example the United Nations website 
adapts its layout for the Arabic language which is written from right-to-left. 
The whole layout of the page is reversed when compared to the English language 
version.These types of layout changes can be achieved using CSS.

A character encoding is essentially a key to decipher an encrypted collection 
of letters and symbols used in a writing system. There are many different types 
of character encodings so it's really important to make sure you use the right 
character encoding otherwise people may not be able to read the text on your 
pages. Character encoding also helps computers understand your information, if 
you use the wrong encoding your pages may not be found by some search engines. 
The most widely used character encoding is 'Unicode'. 'Unicode' contains 
characters for most languages and scripts in the world and is supported on a 
large number of operating systems. This means Unicode can display multiple 
languages and scripts within a page, which makes it an excellent choice to use 
for multi-lingual websites. To specify Unicode for pages written in HTML 4 put 
the following line in the head of your pages:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

For HTML 5 use:

<meta charset="UTF-8">

When designing your multi-lingual website, it is important to realise that the 
font size you chose for your default language may not be suitable for all 
languages. Different languages such as Chinese, Japanese and Arabic might be 
difficult to read at font sizes that are suitable for English, French and German 
languages. For web pages displaying Chinese, Japanese or Arabic languages the 
default font size will need to be increased so the text is legible on screen. 
There are two ways this can be achieved. The first uses the CSS 'lang' pseudo 
class to set different font sizes and font families depending on the value of 
the 'lang' attribute: HTML

<html lang="en"> or <html lang="zh">

:lang(en) {
  font-size: 85%;
  font-family: arial, verdana, sans-serif;

:lang(zh) {
  font-size: 125%;
  font-family: helvetica, verdana, sans-serif;

This technique is supported in Firefox, Opera and Internet Explorer 8 and higher. 
Chrome and Safari do not support this pseudo class. If you want to support 
web-kit browsers and earlier versions of Internet Explorer as well, the second 
option would be to use classes on the body element for each language required: 

<body class="english"> or <body class="chinese"> 

.english {
  font-size: 85%;
  font-family: arial, verdana, sans-serif;

.chinese {
  font-size: 125%;
  font-family: helvetica, verdana, sans-serif;

jQuery has the globalize plugin which may help with some of the challenges.
Look at other links on the i18n page as well.







Pootle a web server for localisation that allows web-based contributions and management. Combined with the Translate Toolkit it allows Mozilla products to be localised online. Virtaal is an off-line editor developed by the Pootle team.

If we have a string stored in the database, how can we localize it?

Take the string out of the database, give it a name, store the name in the database.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License