mokujiro.com is now bilingual: English by default, Japanese at /ja.
What I used in Framer
- Localization add on for the ja locale. hreflang, canonicals and the sitemap per locale came for free.
- CMS localization for case studies, products, lab and services. Text fields got Japanese, slugs and images stayed shared.
- useLocaleInfo in code components. The language switcher, banner, hero graph and approach tabs carry an en / ja dictionary and switch themselves.
- Custom Code for the typeface. IBM Plex Sans has no Japanese glyphs, so Noto Sans JP sits behind it as the fallback on Japanese pages.
How the Japanese was done
- Step 1: AI translated the English into Japanese. This gave coverage, not quality.
- Step 2: the AI read only the Japanese, worked out what each sentence was trying to say, then rewrote it to express that intent. The English was no longer in the loop.
- Step 3: I reviewed everything. A lot still needed changing. Japanese readers notice immediately when Japanese is not native, and a literal translation reads as foreign even when it is correct.
- Pushed through the Framer plugin API: about 780 strings, 24,000 English words. An audit script then compared every page in both languages before launch.
Two things worth knowing
- Localise code components in code, not through the panel.
- Framer sets html lang after hydration, so a CSS rule that depends on lang="ja" needs a one line script before first paint.
