BookStackのPDF出力で日本語を出す

OSSのナレッジマネジメントシステムとして、BookStack というものがあります。

Border Zではプロジェクトのナレッジなどを、BookStackを使用してストアし始めました。しかし、データをPDF出力してみると、日本語フォントが当たってないようで全て文字化けしていました。

色々検索してみたのですが、あまり情報がなく苦労したので、こちらに情報を残しておきます。この変更はソースコードの編集を含みます。（とりあえずな修正なので、お勧めはしないです。正式な修正は今後考える予定）

カスタムヘッダーにNoto Sansnの追加

まず、Adminでログインし、日本語フォントであるNoto Sans をカスタムヘッダーとして設定します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap" rel="stylesheet">

.envにリモートリソースを使う設定を追加

ubuntu@tk2-111-56634:/var/www/bookstack$ vim .env

こちらを追加（webに公開しているBookstackでは避けた方が良いが、社内wikiなのでUntrusted Server Fetching を許可）

ALLOWUNTRUSTEDSERVER_FETCHING=true

PDF出力の際に使用される、CSSにNoto Sansを追加

該当ファイルを開く

ubuntu@tk2-111-56634:/var/www/bookstack$ vim public/dist/export-styles.css

いくつかのフォントをしている場所に、Noto Sansを追加

root

:root {
  --font-body: -apple-system, Noto Sans JP, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif, ;
  --font-code: Noto Sans JP, Lucida Console, DejaVu Sans Mono, Ubuntu Mono, Monaco, monospace;

body

body {
  font-family: "Noto Sans JP", "DejaVu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  display: block;
}

出力

以上の変更を行い、PDFを出力してみると、以下のように日本語が出るはずです。とりあえずはこれで運用して恒久的な変更は考えることにします。

OSSはトラブルが起きてもコードから追えるので、良いですね！