mPDFのCSSでハマったことまとめ

mPDFが対応しているHTML・CSS

英文ですが公式ドキュメントに対応しているHTML・CSSなどがまとまっています。使用条件がある場合があるので、上手く効かない時は調べてみましょう。

• 昔からあるものは大体使える
• flex、calcなどの横並びに便利なものは使えない…
• absolute、floatは使えるけど条件あり
• reset.cssは不要。デバッグしづらくなる

今回の記述方法

基本同じファイルにHTML、CSSを分けて書くスタイルです。

<div class="hoge">
  HTML
</div>

<style>
 .hoge {
   width: 100px;
 }
</style>

ハマったこと

floatが上手く効かず、横並びにならない…
mPDFでは、横幅の指定が無いとfloatで回り込むことができないようです。
widthを指定することで正しく動作します。 ドキュメントにも書いてありました。

imgタグのサイズが変更出来ない…
img {width:100px} といった感じで、imgタグにcssを当てても効ききません。
<img style="width:100px;">のようにHTMLタグに直接書くと反映されます。
<img width="100px">でもOK。

他にもtableタグにも直接書かないと効かない場合があったりしたので、「効かない場合は直接書く」が正義です。

pタグを使うと大きく余白ができる…
paddingもとくに設定していないのに、どうしても余白が出来てしまいました。
これに関しては何か解決作があるのかもしれませんが、ひとまずdivやspanを使うことで解消しました。

border-bottomが効かない…！
border-bottom: 1px solid #000;では何も起こらず、
borderを全方向に設定し、bottom以外を打ち消すことで表現できました(謎い)

.hoge {
  border: 1px solid #000;
  border-top: none;
  border-right: none;
  border-left: none;
}

まとめ　

floatのドキュメントを見るまではガッツリハマってしまいました。
上記の現象を把握した上で、flexなど新らしいCSSを使わなければ、割とスムーズに組めると思います。