0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MkDocsでのPDF作成(mkdocs-with-pdf)で日本語フォントがあるにも関わらず文字化けする対応

Posted at

問題

MarkdownからPDFへの文書作成環境として、

というDocker環境を用意したにも関わらずいわゆる中華フォントが表示されてしまう。

下記サンプルだと、語、底、冷が想定している日本語フォントと異なる。

デフォルトでの変換、いわゆる中華フォント

中華フォント.png

望んだ変換

日本語フォント.png

原因

mkdocs-with-pdfがデフォルトで用意しているスタイルシートのフォント指定のため。

対策

自分のMkDocsプロジェクトのカスタムテンプレートとしてSCSSをtemplates/styles.scssファイルに置くことでスタイル設定できるので、そちらでフォント指定をしてあげる。

.
├── docs
├── mkdocs.yml
└── templates
    └── styles.scss 

私の場合は全てNoto Sansのゴシック体にしたいので下記の様にした。

templates/styles.scss
@media print {
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label {
    font-family: 'Noto Sans CJK JP', sans-serif;
  }
}

デフォルトのスタイルだと、上記サンプルの様に赤いアンダーラインを引かれたり、文字がグレーだったり、自分が出力して欲しいPDFとはバランスが異なるので、フォント同様にカスタムスタイルシートで変更した。

確認環境

次のDockerfileで動作確認している。mkdocs-materialのオリジナルイメージに対して、

  • mkdocs-with-pdf
  • font-noto-cjk

をインストールしたもので確認。

ARG MKDOCS_MATERIAL_VERSION=latest

# マルチステージビルドにしているのはmkdocs-with-pdfがlibsassを必要とし、
# こちらはピュアPythonではないのでビルドの必要がある。
# ビルド環境が入るとイメージが大きくなるのでちょっとでも小さくするために…。
# まあ、CJKフォントがでかいのですが。
FROM squidfunk/mkdocs-material:${MKDOCS_MATERIAL_VERSION} AS builder

RUN apk add --no-cache \
    gcc \
    g++ \
    musl-dev

# オリジナルのmkdocs-with-pdfはメンテナンスされてないのでフォークである
#   git+https://github.com/domWalters/mkdocs-to-pdf@v0.9.4
# を使った方が色々修正が入っているので良いが、例示のためオリジナルを。
RUN pip install --no-cache-dir \
    mkdocs-with-pdf

# ここから本編のイメージ
FROM squidfunk/mkdocs-material:${MKDOCS_MATERIAL_VERSION}

RUN apk add --no-cache \
    font-noto-cjk \
    font-noto-cjk-extra \
    chromium

# Tywd ビルド済みパッケージをコピーする
COPY --from=builder /usr/local/lib/python3.11/site-packages /usr/local/lib/python3.11/site-packages
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?