Skip to content

Translations

Robert Konigsberg edited this page Apr 16, 2024 · 6 revisions

Contributing translations

For right now, this page is pretty sparse, but should point people in a direction for contributing translations.

The mechanics for adding and changing translations are not trivial, but can certainly be done. And if you're not comfortable with text editors or git or Github, you're going to have trouble.

Summary

Translations are stored at src/locales. Each directory below it represents a different language. Right now, our German translation is the most complete.

Updating a mistranslation

If a string is mistranslated from English, search the set of translations in src/locales for the input string, and create a pull request.

NOTE translations can repeat multiple times in a single locale. The app doesn't complain about it, so be aware, this is a spot where missteps occur.

Adding new translation strings

One way to find out what strings are not translated is to use a browser's debug console, which spits out untranslated strings.

image

Find an appropriate place in src/locales/_your locale_ to store the new string. (Because German is our most well translated locale, use src/locales/de as a reference.

Again, create a pull request.

Adding a brand new language

Thank you!

There's probably a better way to do this, but use src/locales/de as your reference. Copy the entire directory to your own, and then (and I'm sorry about this) erase all the translations so they have an empty string. And then you can start translating them.

e.g. replace

image

with

image

TIP if you're comfortable with Unix, this single line command will do that for you.

find src/locales/de -type f | xargs sed -i "s/: *\".*\",/: \"\",/"

Replace de with your new locale. (NOTE choose a locale from the ISO 639 standard)

Code changes

UI changes are also necessary: Change src/common/constants.ts including references to the new languages in ALL_LANGUAGES and LANGUAGES

Finally, add an entry to src/styles/language_icon.less. The trick is to find a value for background-position that references the correct flag. This is a pain. If you don't know what you're doing, ask for help.

Language Hacks CSS

There's a file called src/styles/language_hacks.less that includes language-specific CSS changes. I don't know much about how that works, but have at it. There's a risk these are brittle changes.

image

For example, somebody did some nice work lining up Birds to appear on the next to the VP count. Updates to how we render cards changed how visible they are.