Rendering CJK-heavy share cards with satori (and the three things that broke)
I run a small Korean saju (Four Pillars) reading service. Every reading ends with a share card — a PNG with the person's day pillar in Chinese characters, a hand-drawn animal, and a one-line epithet in Korean or English. We also generate 60 Pinterest pins and Open Graph images for a few hundred dictionary pages the same way. All of it is rendered with satori through Next.js's ImageResponse .…
The article discusses the challenges faced when rendering share cards for a Korean saju reading service using satori in a Next.js application. One of the main issues encountered was the lack of support for CJK (Chinese, Japanese, Korean) characters, specifically hanja, which are Chinese characters used in the saju charts. The brand font used for the saju charts did not include the necessary glyphs for hanja, leading to tofu boxes appearing instead of the intended characters.
To resolve this issue, the author implemented a solution by loading a fallback set of fonts, with the most specific one (OreumHan) loaded first. This approach mimicked the @font-face technique used in CSS, allowing the system to fall back to the second font if the first one failed to load the required glyphs. The article also highlights the importance of using TTF/OTF font files, as satori expects these formats rather than the more commonly used woff2 format.
Brief written by urgent.news from Dev.to's own syndicated text. Machine-written — may contain errors; check the original before relying on it.
