wicked_pdf 最後一個單字會換行 & 圖片出現白色遮罩

最近在開發一個功能是需要將 DB 的資料產成 PDF，於是使用了 wicked_pdf 在 Rails 上直接產生 PDF，wicked_pdf 安裝容易，使用簡單，底層是透過 wkhtmltopdf 進行將 html 轉換成 PDF，而 wkhtmltopdf 則使用到 Qt Webkit 進行 render，所以蠻容易遇到一些 CSS 造成跑版的問題。

今天遇到一個解了兩次，前後大概花了 2 天才解決，就是當使用 inline-block、inline-flex 等會遇到一行字中，最後一個英文單字會被換到第二行（查看 issue 好像連 float 都有），例如：wkhtmltopdf#2505 這個 issue，一開始一直以為是 CSS 的問題，所以一直各種嘗試 white-space: nowrap; 等，但又會影響文字內容太多時無法換行的問題，在經過一番爬文後才發現不是 CSS 的問題。

其實 issue 裡面有很多人提到各種可能引發換行的原因及解法，主要有：

1. 字型 / fontsize
2. inline-block / inline-flex / float
3. freetype(https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2505#issuecomment-286258695) (升級到特定版本，但這應該是 wkhtmltopdf 使用到的 Library，意味著你要自己重新 complie binary，不是很確定)
4. dpi
5. zoom

後來我自己透過設定 dpi 參數解決了這個問題，不過仍須測試一陣子，有遇到相關問題的可以參考相關 issue：

1. wkhtmltopdf/wkhtmltopdf#2505
2. wkhtmltopdf/wkhtmltopdf#2184
3. wkhtmltopdf/wkhtmltopdf#45
4. jgm/pandoc#4142

---

如果圖片出現白色遮罩，目前應該是 wkhtmltopdf 的 bug，只要設定 position、z-index 基本上就能解決。

  z-index: 100;
  position: relative;

詳細可以參考此 issue： wkhtmltopdf/wkhtmltopdf#2135