org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-0FEFAF39-7048-4F4A-8676-C4BF1AF37120.html
<!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="Localizing widget layout"/><meta name="abstract" content="You can enhance user experience by providing different versions of the widget layout based on the supported languages. For example, when a language is read from right to left, it is recommended that you align the display text and UI elements to the right side, which contrasts with the layout typically used for languages that are read from left to right."/><meta name="description" content="You can enhance user experience by providing different versions of the widget layout based on the supported languages. For example, when a language is read from right to left, it is recommended that you align the display text and UI elements to the right side, which contrasts with the layout typically used for languages that are read from left to right."/><meta name="DC.Relation" scheme="URI" content="GUID-63F29096-C1A3-45DB-9E2F-6110562E0237"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Relation" scheme="URI" content="GUID-E3EA4F85-E0AE-42AB-8E51-EFD3F0E0A51E"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-0FEFAF39-7048-4F4A-8676-C4BF1AF37120"/><title>Localizing widget layout </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-0FEFAF39-7048-4F4A-8676-C4BF1AF37120">Localizing widget layout</h1><div><p>You can enhance user experience by providing different versions of the widget layout based on the supported languages. For example, when a language is read from right to left, it is recommended that you align the display text and UI elements to the right side, which contrasts with the layout typically used for languages that are read from left to right.</p>
<div><h3>To localize the layout of a widget</h3><ol>
<li id="GUID-9AA693E8-A03D-4F97-AE48-D71B2B6B8F1E"><a name="GUID-9AA693E8-A03D-4F97-AE48-D71B2B6B8F1E"><!----></a><p>Create localized <a href="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4.html#GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4">CSS files</a> with style information for the languages that require localization.</p><p>The name of the CSS file is arbitrary, but the name must be identical for all supported languages so that you need to specify the name only once in the main HTML document.</p></li>
<li id="GUID-0D2BB445-F80C-4C91-B226-9E4914BD2C7F"><a name="GUID-0D2BB445-F80C-4C91-B226-9E4914BD2C7F"><!----></a><p>Store the files into the appropriate language project directories.</p></li>
<li id="GUID-B09FFE24-1876-4915-9CEB-A704503E14C5"><a name="GUID-B09FFE24-1876-4915-9CEB-A704503E14C5"><!----></a><p>Import the CSS file in the <a href="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA.html#GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA">main HTML file</a> using the <code>@import</code> directive within the <code><style></code> tag.</p></li>
<li id="GUID-4AD9C9D4-DE55-43C2-88AE-37A83E42CEF4"><a name="GUID-4AD9C9D4-DE55-43C2-88AE-37A83E42CEF4"><!----></a><p>Provide a default CSS file with generic style information and store it into the root directory of your widget.</p><p>If a specific language does not require layout localization, the CSS file does not need to be included in the corresponding language project directory. When that language is set as the device language, the default CSS file is loaded and used.</p></li>
</ol></div>
<div><h3>Example</h3><p>The following pieces of code provide an example of widget layout localization for Finnish and for a default case:</p><p><em>Specified in the main HTML document:</em></p><pre class="codeblock" id="GUID-23856CF8-4E08-4081-BBD6-AD4F9E400AD7"><style type="text/css">
@import "localizedLayout.css";
</style></pre><p><em>Localized resource location:</em></p><pre class="codeblock" id="GUID-C6DA73F6-9156-43C2-9C73-F405F40D241C">[root]\fi.lproj\
localizedLayout.css
</pre><p><em>Default resource location:</em></p><pre class="codeblock" id="GUID-99B3D597-4DC9-4002-B878-09253304A287">[root]\
localizedLayout.css
</pre></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>