🖼️

@vercel/ogで記号文字を入れて"Unsupported OpenType signature"になって困ったけど解決したメモ

2023/01/01に公開約1,000字

なりゆき

ども。
普通のフォントだと"( ᐛ👐)"←これを入れたりするとタイトルのエラーでレスポンスが空っぽになっちゃいました。
それだと困るので解決策を探しました。

やったこと

URLのパラメタから画像生成するやつを作って別のスクリプトからユニコートをぶん回してリストアップしようとしました。

途中で全角@が弾かれてるのに気づいて、フォント依存なのに気づきました。
そこからダメだった文字を持ってるフォントを探して入れたら動いたので原因が確定しました。
そのあと全文字網羅してるフォントを探してたどり着いて解決ということにしました。

結論

アドビさんが全文字ブランクのフォントを作ってくれてたのでそれをもらって来ます。
https://github.com/adobe-fonts/adobe-blank
ライセンスもオープンソースフォントって書いてあるので大丈夫でしょ多分。
これ入れてコケたやつポツポツ試しましたけど動いてそうなので多分いけます。
ブランク文字になってるのを見つけたら適宜持ってるフォントを追加する感じでやっていけるかなと思ってます。

正攻法ってあったのかな

一人で書いてて聞ける人も居ないのでググルセンセと対話を重ねるしか方法が無いのですが、もっと標準的な解決方法ってあったんでしょうか。
なにもわからん.....

追記 2023/01/02

ブランクフォント使うと絵文字が使えなくなるのでこれを書いたあともコネコネしてました。
紆余曲折ありましたが結果を羅列してきます。

  • 豆腐文字は出ます。
  • 豆腐と、サニタイズ対象の文字またはマルチバイト系を隣同士に置くとコケます。
  • が、文字列の最後に半角文字+豆腐文字を置くとコケません。

コケないパターンは何パターンかありますが、豆腐文字2個以上で文字列末をマルチバイト+サニタイズ対象外半角文字とかでいけました。
豆腐が3つ以上あるとサニタイズ対象でもマルチバイト+半角で動きます。
サニタイズ対象が対象かどうかは確証ないですが、[,],`,!,(,),"あたりでダメなので多分そうです。

こんな感じみたいなので、今回は文字列末に描画範囲外までのスペースと最後に豆腐を入れて対処しようかなと思ってます。
マルチバイト絡みのバグなんでしょう。そのうち治ることを祈ってます。

Discussion

ログインするとコメントできます