org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-E3EA4F85-E0AE-42AB-8E51-EFD3F0E0A51E.html
author Eugene Ostroukhov <eugeneo@symbian.org>
Wed, 26 May 2010 17:01:34 -0700
changeset 341 480716493610
parent 229 716254ccbcc0
permissions -rw-r--r--
Set content type for png files


<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Supporting multiple languages"/><meta name="abstract" content="The S60 platform supports multiple languages, and mobile device users can select the language used by their devices for UI texts. The Web Runtime (WRT) environment provides localization support, so if you plan to provide your widget to mobile device users in multiple countries around the world, you should consider supporting several languages in your widget."/><meta name="description" content="The S60 platform supports multiple languages, and mobile device users can select the language used by their devices for UI texts. The Web Runtime (WRT) environment provides localization support, so if you plan to provide your widget to mobile device users in multiple countries around the world, you should consider supporting several languages in your widget."/><meta name="DC.Relation" scheme="URI" content="GUID-63F4E17E-8895-4054-82AD-762B90610B30"/><meta name="DC.Relation" scheme="URI" content="GUID-46EABDC1-37CB-412A-ACAD-1A1A9466BB68"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-E3EA4F85-E0AE-42AB-8E51-EFD3F0E0A51E"/><title>Supporting multiple languages </title><script type="text/javascript">
      function initPage() {}
    </script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-E3EA4F85-E0AE-42AB-8E51-EFD3F0E0A51E">Supporting multiple languages</h1><div><p>The S60 platform supports multiple languages, and mobile device users can select the language used by their devices for UI texts. The Web Runtime (WRT) environment provides localization support, so if you plan to provide your widget to mobile device users in multiple countries around the world, you should consider supporting several languages in your widget. </p>
<p>In addition to UI text strings that are language dependent, a widget may contain data types that require localization according to the target country or region. Examples of such data types include date and time formatting, time zone and currency. Also images may need to be localized.</p>
<div class="note"><p><strong class="note_title">Note: </strong>To enable localization of your widget, do not hard code text strings in your widget HTML or JavaScript files.</p></div>
<p>The WRT environment uses different language versions of a widget through resource loading. You need to implement localization information for your widget in resource-specific files that you store under <a href="GUID-71BE0F0B-B6B2-475C-A87B-A04E207F3292.html#GUID-71BE0F0B-B6B2-475C-A87B-A04E207F3292">language project directories</a>. When a resource that is defined relatively to the widget root directory is to be loaded, the system first looks for the resource within the language project directory that matches with the current device language. If the localized resource is found, it is loaded and used. Otherwise the default resource under the root directory of the widget is loaded. The resources for the default language are always stored directly under the root directory.</p>
<p>For an example of localizing a widget, see <a href="GUID-8DC78944-809B-462B-BEC2-0114696F8B14.html#GUID-8DC78944-809B-462B-BEC2-0114696F8B14">Localizing STEW</a>.</p>
<div><h3>To support multiple languages</h3><ol>
<li id="GUID-A7DA3764-A1C5-4BC9-8628-66EE244F0A72"><a name="GUID-A7DA3764-A1C5-4BC9-8628-66EE244F0A72"><!----></a><p>Create a <a href="GUID-71BE0F0B-B6B2-475C-A87B-A04E207F3292.html#GUID-71BE0F0B-B6B2-475C-A87B-A04E207F3292">language project directory</a> at the root level of your widget for each language that you plan to support, for example <code>en.lproj</code> and <code>fi.lproj</code> for English and Finnish.</p><div class="note"><p><strong class="note_title">Note: </strong>You do not need to create a language project directory for the default language, as the files for the default language are stored directly at the root of the widget.</p><p/></div></li>
<li id="GUID-9E09BCFA-E3D7-4486-B4F0-58A2279DEEE2"><a name="GUID-9E09BCFA-E3D7-4486-B4F0-58A2279DEEE2"><!----></a><p><a href="GUID-4CD10DEB-6C79-4320-AC82-F17DD264CF28.html#GUID-4CD10DEB-6C79-4320-AC82-F17DD264CF28">Localize the display name of the widget</a> using <code>infoplist.strings</code> files.</p></li>
<li id="GUID-0E0CF2F9-18E7-4C99-AB80-0F1BFDCFA12D"><a name="GUID-0E0CF2F9-18E7-4C99-AB80-0F1BFDCFA12D"><!----></a><p><a href="GUID-C442113C-5FBE-493E-AD5A-CF0A0FB3C5FD.html#GUID-C442113C-5FBE-493E-AD5A-CF0A0FB3C5FD">Localize the display texts</a> of the widget using separate JavaScript files for text strings.</p></li>
<li id="GUID-2FE05DD4-9659-4888-A2AB-C1710074BE30"><a name="GUID-2FE05DD4-9659-4888-A2AB-C1710074BE30"><!----></a><p><a href="GUID-63F29096-C1A3-45DB-9E2F-6110562E0237.html#GUID-63F29096-C1A3-45DB-9E2F-6110562E0237">Localize any resources</a>, such as images, if they are language or region dependent.</p></li>
</ol></div>
<div><h3>Selecting the widget language</h3><p>The WRT environment loads localized resources from language project directories only when the location of the resources is defined relatively to the root directory of the widget. Localized resources are used in the following contexts:</p><ul>
<li><p>The <code>@import</code> directive is used in the <a href="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA.html#GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA">main HTML document</a>. For example:</p><pre class="codeblock" id="GUID-0046A660-3BC3-4B80-81D5-825810688600">@import "localizedStyle.css"</pre></li>
<li><p>A resource is loaded dynamically using JavaScript code. For example:</p><pre class="codeblock" id="GUID-EF5DADEF-17DC-4499-AAA0-1BB801A66A44">document.getElementById('image').setAttribute('src', 'image.jpg');</pre></li>
<li><p>The <code>src</code> attribute of an HTML tag is used. For example:</p><pre class="codeblock" id="GUID-B67935E3-6EAE-47BD-AF3D-68322BF019E0">&lt;script src='localizedScript.js' /&gt;
&lt;img src="localizedImage.gif" /&gt;</pre></li>
</ul><p>Checking the current language setting of the device and using that language for the widget is done automatically when the widget is launched. If the user changes the language setting of the device while the widget is running, this will cause the widget to exit and the mobile device to reboot.</p><div class="note"><p><strong class="note_title">Note: </strong>Changing the language of the widget may also affect the layout of the UI. For example, supporting a right-to-left language in your widget may require that you mirror some UI components around the Y axis. To localize the widget layout, use <a href="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4.html#GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4">CSS files</a> for each layout type and specify the file in the <a href="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA.html#GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA">main HTML file</a>. For more information, see section <a href="GUID-0FEFAF39-7048-4F4A-8676-C4BF1AF37120.html#GUID-0FEFAF39-7048-4F4A-8676-C4BF1AF37120">Localizing widget layout</a>.</p></div></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>