EVOLUTION-NINJA
Edit File: example59_new_mPDF_v5-6_features.php
<?php include("../mpdf.php"); $mpdf=new mPDF(''); //============================================================== $html = ' <style> .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; } </style> <body> <div class="shadowtitle">New Features in mPDF v5.6</div> <h3>HTML5 tags</h3> <div class="gradient text"> <p>New tags introduced in HTML5 now have basic support in mPDF, and will thus support CSS style references.</p> <p>The following are treated as block elements similar to <div>:</p> <p class="code"><article> <aside> <details> <figure> <figcaption> <footer> <header> <hgroup> <nav> <section> <summary> </p> <p>The following are treated as in-line elements:</p> <p class="code"><time> <mark></p> <p>Mark is set by default to highlight in yellow in config.php using $defaultCSS e.g. <mark>mark</mark></p> <p>Progress and meter are discussed below:</p> </div> <h3><progress></h3> <div class="gradient text"> <p>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.</p> <p>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.</p> <p>Example:</p> <p class="code"><progress value="5" max="10">50%</progress></p> <ul class="compact"> <li> <label>Indeterminate</label> <progress max="100"></progress> </li> <li> <label>Progress: 0%</label> <progress max="10" value="0"></progress> </li> <li> <label>Progress: 100%</label> <progress max="3254" value="3254"></progress> </li> <li> <label>Progress: 57%</label> <progress max="0.7" value="0.4"></progress> </li> </ul> </div> <h3><meter></h3> <div class="gradient text"> <p>Meter: accepts the attributes min, max, value, optimum, low, and high. Text between the opening and closing tags is not displayed.</p> <p>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.</p> <p>Example:</p> <p class="code"><meter value="5" max="10" min="1" low="2" high="8" optimum="5.6">5</meter></p> <ul class="compact"> <li> <label>Meter: full</label> <meter value="1"></meter> </li> <li> <label>Preferred usage</label> <meter min="1024" max="10240" low="2048" high="8192" value="1824" optimum="1024"></meter> </li> <li> <label>Too much traffic</label> <meter min="1024" max="10240" low="2048" high="8192" value="6216" optimum="1024"></meter> </li> <li> <label>Much too much traffic</label> <meter min="1024" max="10240" low="2048" high="8192" value="9216" optimum="1024"></meter> </li> </ul> </div> <div class="gradient text"> <h4>Custom appearances for <meter> and <progress></h4> <p>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</p> <p>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.</p> <p class="code"><meter type="2" value="612.7" optimum="580.4" min="517.0 " max="642.7" low="542" high="600">612.7</meter></p> </div> <table class="pop"> <tbody> <tr> <td><p><b>Domain</b></p></td> <td><p><b>Indicator</b></p></td> <td><p><b>LHB</b></p><p><b>number</b></p></td> <td><p><b>LHB</b></p><p><b>Indicator</b></p> <p><b>value</b></p> </td> <td><p><b>Wales</b></p><p><b>average</b></p> </td> <td><p><b>Wales range</b></p></td> <td><p><b>Comparison</b></p></td> </tr> <tr> <td rowspan="4"><p><b>Deaths</b></p></td> <td><p>Death Rates per 100,000 population</p></td> <td><p>3046</p></td> <td><p><b>612.7</b><b></b></p></td> <td><p>580.4</p></td> <td><p>517.0 - 642.7</p></td> <td><meter class="pop" type="2" value="612.7" optimum="580.4" min="517.0 " max="642.7" low="542" high="600">612.7</meter></td> </tr> <tr> <td><p>Death Rates per 100,000 from cancer</p></td> <td><p>789</p></td> <td><p><b>178.2</b><b></b></p></td> <td><p>172.7</p></td> <td><p>159.5 - 182.2</p></td> <td><meter class="pop" type="2" value="178.2" optimum="172.7" min="159.5 " max="182.2" low="162" high="180">178.2</meter></td> </tr> <tr> <td><p>Death Rates per 100,000 from respiratory disease</p></td> <td><p>505</p></td> <td><p><b>60.5</b><b></b></p></td> <td><p>72.11</p></td> <td><p>54.41 - 95.5</p></td> <td><meter class="pop" type="2" value="60.5" optimum="72.11" min="54.41 " max="95.5" low="68" high="80">60.5</meter></td> </tr> <tr> <td><p>Death Rates per 100,000 from cardiovascular disease</p></td> <td><p>913</p></td> <td><p><b>178.2</b><b></b></p></td> <td><p>165.0</p></td> <td><p>151.8 - 179.9</p></td> <td><meter class="pop" type="2" value="160.2" optimum="165" min="151.8 " max="179.9" low="158" high="170">160.2</meter></td> </tr> </tbody> </table> <h3>Fieldset and Legend</h3> <form> <fieldset> <legend>Fieldset and legend</legend> <p>Support for fieldset and legend was introduced in mPDF v5.5. Consider it experimental!</p> <label for="name">Username:</label> <input type="text" name="name" id="name" /> <br /> <label for="mail">E-mail:</label> <input type="text" name="mail" id="mail" /> </fieldset> </form> <h3>CSS styles</h3> <div class="gradient text"> <h4></h4> <p><span class="css">min-height</span>, <span class="css">min-width</span>, <span class="css">max-height</span> and <span class="css">max-width</span> are now supported in CSS style sheets for <img> (only).</p> <p><span class="css">background: url(data:image/gif;base64,...)</span> is now supported in CSS style sheets (gif, png and jpeg).</p> </div> <div class="folder">This <div> has the folder icon set as an embedded image in the CSS</div> <p class="code">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; } </p> '; //============================================================== $mpdf->WriteHTML($html); $mpdf->Output(); exit; //============================================================== //============================================================== //============================================================== //============================================================== ?>