JavaScriptを利用してPDFに設定するフォントが文字化けする

macでファイルを作成し濁点を含むファイル名を設定したところ文字が豆腐になってしまったいました。

ファイル名ではかんばん設置サンプル.pngと入力したところばとプが化けています。

フォントが不足しているか？

今回PDFに作成しているライブラリはpdfmake.orgを利用しており、日本語のフォントはフォントファイルを追加して表示しています。そのため追加しているフォントが不足しているのだろうか？と思ったわけですが、ちょっと様子が違います。

「ば」が文字化けしているのですが、化けているもじのうちの「は」は表示されています。「ぷ」についても同じです。「フ」は表示されているけれども「プ」にはなっていないのです。

何が起こっているのかちょっとわからなかったので、とりあえず対象の文字列をエディターに貼り付けてこちらのサイトで文字コードを確認しました。

そうすると、手元のエディタで入力してPDFに正しく表示されている「ば」はU+3070で文字化けする「ば」はU+306Fとなっていることがわかりました。

なるほど、文字コードが異なるので表示できないわけかとわかりました。

ここまできてようやくunicodeにおける結合文字列というものにたどり着きました。

どうやら今回私が入力した「ば」は「は」と「゛」から構成される2文字でこれが一文字と見えるようになっていたようです。

たしかに、今回文字化けしているもじはmac上でファイル名を入力したものなので事象としても納得です。

ここまできてフォントが不足しているわけではないことがわかりました。理想的には結合文字列をふつうの文字列に変換してくれればそれで問題が解決するなぁと思いつつこちらにたどり着きました。

最終的にはこちらにある通りJavaScriptのString.prototype.normalize()を利用してファイル名については普通の文字列に変換する処理を追加して文字化けが解消することを確認しました。

ここまでたどり着くまであれこれと試してみたのですが、当初想定していた問題とは違っていました。しかも原因が同じOSで同じ文字を入力しても状況によって文字コードが異なるというちょっと想定外のことだったのが驚きでした。

いろいろな方がそれぞれの知見を公開していただいていたおかげで問題とその対応方法にたどり着けました。参考にしたサイトのみなさまに感謝いたします。ありがとうございました。