Screenshot shows boxes instead of Korean characters

[ryanckulp]

hi folks,

great utility, deploying to a site with thousands of pages. my challenge is: Korean (한글) characters aren't working.

this is similar to my issue (Hindi language): https://github.com/puppeteer/puppeteer/issues/5311

here's what i'm seeing in my Zeit-deployed production instance, w/ text "경찰" World:

but in localhost:3000 it works great!

i've tried changing:

• UTF
• lang
• fonts (e.g. Arial vs Inter)
• hard-coding Korean characters into the template e.g. <div class="heading">경찰 test (inside template.js)

i tried these measures to ensure local sanitizers are doing anything funky.

every one of my tests yields the same: works in localhost, doesn't in production. thanks for reading.

[styfle]

Hi @ryanckulp

We haven't tried posting in non-english languages since all our content is English at this time.

This could be related to #70.

[ryanckulp]

update.. after 10 hours i'm almost. there.

tldr -- replaced puppateer w/ selenium-webdriver.

one question about Zeit server config: what's the executable path i should be using for Chrome, in prod?

tried: /tmp/chromium // /usr/local/bin/chromedriver

the latter works locally but not in production, says "PATH NOT FOUND."

[styfle]

ZEIT Now doesn't ship Chrome so you would have to consult the docs for selenium-webdriver to find out where it installs Chrome for Linux. If you can set a path, I would suggest /tmp because that is the only writable directory on the filesystem.

[AntwanSherif]

@ryanckulp Could you share with me how did you solve this issue? Also it it applicable for Arabic language for example?

[r0mflip]

Not all fonts support all scripts. Some of the suggested ones would be to use from the Noto family, but even then it doesn't include CJK, Devanagri, Arabic, ...

If https://github.com/vercel/og-image/issues/70 works then it would be awesome that we can the required font and tweak the CSS a bit to support the required script. IMHO all-in-one solution might be a far fetch.

[hoosan]

I have run into the same "tofu" issue with Japanese characters and got stuck for a while. As @r0mflip mentioned, adding the Noto family was the way to go. I share the procedure in case someone is in the same trouble.

1. Put a font file (e.g. *.otf) in "_fonts" directory.

2. Read the font file in template.ts

const noto = readFileSync(`${__dirname}/../_fonts/NotoSansJP-Black.otf`).toString('base64');

3. Inject it to CSS

    @font-face {
        font-family: 'Noto Sans Japanese';
        font-style: normal;
        font-weight: normal;
        src: url(data:font/otf;charset=utf-8;base64,${noto}) format('opentype');
    }

4. Add its font family name to the heading class

    .heading {
        font-family: 'Inter', 'Noto Sans Japanese', sans-serif;
        font-size: ${sanitizeHtml(fontSize)};
        font-style: normal;
        color: ${foreground};
        line-height: 1.8;
    }

That's it. It works fine most of the time.

An unresolved issue is that the some characters are still not visible.

But If I double the character ("あ" in this case), the problem has gone.

Dunno why.. I will try to add some more font files and see how it goes.

[tomy0000000]

I want to point out that even though most of us can get around with this problem by injecting Noto fonts in to HTML templates for now, the true issue here is actually lies within the chrome-aws-lambda.

I did some experiment:

• Try running on my local dev: worked -> which means the currently provided fonts is fine.
• Deployed on Vercel: failed -> Something happened on the cloud went wrong.
• Deployed another instance with OG_HTML_DEBUG=1 envs: worked -> The render html can properly display, which leaves the only possibility to the screenshot function.

[ryanckulp]

@tomy0000000 thanks for the fix! really appreciate it.

[leerob]

Closing in favor of https://github.com/vercel/og-image/issues/226