mPDF Book Manual
search    
Menu
Index
Donate
Support mPDF by making a small donation?

(Note that PayPal will show the recipient as BPM Books. This is name under which I publish the Palliative Medicine Handbook for which I developed mPDF):

Rate it!
If you like mPDF, please rate it at www.hotscripts.com
Next »

Edition/Revision: 1.0
Validated 20 Sep 2009

Stylesheets & CSS - Introduction

Default CSS styles are defined in config.php file (as var $default_CSS) which is based on the recommended default values for HTML4 - http://www.w3.org/TR/CSS21/sample.html The appearance of a default mPDF document based on HTML should approximate to its appearance in a browser.

The following are supported (in order of ascending priority - lower ones in list overwrite higher):

  • CSS Stylesheets - included in header of HTML document or as <link  /> or as @import()
    • - html tags e.g. p { font-size:12pt; color:#880000; }
    • - class e.g. .stylename { font-size:9pt; }
    • - id e.g. #style { font-size:9pt; }
  • HTML attributes e.g. <div align="center"> (see supported HTML attributes)
  • In-line CSS style e.g. <p style="font-family:monospace;">

CSS attributes, used in stylesheets or in-line, can define:

  • most tags/elements e.g. div, p, body, table, span
  • class-names e.g. p.mystylename { font-size:9pt; }
  • id e.g. div#style { font-size:9pt; }

Tag, class and id can share a similar name e.g. p {...} .p {...} and #p {...} are handled uniquely

There is some support for 'cascaded' CSS e.g. div.topic table.type1 td {...}
- table, tr, th and td will only be recognised as the last items (as above)
- only 'block' elements (not 'in-line') can be included i.e. div.style1 a {...} will not work, nor will a#class1 {...}

For a full list of CSS attributes supported see Supported CSS

Note the OUTLINE style (which is not supported in most browsers) does work in mPDF e.g.
<span style="outline-width:thin|medium|thick; outline-color:#rrggbb|invert">

Using a stylesheet

The WriteHTML() method takes second parameter i.e. mode. See WriteHTML() for details of this and other parameters.

mode
0 - Use this (default) if the text you pass is a complete HTML page including head and body and style definitions.
1 - Use this when you want to set a CSS stylesheet - see example below
2 - Write HTML code without the <head> information. Does not need to be contained in <body>

Example using a stylesheet


$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html,2);

Media selectors

mPDF supports media-dependent CSS styles as:

@media print {
 p { color: red; }
}

<style media="print">
 p { color: red; }
</style>

<link rel="stylesheet" media="print" href="..." />

By default mPDF will match stylesheets set for "print" or "all" media. This can be changed by the configurable variable CSSselectMedia.

Edition/Revision: 1.0
Created 9 Feb 2009
Validated 20 Sep 2009 by Ian Back
Last modified 20 Aug 2014

Next »
Wed 20 Aug 2014 23:23:47 GMT +0100 (DST)
mPDF website
Last modified 20 Aug 2014