Localization
Render localized App Store screenshots in every language from one set of HTML templates, with string placeholders, fallbacks, number formatting and RTL text.
Your store listing has a screenshot slot for every language you support. Open Assets fills them from the same templates: you write {{key}} placeholders in the HTML, put the translations in a JSON file, and every template renders once per locale.
How it works
Write the strings. A localizations.json file holds every string in every language, in a format modeled on Xcode's .xcstrings.
Point a collection at it. Add localizations (and optionally locales) to the collection in assets.json.
Use keys in templates. <h1>{{hero_title}}</h1>.
Render. npx open-assets render produces one set per locale, in a folder per locale.
Quick example
{
"sourceLanguage": "en",
"strings": {
"hero_title": {
"localizations": {
"en": { "value": "Track your tax days" },
"de": { "value": "Verfolge deine Steuertage" },
"ja": { "value": "税金の日を追跡する" },
"ar": { "value": "تتبع أيام الضرائب الخاصة بك" }
}
}
}
}{
"id": "screenshots",
"sourceSize": { "width": 440, "height": 956 },
"localizations": "localizations.json",
"locales": ["en", "de", "ja", "ar"],
"templates": [
{ "src": "assets/screenshots/01-hero.html", "name": "01-hero" }
],
"export": [
{ "name": "iphone-6.9", "size": { "width": 1320, "height": 2868 } }
]
}<h1>{{hero_title}}</h1>npx open-assets render --collection screenshots # every locale
npx open-assets render --collection screenshots --locale ja # just JapaneseThe result is exports/screenshots/{locale}/iphone-6.9/01-hero.png for each locale (or exports/screenshots/{locale}/iphone-6.9.png when the collection has a single template).
What happens during a localized render
For each locale, Open Assets loads the template once, then before capturing:
- Sets
langon the<html>element to the locale code. - Replaces
{{key}}in every text node with the resolved string, falling back from the exact locale to the base language to the source language. - Formats
{{n:1234}}tokens inside those strings with the locale's number format. - For right-to-left locales, sets
dir="rtl"on the element that contains each replaced string. - Waits for fonts and images to finish loading, then screenshots every export size.
In this section
Strings
The localizations.json format, placeholders, fallbacks and missing keys.
Number formatting
Locale-aware numbers with {{n:1234}}.
Right-to-left
Arabic, Hebrew and other RTL locales, and how to write direction-agnostic CSS.
Fonts
CJK, Arabic and Hebrew fonts that render the same on every machine.
Locales and folders
Which locale codes work and where each locale's files land.
Tax Days example
Eight screenshots, 38 locales in the strings file, four rendered.
Last updated on
The public directory
How publicDir holds shared logos, photos, fonts and UI test captures, how the dev server serves and watches it, and how to reference it so render resolves.
Localized Strings
The localizations.json format for translated screenshot copy, how {{key}} placeholders are replaced, the fallback chain and what happens when a key is missing.