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.
An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.
The Runaway Dev 
Hey ajirdalas
Locals.ini is not loaded in my html file. How can i resolve this.
Hello. Can I look at your code? Is it up somewhere?
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.
Very nice. Will be using this in the future. Thanks
[…] Via: The Runaway Dev […]