狠狠撸

mPDF
New features in mPDF Version 5.1
CSS background (images, colours or gradients) on <TR> and <TABLE>q
CSS border on <TR> (only in border-collapsed mode)q
support for Mozilla and CSS3 gradient syntax:q
-moz-linear-gradient, linear-gradientr
-moz-radial-gradient, radial-gradientr
-moz-repeating-linear-gradient, linear-repeating-gradientr
-moz-repeating-radial-gradient, radial-repeating-gradientr
expanded support for gradients (including in SVG images):q
multiple colour 'stops'r
opacity (transparency)r
angle and/or position can be specifiedr
gradient can be used as an image mask (custom mPDF styles: gradient-mask)q
CSS3 image-orientation supported for <IMG> (similar to existing custom mPDF attribute: rotate)q
CSS3 image-resolution supported for <IMG>q
background-image-resolution (custom mPDF CSS-type style) to define resolution of background imagesq
improved support for SVG imagesq
SVG and WMF images supported in background-imageq
file attachments (embedded in PDF file) 鈫� 鈫� 鈫� 鈫� 鈫抭
Tables: borders, background images & gradients
Background images or gradients can be set on whole tables or table rows (as well as individual table cells)
Row 1 This is data This is data
This row has a background-image of the bayeux tapestry
Row 3 This is long data This is data
This row has a gradient set which spans all 3 cells
Row 5 Also data Also data
Border can be set on table rows (only when border-collapse is set to collapse)
Row 1 This is data This is data
Row 2
This is data
This is data
This is data
This is data
Also data
Row 3 This is long data This is data

Mozilla and CSS3 gradient syntax
Linear gradients
ANGLE SET AND POINTS E.G. -MOZ-LINEAR-GRADIENT(34% 84% 30DEG, RED, ORANGE, YELLOW...
top right 210 degrees
30% 80% 60 degrees
10px 40px 325 degrees
bottom left 135deg
POINTS SET ONLY E.G. -MOZ-LINEAR-GRADIENT(BOTTOM LEFT, RED, ORANGE, YELLOW...
bottom right
top
10px 40px
30% 10%

ANGLE SET BUT NO POINTS E.G. -MOZ-LINEAR-GRADIENT(30DEG, RED, ORANGE, YELLOW...
90 degrees
120 degrees
180 degrees
210 degrees
Linear and radial gradients are not specified in the CSS2 specification. The CSS3 draft specification gives a
way of outputting gradients, but currently this is not supported by any browser.
Mozilla (Firefox) has developed its own way of producing gradients, which approximates to the CSS3 draft
specification:
-moz-linear-gradientq
-moz-repeating-linear-gradientq
-moz-radial-gradient andq
-moz-repeating-radial-gradientq
WebKit (Safari, Chrome etc.) have a separate way of defining gradients using -webkit-gradient
Microsoft (IE) does not support any such method of specifying gradients, but does have a function filter:
progid:DXImageTransform.Microsoft.gradient()
When writing HTML for cross-browser compatibility, it is common to see something like this in a stylesheet:
background: #999999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',
endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc),
to(#000000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #cccccc, #000000); /* for firefox 3.6+
*/
mPDF versions <= 5.0 supported a custom style property background-gradient which accepted both linear
and radial gradients. These continue to be supported (and both old and new forms can be used together);
note the differences:
mPDF background-gradients are output underneath background-images, and both can be specified;q
whereas the new CSS3/Mozilla-type gradients are defined as a type of background-image
CSS3/Mozilla gradients support multiple colour-stops, opacity, repeating-gradients, and a greater numberq
of options for defining the gradient axis (linear gradients) or shape and extent (radial gradients)

mPDF will attempt to parse a CSS stylesheet written for cross-browser compatibility:
parse and support -moz type gradientsq
parse and support CSS3 gradient syntaxq
ignore -webkit syntax gradientsq
More details can be found at:
Mozilla linear - https://developer.mozilla.org/en/CSS/-moz-linear-gradientq
Mozilla radial - https://developer.mozilla.org/en/CSS/-moz-radial-gradientq
Mozilla gradients use - https://developer.mozilla.org/en/Using_gradientsq
CSS3 linear gradients - http://dev.w3.org/csswg/css3-images/#linear-gradientsq
CSS3 radial gradients - http://dev.w3.org/csswg/css3-images/#radial-gradientsq
WebKit gradients - http://webkit.org/blog/175/introducing-css-gradients/q
Repeating gradients
background: repeating-linear-gradient(red, blue 20px, red 40px);
background: -moz-repeating-linear-gradient(top left -45deg, red, red 10px,
rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px);
background: repeating-radial-gradient(20px 30px, circle farthest-side, red,
yellow, green 10px, yellow 15px, red 20px);
background: repeating-radial-gradient(red, blue 20px, red 40px);

Gradient Image mask
Gradients (linear or radial) can also be used to produce 'masks' for images. The same syntax is used as for
background gradients (e.g. -moz-linear-gradient) but is set using a custom mPDF style: gradient-mask. The
rgba() method for defining colours is used: colours are ignored, but the opacity value is used to mask the
image.
<img src=/slideshow/mpdf51demo/47357390/"windmill.jpg" style="gradient-mask: -moz-radial-gradient(center,
ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 30%,
rgba(255,255,255,0) 90%, rgba(255,255,255,0));" />
<img src=/slideshow/mpdf51demo/47357390/"windmill.jpg" style="gradient-mask: -moz-radial-gradient(center,
ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 70%,
rgba(255,255,255,0) 90%, rgba(255,255,255,0));" />
<img src=/slideshow/mpdf51demo/47357390/"windmill.jpg" style="gradient-mask: -moz-linear-gradient(left,
rgba(0,0,0,0) , rgba(0,0,0,1) 50% , rgba(0,0,0,0) 100%);" />

