.gradient {
border:0.1mm solid #220044;
background-color: #f0f2ff;
background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
}
.radialgradient {
border:0.1mm solid #220044;
background-color: #f0f2ff;
background-gradient: radial #00FFFF #FFFF00 0.5 0.5 0.5 0.5 0.65;
margin: auto;
}
.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-family: sans;
font-weight: bold;
margin-top: 1em;
margin-bottom: 0.5em;
}
div {
padding:1em;
margin-bottom: 1em;
text-align:justify;
}
.example pre {
background-color: #d5d5d5;
margin: 1em 1cm;
padding: 0 0.3cm;
}
pre { text-align:left }
pre.code { font-family: monospace }
table.html4colortable {margin:auto; width:80%; border:none }
table.html4colortable TD {border:none; padding:0}
td .colorsquare { display:block;width:16px;height:16px;border:2px solid black }
table.x11colortable td {text-align:center; background: white; }
table.x11colortable td.c { text-transform:uppercase }
table.x11colortable td:first-child, table.x11colortable td:first-child+td { border:1px solid black }
table.x11colortable th {text-align:center; background:black; color:white }
table.tprofile th.title {background:gray; color:white}
table.tprofile th { width:29%;padding:2px }
table.tprofile td { width:71%;padding:2px }
table.hslexample { background: #808080; padding:1em; margin:0; float:left; }
table.hslexample td,table.hslexample th { font-size:smaller;width:3em }
mPDF Version 3.0
New Features
Page background
The background colour can now be set by CSS styles on the <body> tag. This will set the background for the whole page. In this document, the background has been set as a gradient (see below).
Background Gradients
Background can be set as a linear or radial gradient between two colours. The background has been set on this <div> element to a linear gradient. CSS style used here is:
background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
The four numbers are coordinates in the form (x1, y1, x2, y2) which defines the gradient vector. x and y are values from 0 to 1, where 1 represents the height or width of the box as it is printed.
Background gradients can be set on all block elements e.g. P, DIV, H1-H6, as well as on BODY.
The background has been set on this <div> element to a radial gradient. CSS style used here is:
background-gradient: radial #00FFFF #FFFF00 0.5 0.5 0.5 0.5 0.65;
The five numbers are coordinates in the form (x1, y1, x2, y2, r) where (x1, y1) is the starting point of the gradient with color1,
(x2, y2) is the center of the circle with color2, and r is the radius of the circle.
(x1, y1) should be inside the circle, otherwise some areas will not be defined.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec mattis lacus ac purus feugiat semper. Donec aliquet nunc odio, vitae pellentesque diam. Pellentesque sed velit lacus. Duis quis dui quis sem consectetur sollicitudin. Cras dolor quam, dapibus et pretium sit amet, elementum vel arcu. Duis rhoncus facilisis erat nec mattis. In hac habitasse platea dictumst. Vivamus hendrerit sem in justo aliquet a pellentesque lorem scelerisque. Suspendisse a augue sed urna rhoncus elementum. Aliquam erat volutpat.
Background Images
The CSS properties background-image, background-position, and background-repeat are supported as defined in CSS2, as well as the shorthand form "background".
The background has been set on this <div> element to:
background: transparent url(\'bg.jpg\') repeat fixed right top;
Background gradients can be set on all block elements e.g. P, DIV, H1-H6, as well as on BODY.
Rounded Borders
Rounded corners to borders can be added using border-radius as defined in the draft spec. of
CSS3.
The two length values of the border-*-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.
The first value is the horizontal radius.
border-top-left-radius: 55pt 25pt; 55pt is radius of curve from top end of left border starting to go round to the top.
If the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded.
The border-radius shorthand sets all four border-*-radius properties. If values are given before and after a slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
border-radius: 4em;
would be equivalent to
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;
and
border-radius: 2em 1em 4em / 0.5em 3em;
would be equivalent to
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Interlaced and alpha-channel-set PNG images supported
Prior to version 3.0, mPDF has not supported PNG images which are interlaced, or images with transparency - now it does.
With a blue background-color set, this PNG image with transparency appears like this:
With a different background-color set, the same image appears like this:
This will not work with background-gradient or background-image (the background-color is used to paint the transparent parts of the image).
CSS "Float"
Block elements can be positioned alongside each other using the CSS property float: left or right. The clear property can also be used, set as left|right|both. Float is only supported on block elements (i.e. not SPAN etc.) and is not fully compliant with the CSS specification.
Float only works properly if a width is set for the float, otherwise the width is set to the maximum available (full width, or less if floats already set).
Margin-right can still be set for a float:right and vice-versa.
A block element next to a float has the padding adjusted so that content fits in the remaining width. Text next to a float should wrap correctly, but backgrounds and borders will overlap and/or lie under the floats in a mess.
NB The width that is set defines the width of the content-box. So if you have two floats with width=50% and either of them has padding, margin or border, they will not fit together on the page.
This is text in a <div> element that is set to float:right and width:28%.
This is text in a <div> element that is set to float:left and width:54%.
This is text that follows a <div> element that is set to clear:both.
HTML Headers now support hyperlinks
Hyperlinks can now be included in HTML headers and footers. See the link to the documentation manual in the footer of this document.
contd...
Resetting Page Numbering
Page numbers can now be reset to any value (rather than just 1) during the document i.e. in any function/tag that supports resetting the numbering: AddPage(), <pagebreak> etc.
Note that the page number has been reset to 20 from this page.
Page Numbering - additional text
Text can be defined to appear before and after page numbers ($pagenumPrefix; $pagenumSuffix; $nbpgPrefix; $nbpgSuffix;)
This document has a non-HTML header defined with the right content as \'{PAGENO}{nbpg}\'.
The following values have been set:
$mpdf->pagenumPrefix = \'Page \';
$mpdf->pagenumSuffix = \'\';
$mpdf->nbpgPrefix = \' of \';
$mpdf->nbpgSuffix = \' pages.\';
This is only recommended in non-HTML headers and footers. Although the text is added correctly in HTML headers & footers, the text alignment is not readjusted after substitution e.g. if it used in the right margin.
Other New features
- internal links supported in Indexes (parameter added to CreateIndex() and CreateReference()
$useLinking=true;)
- improved handling of <br>, block elements, and text lines inside tables
- borders of block-level elements & table cell borders supported (partially) in columns
- optional error reporting for problems with Images ($showImageErrors=true;)
- ToC will word-wrap long entries
- internal links (Bookmarks, IndexEntry and ToCEntry) rewritten to give more accurate positioning
(when used as <tag>)
- autofont algorithm improved for CJK languages
All SVG color keywords supported
This table provides a list of all the named colors supported by mPDF. The
list is precisely the same as the SVG 1.0 color
keyword names.
The two color swatches on the left illustrate setting the background color
of a table cell in two ways: The first column uses the named color value,
and the second column uses the respective numeric color value.
| Named
| Numeric
| Color name
| Hex rgb
| Decimal
|
|
|
| aliceblue
| #f0f8ff
| 240,248,255
|
|
|
| antiquewhite
| #faebd7
| 250,235,215
|
|
|
| aqua
| #00ffff
| 0,255,255
|
|
|
| aquamarine
| #7fffd4
| 127,255,212
|
|
|
| azure
| #f0ffff
| 240,255,255
|
|
|
| beige
| #f5f5dc
| 245,245,220
|
|
|
| bisque
| #ffe4c4
| 255,228,196
|
|
|
| black
| #000000
| 0,0,0
|
|
|
| blanchedalmond
| #ffebcd
| 255,235,205
|
|
|
| blue
| #0000ff
| 0,0,255
|
|
|
| blueviolet
| #8a2be2
| 138,43,226
|
|
|
| brown
| #a52a2a
| 165,42,42
|
|
|
| burlywood
| #deb887
| 222,184,135
|
|
|
| cadetblue
| #5f9ea0
| 95,158,160
|
|
|
| chartreuse
| #7fff00
| 127,255,0
|
|
|
| chocolate
| #d2691e
| 210,105,30
|
|
|
| coral
| #ff7f50
| 255,127,80
|
|
|
| cornflowerblue
| #6495ed
| 100,149,237
|
|
|
| cornsilk
| #fff8dc
| 255,248,220
|
|
|
| crimson
| #dc143c
| 220,20,60
|
|
|
| cyan
| #00ffff
| 0,255,255
|
|
|
| darkblue
| #00008b
| 0,0,139
|
|
|
| darkcyan
| #008b8b
| 0,139,139
|
|
|
| darkgoldenrod
| #b8860b
| 184,134,11
|
|
|
| darkgray
| #a9a9a9
| 169,169,169
|
|
|
| darkgreen
| #006400
| 0,100,0
|
|
|
| darkgrey
| #a9a9a9
| 169,169,169
|
|
|
| darkkhaki
| #bdb76b
| 189,183,107
|
|
|
| darkmagenta
| #8b008b
| 139,0,139
|
|
|
| darkolivegreen
| #556b2f
| 85,107,47
|
|
|
| darkorange
| #ff8c00
| 255,140,0
|
|
|
| darkorchid
| #9932cc
| 153,50,204
|
|
|
| darkred
| #8b0000
| 139,0,0
|
|
|
| darksalmon
| #e9967a
| 233,150,122
|
|
|
| darkseagreen
| #8fbc8f
| 143,188,143
|
|
|
| darkslateblue
| #483d8b
| 72,61,139
|
|
|
| darkslategray
| #2f4f4f
| 47,79,79
|
|
|
| darkslategrey
| #2f4f4f
| 47,79,79
|
|
|
| darkturquoise
| #00ced1
| 0,206,209
|
|
|
| darkviolet
| #9400d3
| 148,0,211
|
|
|
| deeppink
| #ff1493
| 255,20,147
|
|
|
| deepskyblue
| #00bfff
| 0,191,255
|
|
|
| dimgray
| #696969
| 105,105,105
|
|
|
| dimgrey
| #696969
| 105,105,105
|
|
|
| dodgerblue
| #1e90ff
| 30,144,255
|
|
|
| firebrick
| #b22222
| 178,34,34
|
|
|
| floralwhite
| #fffaf0
| 255,250,240
|
|
|
| forestgreen
| #228b22
| 34,139,34
|
|
|
| fuchsia
| #ff00ff
| 255,0,255
|
|
|
| gainsboro
| #dcdcdc
| 220,220,220
|
|
|
| ghostwhite
| #f8f8ff
| 248,248,255
|
|
|
| gold
| #ffd700
| 255,215,0
|
|
|
| goldenrod
| #daa520
| 218,165,32
|
|
|
| gray
| #808080
| 128,128,128
|
|
|
| green
| #008000
| 0,128,0
|
|
|
| greenyellow
| #adff2f
| 173,255,47
|
|
|
| grey
| #808080
| 128,128,128
|
|
|
| honeydew
| #f0fff0
| 240,255,240
|
|
|
| hotpink
| #ff69b4
| 255,105,180
|
|
|
| indianred
| #cd5c5c
| 205,92,92
|
|
|
| indigo
| #4b0082
| 75,0,130
|
|
|
| ivory
| #fffff0
| 255,255,240
|
|
|
| khaki
| #f0e68c
| 240,230,140
|
|
|
| lavender
| #e6e6fa
| 230,230,250
|
|
|
| lavenderblush
| #fff0f5
| 255,240,245
|
|
|
| lawngreen
| #7cfc00
| 124,252,0
|
|
|
| lemonchiffon
| #fffacd
| 255,250,205
|
|
|
| lightblue
| #add8e6
| 173,216,230
|
|
|
| lightcoral
| #f08080
| 240,128,128
|
|
|
| lightcyan
| #e0ffff
| 224,255,255
|
|
|
| lightgoldenrodyellow
| #fafad2
| 250,250,210
|
|
|
| lightgray
| #d3d3d3
| 211,211,211
|
|
|
| lightgreen
| #90ee90
| 144,238,144
|
|
|
| lightgrey
| #d3d3d3
| 211,211,211
|
|
|
| lightpink
| #ffb6c1
| 255,182,193
|
|
|
| lightsalmon
| #ffa07a
| 255,160,122
|
|
|
| lightseagreen
| #20b2aa
| 32,178,170
|
|
|
| lightskyblue
| #87cefa
| 135,206,250
|
|
|
| lightslategray
| #778899
| 119,136,153
|
|
|
| lightslategrey
| #778899
| 119,136,153
|
|
|
| lightsteelblue
| #b0c4de
| 176,196,222
|
|
|
| lightyellow
| #ffffe0
| 255,255,224
|
|
|
| lime
| #00ff00
| 0,255,0
|
|
|
| limegreen
| #32cd32
| 50,205,50
|
|
|
| linen
| #faf0e6
| 250,240,230
|
|
|
| magenta
| #ff00ff
| 255,0,255
|
|
|
| maroon
| #800000
| 128,0,0
|
|
|
| mediumaquamarine
| #66cdaa
| 102,205,170
|
|
|
| mediumblue
| #0000cd
| 0,0,205
|
|
|
| mediumorchid
| #ba55d3
| 186,85,211
|
|
|
| mediumpurple
| #9370db
| 147,112,219
|
|
|
| mediumseagreen
| #3cb371
| 60,179,113
|
|
|
| mediumslateblue
| #7b68ee
| 123,104,238
|
|
|
| mediumspringgreen
| #00fa9a
| 0,250,154
|
|
|
| mediumturquoise
| #48d1cc
| 72,209,204
|
|
|
| mediumvioletred
| #c71585
| 199,21,133
|
|
|
| midnightblue
| #191970
| 25,25,112
|
|
|
| mintcream
| #f5fffa
| 245,255,250
|
|
|
| mistyrose
| #ffe4e1
| 255,228,225
|
|
|
| moccasin
| #ffe4b5
| 255,228,181
|
|
|
| navajowhite
| #ffdead
| 255,222,173
|
|
|
| navy
| #000080
| 0,0,128
|
|
|
| oldlace
| #fdf5e6
| 253,245,230
|
|
|
| olive
| #808000
| 128,128,0
|
|
|
| olivedrab
| #6b8e23
| 107,142,35
|
|
|
| orange
| #ffa500
| 255,165,0
|
|
|
| orangered
| #ff4500
| 255,69,0
|
|
|
| orchid
| #da70d6
| 218,112,214
|
|
|
| palegoldenrod
| #eee8aa
| 238,232,170
|
|
|
| palegreen
| #98fb98
| 152,251,152
|
|
|
| paleturquoise
| #afeeee
| 175,238,238
|
|
|
| palevioletred
| #db7093
| 219,112,147
|
|
|
| papayawhip
| #ffefd5
| 255,239,213
|
|
|
| peachpuff
| #ffdab9
| 255,218,185
|
|
|
| peru
| #cd853f
| 205,133,63
|
|
|
| pink
| #ffc0cb
| 255,192,203
|
|
|
| plum
| #dda0dd
| 221,160,221
|
|
|
| powderblue
| #b0e0e6
| 176,224,230
|
|
|
| purple
| #800080
| 128,0,128
|
|
|
| red
| #ff0000
| 255,0,0
|
|
|
| rosybrown
| #bc8f8f
| 188,143,143
|
|
|
| royalblue
| #4169e1
| 65,105,225
|
|
|
| saddlebrown
| #8b4513
| 139,69,19
|
|
|
| salmon
| #fa8072
| 250,128,114
|
|
|
| sandybrown
| #f4a460
| 244,164,96
|
|
|
| seagreen
| #2e8b57
| 46,139,87
|
|
|
| seashell
| #fff5ee
| 255,245,238
|
|
|
| sienna
| #a0522d
| 160,82,45
|
|
|
| silver
| #c0c0c0
| 192,192,192
|
|
|
| skyblue
| #87ceeb
| 135,206,235
|
|
|
| slateblue
| #6a5acd
| 106,90,205
|
|
|
| slategray
| #708090
| 112,128,144
|
|
|
| slategrey
| #708090
| 112,128,144
|
|
|
| snow
| #fffafa
| 255,250,250
|
|
|
| springgreen
| #00ff7f
| 0,255,127
|
|
|
| steelblue
| #4682b4
| 70,130,180
|
|
|
| tan
| #d2b48c
| 210,180,140
|
|
|
| teal
| #008080
| 0,128,128
|
|
|
| thistle
| #d8bfd8
| 216,191,216
|
|
|
| tomato
| #ff6347
| 255,99,71
|
|
|
| turquoise
| #40e0d0
| 64,224,208
|
|
|
| violet
| #ee82ee
| 238,130,238
|
|
|
| wheat
| #f5deb3
| 245,222,179
|
|
|
| white
| #ffffff
| 255,255,255
|
|
|
| whitesmoke
| #f5f5f5
| 245,245,245
|
|
|
| yellow
| #ffff00
| 255,255,0
|
|
|
| yellowgreen
| #9acd32
| 154,205,50
|
';
//==============================================================
//==============================================================
//==============================================================
include("../mpdf.php");
$mpdf=new mPDF('c','A4','','',15,15,20,20,5,5);
//==============================================================
$mpdf->pagenumPrefix = 'Page ';
$mpdf->pagenumSuffix = '';
$mpdf->nbpgPrefix = ' of ';
$mpdf->nbpgSuffix = ' pages.';
$header = array(
'L' => array(
),
'C' => array(
),
'R' => array(
'content' => '{PAGENO}{nbpg}',
'font-family' => 'sans',
'font-style' => '',
'font-size' => '9', /* gives default */
),
'line' => 1,
);
$footer = '
';
$mpdf->SetHeader($header,'O');
$mpdf->SetHTMLFooter($footer);
//==============================================================
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($html);
$mpdf->Output();
exit;
//==============================================================
//==============================================================
//==============================================================
//==============================================================
?>