MozillaWiki

L20n/HTML: Difference between revisions

Page Discussion

L20n/HTML (view source)

Revision as of 13:36, 26 March 2015

261 bytes added ,  26 March 2015
m
Typo
(Created page with "= Intro = This document is a tutorial on how to use L20n to localize your HTML web aplication. == Initial setup == We'll operate on an example of a very simple HTML5 document ...")
 
m (Typo)
 
(10 intermediate revisions by one other user not shown)
Line 33: Line 33:


The last piece of the equation is to bind the HTML nodes to their respective localizable elements (called entities) by setting an ''l10n-id'' attribute on each node.
The last piece of the equation is to bind the HTML nodes to their respective localizable elements (called entities) by setting an ''l10n-id'' attribute on each node.
main.lol:
<page "Page">
<discussion  "Discussion">
<edit "Edit">


HTML:
HTML:
<pre>
<html>
<html>
  <head>
  <head>
    '''<link rel="resource" type="intl/l20n" href="./locales/main.lol" />'''
    <link rel="resource" type="intl/l20n" href="./locales/main.lol"
  </head>
  </head>
  <body>
  <body>
    <header>
    <header>
      <nav>
      <nav>
        &lt;ul>
        <ul>
          &lt;li '''l10n-id="page"''' />
          <li l10n-id="page" />
          &lt;li '''l10n-id="discussion"''' />
          <li l10n-id="discussion" />
          &lt;li '''l10n-id="edit"''' />
          <li l10n-id="edit" />
        &lt;/ul>
        </ul>
      </nav>
      </nav>
    </header>
    </header>
  </body>
  </body>
</html>
</html>
 
</pre>
 


main.lol:
<pre>
<page "Page">
<discussion  "Discussion">
<edit "Edit">
</pre>


With this change, we now have our document localizable!
With this change, we now have our document localizable!
Line 68: Line 67:


HTML:
HTML:
<pre>
<html>
<html>
  <head>
  <head>
    '''<script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>'''
    <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
    <link rel="resource" type="intl/l20n" href="./locales/main.lol" />
  </head>
  <body>
    <header>
      <nav>
        &lt;ul>
          &lt;li l10n-id="page" />
          &lt;li l10n-id="discussion" />
          &lt;li l10n-id="edit" />
        &lt;/ul>
      </nav>
    </header>
  </body>
</html>


    <link rel="resource" type="intl/l20n" href="./locales/main.lol"
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li l10n-id="page" />
          <li l10n-id="discussion" />
          <li l10n-id="edit" />
        </ul>
      </nav>
    </header>
  </body>
</html>
</pre>


== Pick a language ==
== Pick a language ==
Line 97: Line 95:


main-en-US.lol:
main-en-US.lol:
<pre>
<page "Page">
<page "Page">
<discussion  "Discussion">
<discussion  "Discussion">
<edit "Edit">
<edit "Edit">
</pre>


main-de.lol:
main-de.lol:
<pre>
<page "???">
<page "???">
<discussion  "???">
<discussion  "???">
<edit "???">
<edit "???">
</pre>


now we need to modify our HTML document to a) provide the list of available locales and b) instruct the document on where to find each locale file.
now we need to modify our HTML document to a) provide the list of available locales and b) instruct the document on where to find each locale file.
Line 115: Line 109:


HTML:
HTML:
<pre>
<html>
<html>
  <head>
  <head>
    '''<meta http-equiv="Content-Language" Content="en-US, de">'''
    <meta http-equiv="Content-Language" Content="en-US, de">
    <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
    <link rel="resource" type="intl/l20n" '''href="./locales/main-{{ locale }}.lol"''' />
  </head>
  <body>
    <header>
      <nav>
        &lt;ul>
          &lt;li l10n-id="page" />
          &lt;li l10n-id="discussion" />
          &lt;li l10n-id="edit" />
        &lt;/ul>
      </nav>
    </header>
  </body>
</html>


    <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
Now, the l20n framework will take the locales available for the document and sort them according to the user preference. In result the best locale out of the available ones will be picked and loaded.
 
    <link rel="resource" type="intl/l20n" href="./locales/main-{{ locale }}.lol"
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li l10n-id="page" />
          <li l10n-id="discussion" />
          <li l10n-id="edit" />
        </ul>
      </nav>
    </header>
  </body>
</html>
</pre>
 
Now, the l20n framework will take the locales available for the document and sort them according to the user preference. In result the best locale out of the avallable ones will be picked and loaded.


We now have a fully localized document! Whoa!
We now have a fully localized document! Whoa!
Line 147: Line 138:


HTML:
HTML:
<pre>
<html>
<html>
  <head>
  <head>
    <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
    <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
 
    <span style="color: green"><script type="text/javascript">
    <script type="text/javascript">
      var ctx = document.l10nCtx;
      var ctx = document.l10nCtx;
      ctx.settings.locales = ['en-US', 'de', 'it'];
      ctx.settings.locales = ['en-US', 'de', 'it'];
      ctx.settings.schemes = [
      ctx.settings.schemes = [
        './locales/<nowiki>{{ locale }}/{{ app }}/{{ resource }}</nowiki>.lol
        './locales/{{ locale }}/{{ app }}/{{ resource }}.lol
      ];
      ];
    </script></span>
    </script>
 
    <link rel="resource" type="intl/l20n" href="<span style="color: green">./locales/main-<nowiki>{{ locale }}</nowiki>.lol</span>" />
    <link rel="resource" type="intl/l20n" href="l10n:pontoon:core/editor"
  </head>
  </head>
  <body>
  <body>
    <header>
    <header>
      <nav>
      <nav>
        &lt;ul>
        <ul>
          &lt;li l10n-id="page" />
          <li l10n-id="page" />
          &lt;li l10n-id="discussion" />
          <li l10n-id="discussion" />
          &lt;li l10n-id="edit" />
          <li l10n-id="edit" />
        &lt;/ul>
        </ul>
      </nav>
      </nav>
    </header>
    </header>
  </body>
  </body>
</html>
</html>
</pre>


or, for decoupled from the document and put into separate JSON manifest:
or, for decoupled from the document and put into separate JSON manifest:
Line 200: Line 189:
   <head>
   <head>
     <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
     <script type="text/javascript;version=1.8" src="./js/l20n-xml.min.js"></script>
 
     <link rel="manifest" type="intl/manifest" href="./locales/manifest.json">
     <span style="color: green"><link rel="manifest" type="intl/manifest" href="./locales/manifest.json"></span>
     <link rel="resource" type="intl/l20n" href="l10n:pontoon:core/editor"
     <link rel="resource" type="intl/l20n" href="l10n:pontoon:core/editor" />
   </head>
   </head>
   <body>
   <body>
Glogiotatidis
Confirmed users
60

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/468945...1064647"