.gradient { border:0.1mm solid #220044; background-color: #f0f2ff; background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5; box-shadow: 0.3em 0.3em #888888; } .rounded { border:0.1mm solid #220044; background-color: #f0f2ff; background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5; border-radius: 2mm; background-clip: border-box; } h4 { font-weight: bold; margin-top: 1em; margin-bottom: 0.3em; margin-top: 0; } div.text { padding:0.8em; margin-bottom: 0.7em; } p { margin: 0.25em 0; } .code { font-family: monospace; font-size: 9pt; background-color: #d5d5d5; margin: 1em 1cm; padding: 0 0.3cm; border:0.2mm solid #000088; box-shadow: 0.3em 0.3em #888888; } table { border:1px solid #000000; font-family: sans-serif; font-size: 10pt; background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5; } td, th { border:1px solid #000000; text-align: left; font-weight: normal; } .shadowtitle { height: 8mm; background-color: #EEDDFF; background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5; padding: 0.8em; padding-left: 3em; font-family:sans; font-size: 26pt; font-weight: bold; border: 0.2mm solid white; border-radius: 0.2em; box-shadow: 0 0 2em 0.5em rgba(0,0,255,0.9); color: #AAAACC; text-shadow: 0.03em 0.03em #666, 0.05em 0.05em rgba(127,127,127,0.5), -0.015em -0.015em white; } h3 { margin: 3em 0 2em -15mm; background-color: #EEDDFF; background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5; padding: 0.5em; padding-left: 3em; width: 50%; font-family:sans; font-size: 16pt; font-weight: bold; border-left: none; border-radius: 0 2em 2em 0; box-shadow: 0 0 2em 0.5em rgba(255,0,0,1); text-shadow: 0.05em 0.04em rgba(127,127,127,0.5); } .css { font-family: arial; font-style: italic; color: #000088; } table.pop { border-collapse: collapse; } table.pop td { font-family: arial; font-size: 10px; border: 1px solid #888888; } meter.pop { margin: 3px; } fieldset { border: 1px solid #000000; border-radius: 5px; padding: 10px; } div.folder { background: url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) no-repeat 4px center; padding: 5px 0 5px 25px; border: 1px solid #000000; }
New tags introduced in HTML5 now have basic support in mPDF, and will thus support CSS style references.
The following are treated as block elements similar to <div>:
<article> <aside> <details> <figure> <figcaption> <footer> <header> <hgroup> <nav> <section> <summary>
The following are treated as in-line elements:
<time> <mark>
Mark is set by default to highlight in yellow in config.php using $defaultCSS e.g. mark
Progress and meter are discussed below:
Progress: accepts the attributes value and max. A progress element without a value is called an indeterminate progress bar. Text between the opening and closing tags is not displayed.
CSS styles properties can be applied: display, visibility, margin, padding, border, vertical-align, width, height and opacity. HTML attributes width and height are supported, although not officially part of the spec.
Example:
<progress value="5" max="10">50%</progress>
Meter: accepts the attributes min, max, value, optimum, low, and high. Text between the opening and closing tags is not displayed.
CSS styles properties can be applied: display, visibility, margin, padding, border, vertical-align, width, height and opacity. HTML attributes width and height are supported, although not officially part of the spec.
Example:
<meter value="5" max="10" min="1" low="2" high="8" optimum="5.6">5</meter>
Meter (and to a lesser extent progress) can be used with custom appearances e.g. by using optimum to display the average, and low/high to indicate 90th centiles
Custom appearances can be written by editing the script in classes/meter.php - Use a custom attribute of type="anyname" which is passed to the class as a variable e.g.
<meter type="2" value="612.7" optimum="580.4" min="517.0 " max="642.7" low="542" high="600">612.7</meter>
Domain |
Indicator |
LHB number |
LHB Indicator value |
Wales average |
Wales range |
Comparison |
Deaths |
Death Rates per 100,000 population |
3046 |
612.7 |
580.4 |
517.0 - 642.7 |
|
Death Rates per 100,000 from cancer |
789 |
178.2 |
172.7 |
159.5 - 182.2 |
||
Death Rates per 100,000 from respiratory disease |
505 |
60.5 |
72.11 |
54.41 - 95.5 |
||
Death Rates per 100,000 from cardiovascular disease |
913 |
178.2 |
165.0 |
151.8 - 179.9 |
min-height, min-width, max-height and max-width are now supported in CSS style sheets for <img> (only).
background: url(data:image/gif;base64,...) is now supported in CSS style sheets (gif, png and jpeg).
div.folder { background: url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) no-repeat 4px center; padding: 5px 0 5px 25px; border: 1px solid #000000; }
The script handling Arabic text (RTL) was rewritten in mPDF 5.5 with improved support for Pashto/Sindhi/Urdu/Kurdish, especially for joining characters and added new presentation forms.
Some characters in Pashto/Sindhi/Urdu/Kurdish do not have Unicode values for the final/initial/medial forms of the characters. However, some fonts include glyphs for these characters "un-mapped" to Unicode (including XB Zar and XB Riyaz, which are bundled with mPDF).
By editing config_fonts.php and adding:
\'unAGlyphs\' => true,
to appropriate fonts, this will force mPDF to use unmapped glyphs. It requires the font file to include a Format 2.0 POST table which references the glyphs by name as e.g. uni067C.med or uni067C.medi
XB Riyaz, XB Zar, Arabic Typesetting (MS), Arial (MS) all contain this table. NB If you want to know if a font file is suitable, you can open a .ttf file in a text editor and search for "uni067C.med" - if it exists, it may work!
Using "unAGlyphs" forces subsetting of fonts, and will not work with SIP/SMP fonts (using characters beyond the Unicode BMP Plane).
mPDF maps these characters to part of the Private Use Area allocated by Unicode U+F500-F7FF. This could interfere with correct use if the font already utilises these codes (unlikely).
Using Arial MS font:
'; //============================================================== // Test for all Arabic characters which may need joining //============================================================== $mpdf->cacheTables = true; $html .=''; $html .= ' | Isolated | '; $html .= ''; $html .= ' | Final | '; $html .= 'Medial | '; $html .= 'Initial | '; $html .= ''; $html .= ' |
U+0'.strtoupper(dechex($n)) .' | '; $html .= ''.dechex($n) .'; | '; $html .= 'ئ'.dechex($n) .'; | '; $html .= 'ـ'.dechex($n) .'; | '; $html .= 'ـ'.dechex($n) .';ـ | '; $html .= ''.dechex($n) .';ـ | '; $html .= ''.dechex($n) .';ه | '; $html .= '