[3019] | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
---|
| 2 | <html>
|
---|
| 3 | <head>
|
---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
|
---|
| 5 | <style>
|
---|
| 6 | body {
|
---|
| 7 | color: #7d7a7a;
|
---|
| 8 | font-family: sans-serif;
|
---|
| 9 | }
|
---|
| 10 | div.bgimages a {
|
---|
| 11 | padding-left:20px;
|
---|
| 12 | background:url(images/pdf.png) no-repeat yellow;
|
---|
| 13 | }
|
---|
| 14 | div.bgimages ul {
|
---|
| 15 | text-align: left;
|
---|
| 16 | line-height:170%;
|
---|
| 17 | }
|
---|
| 18 | </style>
|
---|
| 19 | </head>
|
---|
| 20 |
|
---|
| 21 | <body>
|
---|
| 22 | <div style="text-align: center;">
|
---|
| 23 |
|
---|
| 24 | <h2> 40% of box width:</h2>
|
---|
| 25 | <div style="width:360pt; border:1pt solid #7d7a7a">
|
---|
| 26 | <img style="width:40%;" src="images/dompdf_simple.png"/>
|
---|
| 27 | </div>
|
---|
| 28 |
|
---|
| 29 | <h2>multiple identical images jpg:</h2>
|
---|
| 30 | <img src="images/goldengate.jpg" width="204" height="272"/>
|
---|
| 31 | <img src="images/goldengate.jpg" width="204" height="272"/>
|
---|
| 32 | <img src="images/goldengate.jpg" width="204" height="272"/>
|
---|
| 33 |
|
---|
| 34 | <h2>multiple identical images gif (will be recoded to png by dompdf):</h2>
|
---|
| 35 | <img src="images/what_ordered.gif" width="560" height="272"/>
|
---|
| 36 | <img src="images/what_ordered.gif" width="560" height="272"/>
|
---|
| 37 | <img src="images/what_ordered.gif" width="560" height="272"/>
|
---|
| 38 |
|
---|
| 39 | <h2>multiple identical images png:</h2>
|
---|
| 40 | <img src="images/dompdf_simple.png" width="200" height="76"/>
|
---|
| 41 | <img src="images/dompdf_simple.png" width="200" height="76"/>
|
---|
| 42 | <img src="images/dompdf_simple.png" width="200" height="76"/>
|
---|
| 43 |
|
---|
| 44 | <h2>local png image with alpha channel:</h2>
|
---|
| 45 | <img src="images/dokuwiki-128.png" width="128" height="128"/>
|
---|
| 46 |
|
---|
| 47 | <h2 style="color:red;">Attention!</h2>
|
---|
| 48 |
|
---|
| 49 | <p style="color:red;">For external images to work, the following configuration is required:</p>
|
---|
| 50 | <pre style="color:red;">dompdf_config.inc.php :</pre>
|
---|
| 51 |
|
---|
| 52 | <pre style="color:red;">define("DOMPDF_ENABLE_REMOTE", true);</pre>
|
---|
| 53 |
|
---|
| 54 | <h2>external png Image with alpha channel:</h2>
|
---|
| 55 | <img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=wiki:dokuwiki-128.png" width="128" height="128" />
|
---|
| 56 |
|
---|
| 57 | <h2>external image, dynamically created with id in url parameter at end of parameter(.jpg):</h2>
|
---|
| 58 | <img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg" width="500" height="375" />
|
---|
| 59 |
|
---|
| 60 | <h2>external image, dynamically created with id in url parameter not at end of parameter (.jpg):</h2>
|
---|
| 61 | <img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg&w=100" width="100" height="75" />
|
---|
| 62 |
|
---|
| 63 | <h2>external Image without file extension (.gif):</h2>
|
---|
| 64 | <img width="82" height="233" src="http://www.taz.de/fileadmin/templates/neu/images/logo" />
|
---|
| 65 |
|
---|
| 66 | <h2><a name="bgimages">Background images</a></h2>
|
---|
| 67 | <div class="bgimages">
|
---|
| 68 | <ul>
|
---|
| 69 | <li><a href="bgimages">no-repeat position:default</a></li>
|
---|
| 70 | <li><a href="bgimages" style="background-position:left center;">no-repeat position:left-center</a></li>
|
---|
| 71 | <li><a href="bgimages" style="background-position:left bottom;">no-repeat position:left-bottom</a></li>
|
---|
| 72 | <li><a href="bgimages" style="background-position:right bottom;">no-repeat position:right-bottom</a></li>
|
---|
| 73 | <li><a href="bgimages" style="background-position:center center;">no-repeat position:center-center</a></li>
|
---|
| 74 | <li><a href="bgimages" style="background-position:50% 50%;">no-repeat position:50%-50%</a></li>
|
---|
| 75 | <li><a href="bgimages" style="background-position:4px 8px;">no-repeat position:4px-8px</a></li>
|
---|
| 76 | <li><a href="bgimages" style="background-position:-4px -8px;">no-repeat position:-4px--8px</a></li>
|
---|
| 77 | <li><a href="bgimages" style="background-position:32px 0px;">no-repeat position:32px-0px</a></li>
|
---|
| 78 | <li><a href="bgimages" style="background-position:0px 8px;">no-repeat position:0px-8px</a></li>
|
---|
| 79 | </ul>
|
---|
| 80 | <ul>
|
---|
| 81 | <li><a href="bgimages" style="background-repeat:repeat-y;">repeat-y position:default</a></li>
|
---|
| 82 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:left center;">repeat-y position:left-center</a></li>
|
---|
| 83 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:left bottom;">repeat-y position:left-bottom</a></li>
|
---|
| 84 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:right bottom;">repeat-y position:right-bottom</a></li>
|
---|
| 85 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:center center;">repeat-y position:center-center</a></li>
|
---|
| 86 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:50% 50%;">repeat-y position:50%-50%</a></li>
|
---|
| 87 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:4px 8px;">repeat-y position:4px-8px</a></li>
|
---|
| 88 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:-4px -8px;">repeat-y position:-4px--8px</a></li>
|
---|
| 89 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:32px 0px;">repeat-y position:32px-0px</a></li>
|
---|
| 90 | <li><a href="bgimages" style="background-repeat:repeat-y; background-position:0px 8px;">repeat-y position:0px-8px</a></li>
|
---|
| 91 | </ul>
|
---|
| 92 | <ul>
|
---|
| 93 | <li><a href="bgimages" style="background-repeat:repeat-x;">repeat-x position:default</a></li>
|
---|
| 94 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:left center;">repeat-x position:left-center</a></li>
|
---|
| 95 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:left bottom;">repeat-x position:left-bottom</a></li>
|
---|
| 96 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:right bottom;">repeat-x position:right-bottom</a></li>
|
---|
| 97 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:center center;">repeat-x position:center-center</a></li>
|
---|
| 98 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:50% 50%;">repeat-x position:50%-50%</a></li>
|
---|
| 99 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:4px 8px;">repeat-x position:4px-8px</a></li>
|
---|
| 100 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:-4px -8px;">repeat-x position:-4px--8px</a></li>
|
---|
| 101 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:32px 0px;">repeat-x position:32px-0px</a></li>
|
---|
| 102 | <li><a href="bgimages" style="background-repeat:repeat-x; background-position:0px 8px;">repeat-x position:0px-8px</a></li>
|
---|
| 103 | </ul>
|
---|
| 104 | <ul>
|
---|
| 105 | <li><a href="bgimages" style="background-repeat:repeat;">repeat position:default</a></li>
|
---|
| 106 | <li><a href="bgimages" style="background-repeat:repeat; background-position:left center;">repeat position:left-center</a></li>
|
---|
| 107 | <li><a href="bgimages" style="background-repeat:repeat; background-position:left bottom;">repeat position:left-bottom</a></li>
|
---|
| 108 | <li><a href="bgimages" style="background-repeat:repeat; background-position:right bottom;">repeat position:right-bottom</a></li>
|
---|
| 109 | <li><a href="bgimages" style="background-repeat:repeat; background-position:center center;">repeat position:center-center</a></li>
|
---|
| 110 | <li><a href="bgimages" style="background-repeat:repeat; background-position:50% 50%;">repeat position:50%-50%</a></li>
|
---|
| 111 | <li><a href="bgimages" style="background-repeat:repeat; background-position:4px 8px;">repeat position:4px-8px</a></li>
|
---|
| 112 | <li><a href="bgimages" style="background-repeat:repeat; background-position:-4px -8px;">repeat position:-4px--8px</a></li>
|
---|
| 113 | <li><a href="bgimages" style="background-repeat:repeat; background-position:32px 0px;">repeat position:32px-0px</a></li>
|
---|
| 114 | <li><a href="bgimages" style="background-repeat:repeat; background-position:0px 8px;">repeat position:0px-8px</a></li>
|
---|
| 115 | </ul>
|
---|
| 116 | <ul>
|
---|
| 117 | <li><a href="bgimages" style="background-position:32px 8px;">no-repeat position:32px-8px</a></li>
|
---|
| 118 | <li><a href="bgimages" style="background-position:32pt 8pt;">no-repeat position:32pt-8pt</a></li>
|
---|
| 119 | <li><a href="bgimages" style="background-position:32px 32px;">no-repeat position:32px-32px</a></li>
|
---|
| 120 | <li><a href="bgimages" style="background-position:-16px -16px;">no-repeat position:-16px--16px</a></li>
|
---|
| 121 | </ul>
|
---|
| 122 | <ul>
|
---|
| 123 | <li><a href="bgimages" style="background-image:url(http://www.dokuwiki.org/lib/images/fileicons/html.png);">no-repeat position:default image:url(http://www.dokuwiki.org/lib/images/fileicons/html.png) [image remote]</a></li>
|
---|
| 124 | <li><a href="bgimages" style="background-image:url(images/png.png);">no-repeat position:default image:url(images/png.png) [image in subfolder]</a></li>
|
---|
| 125 | <li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]</a></li>
|
---|
| 126 |
|
---|
| 127 | <li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]
|
---|
| 128 | Added very long description, to see if non repeating background image is repeated after a line break.
|
---|
| 129 | blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
|
---|
| 130 | blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
|
---|
| 131 | ...
|
---|
| 132 | </a></li>
|
---|
| 133 |
|
---|
| 134 |
|
---|
| 135 | <h2 style="color:red;">Attention!</h2>
|
---|
| 136 | <p style="color:red;">For absolute image references to work, the file (dompdf)/www/test/images/smiley.png must be copyied exactly to (virtual web server root)/absimagetest/smiley.png</p>
|
---|
| 137 | <li><a href="bgimages" style="background-image:url(/absimagetest/smiley.png);">no-repeat position:default image:url(/absimagetest/smiley.png) [abs image ]</a></li>
|
---|
| 138 | </ul>
|
---|
| 139 | </div>
|
---|
| 140 | <p><a href="bgimages" style="line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left top;">paragraph link no-repeat position:default</a></p>
|
---|
| 141 | <p style="text-align:left;line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left top;">paragraph text no-repeat position:left-top; more text text more text text bla bla sdfjkhs sdfsjksdfks sdfkjsfsf skjfh ksjdfhsd </p>
|
---|
| 142 | <p style="text-align:left;line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left center;">paragraph text no-repeat position:left-center; more text text more text text bla bla sdfjkhs sdfsjksdfks sdfkjsfsf skjfh ksjdfhsd </p>
|
---|
| 143 | <p>
|
---|
| 144 | <span>The PHP 5 HTML to PDF converter</span>
|
---|
| 145 | </p>
|
---|
| 146 |
|
---|
| 147 | </div>
|
---|
| 148 |
|
---|
| 149 | </body> </html>
|
---|