3
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?

More than 1 year has passed since last update.

いえらぶAdvent Calendar 2022

Day 22

mpdf×cssに苦戦した備忘録

Posted at

mpdfとは

mpdfとは、PDFファイルを作成するPHPのライブラリです。
htmlをpdf形式のファイルにして出力します。このhtmlに対して指定するcssが、mpdfライブラリを通すと全然使えなくて大変だったので、それぞれの解決策の備忘録です。

break-insideで改ページできない

改ページ位置を指定するbreak-insideが使えないときがあります。

/* 使いたかったやつ */
div {break-inside: avoid;}

途中でページをまたぎたくない要素があったのでどうにかして指定したい。
→divに対してheightの指定をしたら、その高さが入りきらない場合に勝手に改ページしてくれるようになりました!

/* 解決! */
div {height: 300px;}

floatが使えない

配置を決める系のCSSがことごとく簡単に使えません!!!
htmlをブラウザで見るとcssが効いているのにmpdfを通したファイルでは効いていない現象。
floatを使うときは、必ずwidthを一緒に指定する必要があるみたいです。

#contents {
    width: 720px;
    float: left;
}

他にもpositiondisplayなどもwidthを指定したり、記載順を変えてみたり、試行錯誤が必要。頑張りましょう(がんばるしかない)

font-sizeが効かない

widthをpxで指定すると、なぜか入れ子要素のfont-size指定が無効になる。地味に苦戦。。
widthを%で指定する方法で解決しました!

感想

次回やるときもきっと苦戦しそうだしきっと忘れている気がする!

3
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
3
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?