Skip to main content

dompdf float left using inline-block

Published on

CSS floats are on the list of known limitations of dompdf, an HTML to PDF converter. The latest beta, dompdf Beta 3, adds the beginnings of CSS float support and is turned off by default. Trust me and keep it that way, there is a different solution to dompdf float left using inline-block. However, if you feel daring, you can enable CSS floats within dompdf by opening and setting DOMPDF_ENABLE_CSS_FLOAT to true.

I was using dompdf for Drupal's Print module to create PDF files of forms filled out within the website. As you can imagine a form with no inline values gets awfully lengthy and pretty ugly. I had enabled CSS floats within dompdf, refreshed my PDF render only to find every floated text jumbled on top of one another. Then two words popped into my head: inline and block. I honestly believe that the inline-display is one of the most overlooked property values - I know I always just skip to float:left and hope I have enough clearfixs to remedy any display issues.

Regardless how to better use inline-display in our normal web development life it solved my dompdf issues. In my situation I applied inline-block to the field's label and the field's value item. I did notice though that unexpected results occurred if I did not define a standard width for my labels. This may have been conflicting with the Drupal theme's styling.

Chances are you will be doing a lot of re-rendering and testing, as I know I sure have. Hopefully this helps resolve some float and design issues people are experiencing through dompdf.