Compare Revisions

Creating localizable web applications

Revision 235593:

Revision 235593 by stasm on

Revision 124242:

Revision 124242 by stasm on

Title:
Creating localizable web applications
Creating localizable web applications
Slug:
Web_Localizability/Creating_localizable_web_applications
Web_Localizability/Creating_localizable_web_applications
Tags:
Internationalization, Localization, "Web Development", Localizability
Internationalization, Localization, "Web Development", Localizability
Content:

Revision 235593
Revision 124242
n11      <span style="font-size: x-small;"><em>Most of the code snipn11      <em>Most of the code snippets used in the examples below co
>pets used in the examples below come from an early version of the>me from an early version of the getpersonas.com website. In some 
> getpersonas.com website. In some cases, the code snippets were s>cases, the code snippets were slightly changed to better illustra
>lightly changed to better illustrate the recommendations or for c>te the recommendations or for clarity.</em>
>larity.</em></span> 
12    </p>
13    <h2>12    </p>
13    <h2 id="Cheatsheet">
n34    <h2>n34    <h2 id="App_Logic">
n37    <h3>n37    <h3 id="Detect_the_locale_correctly">
n52      See examples of the addons.mozillaorg code at <a class=" exn52      See examples of the addons.mozillaorg code at <a class="ext
>ternal" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/>ernal" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/a
>app/config/language.php?view=markup" title="http://viewvc.svn.moz>pp/config/language.php?view=markup" title="http://viewvc.svn.mozi
>illa.org/vc/addons/trunk/site/app/config/language.php?view=markup>lla.org/vc/addons/trunk/site/app/config/language.php?view=markup"
>">/addons/trunk/site/app/config/language.php</a> and <a class=" e>>/addons/trunk/site/app/config/language.php</a> and <a class="ext
>xternal" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site>ernal" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/a
>/app/config/language.inc.php?view=markup" title="http://viewvc.sv>pp/config/language.inc.php?view=markup" title="http://viewvc.svn.
>n.mozilla.org/vc/addons/trunk/site/app/config/language.inc.php?vi>mozilla.org/vc/addons/trunk/site/app/config/language.inc.php?view
>ew=markup">/addons/trunk/site/app/config/language.inc.php</a>. Th>=markup">/addons/trunk/site/app/config/language.inc.php</a>. The 
>e <code>LANGUAGE_CONFIG</code> class expects arrays of valid lang><code>LANGUAGE_CONFIG</code> class expects arrays of valid langua
>uages &amp;&nbsp;supported languages.>ges &amp;&nbsp;supported languages.
n57    <h3>n57    <h3 id="Use_the_locale_code_in_the_URLs">
n66    <h3>n66    <h3 id="Simplify_localized_versions_if_necessary">
n72    <h3>n72    <h3 id="Define_the_locale_and_the_direction_in_the_HTML">
n76      Generate the lang attribute dynamically, depending on the cn76      Generate the lang attribute dynamically, depending on the c
>urrent locale. Use the <code>dir</code> attribute on the <code>&l>urrent locale. Use the <code>dir</code> attribute on the <code>&l
>t;html/&gt;</code> element and consider using a <code>rtl</code> >t;html/&gt;</code> element and consider using a <code>rtl</code> 
>class on <code>&lt;html/&gt;</code> or <code>&lt;body/&gt;</code>>class on <code>&lt;html/&gt;</code> or <code>&lt;body/&gt;</code>
> as well, in order to easily change CSS rules like in the example> as well, in order to easily change CSS rules like in the example
> below.<code><br></code>> below.<br>
n91<code>html[dir='rtl'] foo { <br>  /* RTL-specific rules for the Fn91<code>html[dir='rtl'] foo { 
>OO element */ <br>}</code> 
92<code><br>body.rtl foo { <br>  /* RTL-specific rules for the FOO 92  /* RTL-specific rules for the FOO element */ 
>element */ <br>}</code> 
93}</code>
94 
95<code>body.rtl foo { 
96  /* RTL-specific rules for the FOO element */ 
97}</code>
n116<code>body.de foo, body.fr foo, body.pl foo { <br>  /* locale-spen121<code>body.de foo, body.fr foo, body.pl foo { 
>cific rules for the FOO element */ <br>  width: 10em; /* original 
>ly 8em */<br>}</code> 
122  /* locale-specific rules for the FOO element */ 
123  width: 10em; /* originally 8em */
124}</code>
n118    <h3>n126    <h3 id="Adapt_the_interaction_to_RTL_locales">
n124    <h3>n132    <h3 id="Separate_URLs_from_navigation">
n146    <h3>n154    <h3 id="Indicate_the_language_of_the_pages_you_link_to">
n178    <h3>n186    <h3 id="Don't_mingle_app_logic_and_localizable_content_when_u
 >sing_pure_HTML">
