Squashing internationalization bugs

Recently I’ve been digging into language support (internationalization and localization) in more web platforms. None of them was a big project on its own, but together they are some examples which I hope to share more about in the future.

OpenStreetMap Somali

I wrote before about translating OpenStreetMap to Dhivehi and traveling to the Maldives to discuss it with local mappers. Recently another foreigner removed English from any bilingual labels… this seems irresponsible to me, but I haven’t seen anyone jumping to change it back.

For 2018, I’m hoping to help expand OpenStreetMap into more languages, preferably ones with more speakers. I started using UpWork to search translators, compare rates, and pay directly rather than relying on my own bank, Western Union, and Bitcoin. I connected with a Somali translator in Kenya and he handled the homepage and About sections really well.

Unfortunately, I haven’t seen much interest from tech and humanitarian groups in Somaliland, where I’d thought OpenStreetMap and Somali language outreach would be an easy sell. For now the words are available in iD Editor if you add “so” to your preferred languages.

MetaMask (a two-parter)

Previously I wrote about becoming a bounty coder by adding i18n to the popular Ethereum wallet, MetaMask. This was a little unique because MetaMask is a cross-browser extension, so I wanted to support all browsers (using the new-ish chrome.i18n || browser.i18n API) and a Node testing environment without that API (requiring a fallback function). I updated my post after I received the bounty and posts by MetaMask and GitCoin.

Next, I wanted to pay it forward by becoming a bounty-provider. I thought about offering a bounty on Tamil or Arabic if no translators emerged (currently both are being translated, with some open questions about finishing, but 🤷). I asked some accounts which tweet Arabic blockchain news on Twitter if they’d be interested in translating, but any responding rates were much too high.
A GitHub user asked if there could be a bounty on Slovenian, I asked what a fair bounty might be, and he asked for 0.1 ETH, similar to other languages. I went to GitCoin, stepped through the process carefully, and soon he had accepted the challenge!
A pull request was created within three days:

Someone on Twitter had asked for a Slovenian translation, so I asked for feedback on the translation, but he didn’t appear and the pull request was merged.

I found creating a task on GitCoin to be easy… I was concerned about making a mistake like losing the ETH or publishing to the wrong issue, but it worked out OK.

ObservableHQ and Noor

I bugged the new literate-coding/notebook platform ObservableHQ about how they render Arabic and other right-to-left languages. This includes right-aligned text and layout (such as lists). I also got a PR into the Arabic coding language Noor’s documentation.

In GitHub Markdown (which Noor was using), all I had to do was wrap content in RTL divs, like this:
<div dir=“rtl”>
text, markdown, and html
</div>

ObservableHQ uses MarkedJS, which does not work recursively on HTML, so inside the div it processes some inline Markdown (such as bold or links) but not others (lists). After finding an existing issue on the MarkedJS GitHub and spending a night hacking away at it, it was clear that I’d need to make significant changes, and the MarkedJS maintainers saw them as too radical.

After some back and forth, ObservableHQ implemented a solution which I like: putting dir=“auto” on rendered content to allow it to be LTR or RTL.

For general advice on RTL text, please see my Welcome to RTL guide.

StreetMix

At a NYC tech meetup, I reconnected with my friend Lou and we talked about his ongoing project to translate the urban planning tool StreetMix into other languages. I suggested finding someone on UpWork to handle Arabic words, and in the meantime I would come up with a pull request to handle RTL layout issues.

On UpWork I found Diana, a translator who gives her location as Palestine. Her husband is a civil engineer, so this translation was a team effort!

I also reached out to an Arabic i18n expert, Ramsey, about “sharrows”, which had been translated to a descriptive but plain “markings for shared lane”.

Other quirky words were oops! , “parklet” (which I’ve since translated as “small park”), the distinction between light rail, BRT buses, and streetcars… unfortunately there were a number of details like this which are important to understanding StreetMix, but are not easy to translate clearly.

Aside from the language issues, I needed to make a few changes to the HTML, CSS, and JavaScript UI of the site:

The order of a street’s segments shouldn’t be flipped going from LTR to RTL languages, so I set the CSS “direction: ltr” on one of the outer divs.

The popup options should be flipped, but mirroring the order of some options, such as turns (to right, center, left) would be strange. I added some CSS here to keep turns pointing outward.

There is a map search bar where I set text <input dir=“auto”/>. We can’t use CSS direction property here because there is only ltr or rtl, no auto option.

The close button on a window should appear in the top left, and a CSS triangle in the buildings popup needed to be flipped, too. Flipping and adjusting location of menus.

I also mentioned the project to Satoshi, an OpenStreetMap hacker who I’d met at Code for Japan. He was a little busy, but reappeared suddenly in April with a fantastic pull request. This might be the easiest way to translate: finding someone with personal interest!

Nomadic web developer and mapmaker.