How to localize BrowserBible 3

Since I was trying to do this myself, I thought I would document my successes for other people who might want to localize browserbible3 in the future. I haven't finished everything, but as I figure out how to do complete each step I will update this wiki (or if others know the answer they can complete it).

1. Localizing chapter and verse numbers

John Dyer wrote: Many languages do not use 0-9 digits for counting chapters, so the chapters need to be localized.

This will consist of an optional list of 1-150 in the content/texts/version/info.json file that the chapter picker will use when possible. Below is an example:

"Khmer":["០","១","២","៣","៤","៥","៦","៧","៨","៩","១០","១១","១២","១៣","១៤","១៥","១៦","១៧","១៨","១៩","២០","២១","២២","២៣","២៤","២៥","២៦","២៧","២៨","២៩","៣០","៣១","៣២","៣៣","៣៤","៣៥","៣៦","៣៧","៣៨","៣៩","៤០","៤១","៤២","៤៣","៤៤","៤៥","៤៦","៤៧","៤៨","៤៩","៥០","៥១","៥២","៥៣","៥៤","៥៥","៥៦","៥៧","៥៨","៥៩","៦០","៦១","៦២","៦៣","៦៤","៦៥","៦៦","៦៧","៦៨","៦៩","៧០","៧១","៧២","៧៣","៧៤","៧៥","៧៦","៧៧","៧៨","៧៩","៨០","៨១","៨២","៨៣","៨៤","៨៥","៨៦","៨៧","៨៨","៨៩","៩០","៩១","៩២","៩៣","៩៤","៩៥","៩៦","៩៧","៩៨","៩៩","១០០","១០១","១០២","១០៣","១០៤","១០៥","១០៦","១០៧","១០៨","១០៩","១១០","១១១","១១២","១១៣","១១៤","១១៥","១១៦","១១៧","១១៨","១១៩","១២០","១២១","១២២","១២៣","១២៤","១២៥","១២៦","១២៧","១២៨","១២៩","១៣០","១៣១","១៣២","១៣៣","១៣៤","១៣៥","១៣៦","១៣៧","១៣៨","១៣៩","១៤០","១៤១","១៤២","១៤៣","១៤៤","១៤៥","១៤៦","១៤៧","១៤៨","១៤៩","១៥០"],

I'm still not sure how to get this to work.

(view whole list of provided examples here ).

2. Adding language font

Currently font files for Greek and Hebrew are packaged with the source in app/build/mobile.css like this (starting from line 282): /* BIBLE.css * /* fonts */ @font-face { font-family: GentiumPlus; src: url(fonts/gentiumplus-r-webfont.eot); src: url(fonts/gentiumplus-r-webfont.eot?#iefix) format('eot'), url(fonts/gentiumplus-r-webfont.woff) format('woff'), url(fonts/gentiumplus-r-webfont.ttf) format('truetype'), url(fonts/gentiumplus-r-webfont.svg#webfontVIEluHTz) format('svg'); font-weight: normal; font-style: normal; }

Google Fonts can be called in the same way (see code at this link): http://fonts.googleapis.com/css?family=Content

/* fallback */ @font-face { font-family: 'Content'; font-style: normal; font-weight: 400; src: local('Content'), url(http://fonts.gstatic.com/s/content/v8/WuxSAqlm1ecbE4rOVxHEEA.woff2) format('woff2'); } /* khmer */ @font-face { font-family: 'Content'; font-style: normal; font-weight: 400; src: local('Content'), url(http://fonts.gstatic.com/s/content/v8/NqGGtwtsM97PsXgEIdi-RvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range: U+1780-17B3, U+17B6-17DB, U+17E0-17E9, U+200B-200C, U+25CC; }

Actually this seems to detect Khmer characters automatically. Not sure how robust that is though.

Currently I cannot get mobile (Android) to use the embedded font. It does use it one content/texts/km_kcb/MT1.html pages, but on the main site it seems to ignore it. On my Windows desktop it does work though. Still trouble-shooting.

3. Translating the interface

Create a copy app/js/resources/fr.js for the language you would like to add localization support. (see conversation here)

Many languages are already added: https://github.com/digitalbiblesociety/browserbible-3/blob/4685c520ecf79a4c342973723a0ee6bf95db2e5a/app/js/resources/

Then add the languages you want in the app/index.html header (starting from around line 28) like this: <!-- external libraries --> <script src="js/resources/km.js"></script>

4. Preserve your localization and update browserbible3 code

Not sure how to do this yet.