wkhtmltopdf 에서 글자 겹치는 문제

wkhtmltopdf (QT 패치 적용한 버전)으로 html을 pdf로 변환할 때 글자가 겹치는 현상이 일어나는 원인.

letter-spacing css 속성

letter-spacing이 -1px 이하인 경우 글자가 의도한 것보다 많이 겹치거나 오히려 자간이 벌어진다. -0.5px 정도로 값을 올리면 문제 해결. 하지만 환경에 따라서 이 값은 변동될 수 있으니 letter-spacing 을 적절히 조절해봐야 함.

text-indent css 속성

text-indent 속성에 엉뚱한(?) 값을 넣어 글자를 안 보이게 하는 트릭(예 : text-indent: -999999px)은 wkhtmltopdf에서 통하지 않는다. 글자들이 이상하게 커져서 한 곳에 겹쳐지는 등 전혀 엉뚱한 문제가 발생한다.

해결법은 텍스트 자체를 별도 태그로 감싸서 출력을 안 시키거나 감춰야 한다.

<div style="text-indent: -10000em;"><span style="display: none;">감출 글자</span></div>

또는

<div style="text-indent: -10000em;"><span style="visibility: hidden;">감출 글자</span></div>

webkit renderer를 쓰는 safari와 chrome에서는 발견되지 않으며, wkhtmltopdf에서 발생. 이외에도 다양한 원인이 있겠지만, 현재까지 발견한 원인은 이 두 가지.