n198      If it's not possible to remove the app logic code, you shoun206      If it's not possible to remove the app logic code, you shou
>ld consider using gettext. Gettext extracts localizable content f>ld consider using gettext. Gettext extracts localizable content f
>orm the source files, thus making it impossible for localizers to>orm the source files, thus making it impossible for localizers to
> accidentally change them. You can learn more about the choice of> accidentally change them. You can learn more about the choice of
> the format for your project at <a class=" link-https" href="http> the format for your project at <a class="link-https" href="https
>s://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes" title=>://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes" title="
>"https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes">F>https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes">Fi
>ile formats</a>.>le formats</a>.
199    </p>
200    <h2>207    </p>
208    <h2 id="Text_messages">
n203    <h3>n211    <h3 id="Don't_hardcode_English_content">
n223      If you are using pure HTML instead of gettext to localize yn231      If you are using pure HTML instead of gettext to localize y
>our webapp, consider using an additional gettext-like format such>our webapp, consider using an additional gettext-like format such
> as <a class=" link-https" href="https://wiki.mozilla.org/L10n:Re> as <a class="link-https" href="https://wiki.mozilla.org/L10n:Req
>quirements/Web_l10n_filetypes#.lang_files" title="https://wiki.mo>uirements/Web_l10n_filetypes#.lang_files" title="https://wiki.moz
>zilla.org/L10n:Requirements/Web_l10n_filetypes#.lang_files">.lang>illa.org/L10n:Requirements/Web_l10n_filetypes#.lang_files">.lang<
></a> to streamline localizers' work with repeating content. This >/a> to streamline localizers' work with repeating content. This i
>is useful for strings occurring in the webapp multiple times, lik>s useful for strings occurring in the webapp multiple times, like
>e "return to top", "comments", "click to see larger image" etc. M> "return to top", "comments", "click to see larger image" etc. Mi
>ight be also helpful for headers and footers, if you're not using>ght be also helpful for headers and footers, if you're not using 
> templates to display them.>templates to display them.
n228    <h3>n236    <h3 id="Localize_the_date_format">
n246    <h3>n254    <h3 id="Localize_the_number_format">
n250      You can make the number format localizable using the informn258      You can make the number format localizable using the inform
>ation returned by <a class=" external" href="http://php.net/manua>ation returned by <a class="external" href="http://php.net/manual
>l/en/function.localeconv.php" title="http://php.net/manual/en/fun>/en/function.localeconv.php" title="http://php.net/manual/en/func
>ction.localeconv.php">localeconv()</a> in PHP.>tion.localeconv.php">localeconv()</a> in PHP.
n269    <h3>n277    <h3 id="Wrap_as_few_HTML_tags_as_possible">
n366    <h3>n374    <h3 id="...but_don't_sacrifice_flexibility">
n406    <h3>n414    <h3 id="Use_printf()_for_string_substitution">
n468    <h3>n476    <h3 id="Use_gettext_comments">
n472      Use comments in the code to help localizers understand whatn480      Use comments in the code to help localizers understand what
> they are translating. You can explain where the string will appe> they are translating. You can explain where the string will appe
>ar in the application, or what the variables used in the string w>ar in the application, or what the variables used in the string w
>ill be replaced with. Put comments in the same line as the gettex>ill be replaced with. Put comments in the same line as the gettex
>t function call (inline comments, in PHP these are <code>/* ... *>t function call (inline comments, in PHP these are <code>/* ... *
>/</code>), or one line directly above the gettext function call (>/</code>), or one line directly above the gettext function call (
>block comments, in PHP they start with <code># ...</code> or <cod>block comments, in PHP they start with <code># ...</code> or <cod
>e>// ...</code>). In either way, use a consistent prefix for loca>e>// ...</code>). In either way, use a consistent prefix for loca
>lization-related comments, e.g. "L10n". When extracting strings w>lization-related comments, e.g. "L10n". When extracting strings w
>ith <a class=" external" href="http://www.gnu.org/software/hello/>ith <a class="external" href="http://www.gnu.org/software/hello/m
>manual/gettext/xgettext-Invocation.html" title="http://www.gnu.or>anual/gettext/xgettext-Invocation.html" title="http://www.gnu.org
>g/software/hello/manual/gettext/xgettext-Invocation.html"><code>x>/software/hello/manual/gettext/xgettext-Invocation.html"><code>xg
>gettext</code></a> you will be able to include only comments star>ettext</code></a> you will be able to include only comments start
>ting with this prefix using the <code>--add-comments=PREFIX</code>ing with this prefix using the <code>--add-comments=PREFIX</code>
>> option, for example <code>xgettext --add-comments=L10n</code>.> option, for example <code>xgettext --add-comments=L10n</code>.
n525    <h3>n533    <h3 id="Use_printf_variables_swapping">
n553    <h3>n561    <h3 id="Don't_nest_gettext_calls">
n568    <h3>n576    <h3 id="Don't_break_long_text_content_into_multiple_strings">
n648    <h3>n656    <h3 id="Use_gettext_contexts">
n654    <h3>n662    <h3 id="Use_gettext_plurals">
n679    <h3>n687    <h3 id="Don't_use_text_as_decoration">
n705    <h2>n713    <h2 id="Images">
n708    <h3>n716    <h3 id="Don't_put_text_or_numbers_in_the_images">
n771    <h3>n779    <h3 id="Make_icons_flippable_for_RTL">
n824    <h3>n832    <h3 id="Don't_use_images_as_buttons">
t880    <h3>t888    <h3 id="Don't_put_captions_in_the_images">

Back to History