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.
+Create localized CSS files with style information for the languages that require localization.
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.
Store the files into the appropriate language project directories.
Import the CSS file in the main HTML file using the @import directive within the <style> tag.
Provide a default CSS file with generic style information and store it into the root directory of your widget.
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.
The following pieces of code provide an example of widget layout localization for Finnish and for a default case:
Specified in the main HTML document:
<style type="text/css"> + @import "localizedLayout.css"; +</style>
Localized resource location:
[root]\fi.lproj\ + localizedLayout.css +
Default resource location:
[root]\ + localizedLayout.css +