4 ways canvas text rendering breaks in multilingual apps (that en/ja testing will never catch)

Short summary

Canvas 2D text rendering breaks across locales beyond en/ja due to character-length expansion (fr/pt run 1.4–1.7× longer, es up to 3×), CJK tokenization issues, accented-character word-splitting, and preview-to-PNG mismatches. The author identifies four failure patterns from a production fleet of image-output tools in five languages and provides concrete fixes including auto-fit font sizing and centralized measurement. Only generating real PNGs and visually inspecting them catches rendering-level bugs that static analysis misses.

• •fr/pt text runs 1.4–1.7× longer than ja; es up to 3×, breaking layouts tuned for ja/en
• •CJK text splits on spaces fail; Latin character-class tokenizers break on accented chars (ç é ã ó ñ)
• •Preview DOM and downloaded PNG must share the same auto-fit font-size logic or line breaks diverge
• •Only visual PNG inspection across all locales catches rendering-level bugs; static analysis cannot

Generated with AI, which can make mistakes.