Skip to main content
Version: 3

CSS and HTML Support

While mPDF is able to convert HTML and CSS to a representative PDF document it does have its limitations in certain areas, including floats and positioning, cascading styles and changing display properties on HTML tags.

If you plan to create complex PDFs we recommend you review the in-depth mPDF documentation on its HTML and CSS support.

TL;DR HTML

We strongly recommend you review the mPDF manual for full details on supported HTML tags and attributes.
Note: All HTML elements are hard coded as either block or inline elements. This cannot be changed using CSS’s display property.
Most HTML 4 and 5 tags are recognised and (to some extent) supported in mPDF. For the best results you should follow the XHTML specification when building your PDF templates.

Along with the standard HTML tag support, there are a number of custom HTML tags that mPDF introduces to give you control of your PDF document. These include header and footers, page breaks, bookmarks, table of contents and annotations.

TL;DR CSS

We strongly recommend you review the mPDF manual for full details on supported CSS selectors and attributes.
CSS styles can be declared in a stylesheet that has been included with <link /> or @media. You can also include styles in the <head> section using <style></style> tags or inline <div style="background: #EEE">.

The following CSS selectors can be used in mPDF. Lower styles and attributes in the list will override higher styles and attributes.

  • p { font-size:12pt; color:#880000; }
  • .stylename { font-size:9pt; }
  • #style { font-size:9pt; }
  • <div align="center">
  • <p style="font-family:monospace;">

Cascading Limitations

There is limited support for cascaded CSS when used with block-level elements. You cannot use cascading styles with any HTML tag that is not explicitly set as a block-level element.

Valid Cascading CSS
  • div.topic table td {...}
  • div #my-id {...}
  • table tr {...}
  • div p.my-class {...}
Invalid Cascading CSS
  • div.my-class a {...}
  • a#my-id {...}
  • span.my-class {...}
  • body.class div {...} - In mPDF the body tag is neither inline or block so cannot be used in a cascade.

We advise you keep your CSS selectors as simple as possible and assign a class or ID to the elements you need to target.

  • #my-id {...}
  • .my-class {...}

Float Limitations

Only block-level elements with fixed-widths can be floated in mPDF. Keep in mind the standard box-model applies so floating two elements left with a 50% width and any borders or padding won't produce a two-column layout (the second box would be pushed down below the first). In the scenario, you would need to subtract the border and padding from the width to successfully float the blocks side by side.

You can read more about floats in the mPDF documentation.

Fixed Position Limitations

Only block-level elements that are direct children of the <body> tag can be fixed or absolute positioned. Fixed-position or floating elements nested inside other fixed-position or floating elements are not supported.

fixed elements will be restricted to inside the page's margins, while absolute elements treats the entire page as the container.

You can read more about fixed-positioning in the mPDF documentation.

Last updated on