For this project, I was interested in exploring L20n, a website localization framework developed by Mozilla to handle linguistic problems. I was curious about L20n since my undergrad, when I heard about it from Jeff Beatty, head of localization at Mozilla. I had heard about it, and was interested in understanding how it worked. After spending some time researching it, I learned that L20n is designed to handle complex linguistic problems such as gender and number, which show up in languages like Spanish and Polish.

I thought it would be interesting to find a game to localize using this method. Before doing so, I realized that a logical first step would be to get the L20n demo website from Github up and running. After downloading the code, I began to analyze it to see how L20n was implemented. Here is a photo of what I encountered:

The screenshot on the left is the code that was inserted into the HTML file to link it to l20n.js file and to set the languages the demo would be translated into. For each language, an .ftl file must be created. In the body is an h1 element with the required data-l10n-id attribute added to it. This attribute tells the DOM that this HTML element is localizable and the string for it is found in the respective .ftl file. The image on the right shows the .ftl file that contains the strings that have been extracted from the .html file. Like other resource files for other localization methods, this file contains the extracted strings using a system of keys and values to connect the strings to their original HTML elements. As you can see from looking at the the strings, there are values stored in the strings that give options for different strings to appear based on the number of emails. This is an example of the plural issue that can arise in localizing websites, and is one of the problems L20n is designed to resolve.

After analyzing the demo files and realizing all of the facts listed above, I attempted to implement L20n. When I did, I ran into a small problem: the extracted text was not displaying, as shown in the screenshot at right. This led me to believe that maybe the .html file was not connecting to the L20n library, which is stored in the L20n.js file. I analyzed the path to the file and corrected it to the L20n.js location; however, the text still did not appear. After multiple attempts, it the text still was not visible. I went back and reread the documentation and was still confused. After more attempts, I was still unsuccessful. I then went and did more research, and learned that historically people have been unable to implement L20n in Chrome. I then switched to Firefox, but to no avail.

At that point, I realized that I needed to know more about L20n, but the instructions were unclear for someone without much programming experience. I even took the problem to one of my professors, but he was at a loss since the path seemed right. Unfortunately, the problem is not solved yet since we still don’t have a working L20n demo. For this reason, I plan to reach out to Mozilla around the start of next semester for help on solving this issue. I did reach out to Jeff, be he recommended I contact other L20n dev team members. I believe that once I do I will be able to see the true capability L20n has for resolving complex language issues, whereas now all I know is what I’ve shared in this article and what I’ve seen in the L20n tutorials online. I look forward to learning more about L20n in the near future.