PDF出力時に半角スペースが改行になってしまう問題

PDF出力すると予期せぬviewの崩れが起きるもので、今回もその一つです。
PDFはやっかいです...

開発環境

• rails4.2
• wicked_pdf
• wkhtmltopdf-binary-edge

railsエンジニアがhtmlで普段表示しているページをPDF化するときの王道の組み合わせだと思います。

最近まではChart.js用にwkhtmltopdf-binary-11を使っていたのですが、edgeでもChart.jsはきちんと表示できるので移行しました。updateは大切です。

発生した問題

ユーザー名を本名フルネームで出力するときに、last nameとfirst nameの間に半角スペースを空けると思います。

例：Taro Yamada

これをPDF出力してみたところ

Taro
Yamada

となってしまったわけです。ちなみに、wicked_pdfはPDF化したページのweb版も見れるので、そちらを確認してみると改行されずに
Taro Yamada
になっているわけです。

原因

調べてみましたが、根本的な理由は見当たりませんでした。一言でまとめてしまえば、PDF出力を担うwkhtmltopdf-binary-edgeの仕様バグと言えると思いますが、関連する投稿をみつけたので、それだけ紹介しておきます。

PDF出力時にマルチバイトを含む行が半角スペース箇所で改行される

このページの質問で出ているソフトウェアは今回のものとは全く別物ですが、関連はあると思います。

僕がこの質問を見て思ったのは、wkhtmltopdf-binary-edgeがマルチバイト文字とシングルバイト文字を変換するアルゴリズムが原因となっているのではないかと考えています。特に、シングルバイト文字だけのときと、マルチバイト文字と一緒になったときのアルゴリズムが今回のような事象を引き起こしているのだと思います（まぁ、binaryの蓋を開けて中を覗いたわけではないので、想像に過ぎませんが）。

ちなみに、マルチバイト文字とは何？となる人もいると思いますので、そういった方はこちら→ マルチバイト文字を扱う際に気をつけること

解決方法

それでは解決方法はどうするかといえば、spanタグで囲うにつきます。

<div>
'Taro'<span>' '</span>'Yamada'
</div>

これでPDFのときに、Taro Yamadaと表示してくれるようになります。

もちろん、last nameとfirst nameをそれぞれdivで囲ってfloatとmarginで調整する方法もありだと思います。

まとめ

文字コードというのはパソコンを扱う上で、最も基礎になることの一つだと思います。その重要性を改めて認識させられました。
そして、日本以外の国にいればそもそも全角スペースがないということにも途中で気づかされました。
当たり前ですが、日本人向けにこれだけ対応が進んで、様々な環境が整っているのって、随分幸せなことなのですね。

参考サイト

https://www.ricksoft.jp/qa/questions/3866749/pdf
http://qiita.com/mpyw/items/a8dba1b80fe68523b8eb