Image orientation
Images can be rotated using a custom mPDF HTML attribute: rotate. mPDF now also supports the draft
CSS3 property of image-orientation. Rotation can be expressed in degrees, radians or grad units; it is
corrected if necessary to an orthogonal rotation i.e. 90, 180 or 270 degrees. NB This does not work on
background-images.
<img src=/slideshow/mpdf51demo/47357390/"tiger2.png" style="image-orientation: -90deg" width="100" />
<img src=/slideshow/mpdf51demo/47357390/"tiger2.png" style="image-orientation: 3.14159rad" width="100" />
Image resolution
Image files (which do not have an output width or height specified) are displayed in mPDF at the default
resolution set by the variable $mpdf->img_dpi. This can be overridden using the draft CSS3 property
'image-resolution', which can be applied to <IMG> or background-images.
The next 3 image files are identical (300px x 300px) but they have been saved with a different specified
resolution: the first at 96dpi, the second at 300dpi.
NB When used in combination with 'from-image', a specified resolution is only used if the image does not
have an intrinsic resolution. Only JPG, PNG and BMP files store a specified DPI resolution in the file.
<img src="/slideshow/mpdf51demo/47357390/tiger300px300dpi.png" style="image-resolution: from-image;" />
<img src="/slideshow/mpdf51demo/47357390/tiger300px300dpi.png" style="image-resolution: 150dpi;" />
<img src="tiger300px96dpi.png" style="image-resolution: from-image;" />

Image resolution can also be applied to a background-image. This can be used as an alternative to the
custom mPDF style property - 'background-image-resize'
<div height="300px" width="300px" style="background: #FFCCEE
url(tiger300px96dpi.png); background-image-resolution: from-image; border: 0.2mm
solid black;">
Hallo
world
<div height="300px" width="300px" style="background-image:
url(/slideshow/mpdf51demo/47357390/tiger300px300dpi.png); background-image-resolution: from-image; border:
0.2mm solid black;">

Mixed effects
Hallo World
Hallo World

狠狠撸

Mpdf51demo

Recommended

More Related Content

Similar to Mpdf51demo (20)

Recently uploaded (20)

Mpdf51demo