Easy guide to Localize a FirefoxOS app’s html interface

Since Firefox OS was released in Spain and Latin America is targeted next I tough that translating the app I keep working on to Spanish was a natural decision.

Since my HTML interface is pretty simple, my first impulse was to take the most early-web approach every and create a secondary index.html in Spanish and have the manifest.webapp point to that file when the locale is set to “es”.

Needless to say, this did not work well. After taking a look at the gaia source code it was obvious there was some sort of mechanism the apps were using for the elements to change their text automatically depending on the phone’s set language but either I am a very bad seeker or there is no easy to find, step by step guide on how to make it work.

So, after reading some documentation here and here and trying out several things I decided to create this simple, easy to follow guide on localizing the html interface of your FirefoxOS app.

    • You are going to need a .js file used by all gaia apps. The code is here. Add this to your app and import it in your html.
    • Add a “data-l10n-id” property with an unique id to every html element whose contents you need to change depending on the language. Here is an example on my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/action_menu.css">
<script type='text/javascript' src="js/res/jquery.js"></script>
<script type='text/javascript' src="js/res/jquery.mobile.custom.js"></script>
<script type='text/javascript' src="js/res/modernizr.custom.js"></script>
<script type='text/javascript' src="js/res/async_storage.js"></script>
<script type='text/javascript' src="js/res/youtube.js"></script>
<script type='text/javascript' src="js/main.js"></script>

<!-- Localization stuff -->

<script type='text/javascript' src="js/res/l10n.js"></script>
</head>
<body id="body">

<div id="toast" >
<img src="img/refresh.png" /> <p data-l10n-id="loading">Loading</p>
</div>

<div id="wrapper">

<div id="scrollbar">
<!-- <img src="img/art.png"></img> -->

</div>
<div id="display">

<div id="section1">
<img src="img/test.jpg" id="CurrentlyPlaying"></img>
<p id="SongName" data-l10n-id="EmptyPlaylist"> Empty playlist. Search for youtube videos and add! </p>
<div id="SeekBar"><div id="ProgressBar"></div> </div>
</div>
<div id="section2">
<div id="Button_container">
<div id="back">
<img src="img/back.png"></img>
</div>
<div id="play">
<img id ="playImg" src="img/play.png"></img>
</div>
<div id="foward">
<img src="img/forward.png"></img>
</div>
<div id="randomB">
<img id="shuffleImg" src="img/shuffle.png"></img>
</div>
<div id="menu">
<img id="menuImg" src="img/menu.png"></img>
</div>
</div>
</div>
</div>
</div>

<div id="blocker">
<form id="secondForm" role="dialog" data-type="action">
<menu id="IniMenu">
<button id="save" data-l10n-id="SaveCurrent"> Save Current Playlist </button>
<button id="BrowsePlaylists" data-l10n-id="LoadCurrent"> Load saved playlist </button>
<button id="AddYTP" data-l10n-id="AddWhole"> Add whole YT playlist </button>
<button id="CloseUp" data-l10n-id="Close"> Close </button>
</menu>
<menu id="loadMenu">
<button id="Cancel" data-l10n-id="Close"> Close </button>
</menu>
</form>
</div>
<!-- <video controls='controls' id="player"/> -->
<audio  mozaudiochannel="content" id="player" />
</body>
</html>
    • Create a .properties file for every language you are going to be localizing to. Each file needs to contain the “data-l10n-id” of an element, an equal sign and the text you want inside of it for that lenguage… Actually, just look at my example and you will probably understand it better than my crappy explanation:

My english.properties files:

loading = Buffering. Please Wait

EmptyPlaylist = Empty playlist. Search for youtube videos and add!

SaveCurrent = Save Current Playlist

LoadCurrent = Load saved playlist

AddWhole = Add whole YT playlist

Close = Close

My spanish.properties files:

loading = Cargando. Por favor espere

EmptyPlaylist = Lista de reproducción vacía ¡Busca videos en Youtube y agrega! 
SaveCurrent = Guardar List. de Repro. actual

LoadCurrent = Cargar lista guardada

AddWhole = Importar lista de YT completa

Close = Cerrar

    • Create a locales.ini file where you import every .properties files specifying which language which one is supposed to be associated with using the structure in the example:
@import url(english.properties)

[es]
@import url(spanish.properties)
    • Be sure to import the locales.ini in your html.
<link rel="resource" type="application/l10n" href="locales/locales.ini">

And you are done. Now your HTML elements have text that reacts to the Phone’s language settings. Happy coding.

Advertisements

An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.

Tagged with: , , ,
Posted in developer tips
5 comments on “Easy guide to Localize a FirefoxOS app’s html interface
  1. Hey ajirdalas
    Locals.ini is not loaded in my html file. How can i resolve this.

  2. Jess says:

    You can translate your .properties files easily with this localization tool: https://poeditor.com. I ‘ve been using it for a while and it works wonderful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: