aboutsummaryrefslogtreecommitdiffhomepage
path: root/inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php
diff options
context:
space:
mode:
Diffstat (limited to 'inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php')
-rw-r--r--inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php595
1 files changed, 595 insertions, 0 deletions
diff --git a/inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php b/inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php
new file mode 100644
index 00000000..658dc9ac
--- /dev/null
+++ b/inc/3rdparty/libraries/mpdf/examples/example60_new_mPDF_v5-7_features.php
@@ -0,0 +1,595 @@
1<?php
2
3ini_set("memory_limit","64M");
4
5include("../mpdf.php");
6
7$mpdf=new mPDF('');
8
9
10//==============================================================
11
12$html = '
13<style>
14.gradient {
15 border:0.1mm solid #220044;
16 background-color: #f0f2ff;
17 background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
18 box-shadow: 0.3em 0.3em #888888;
19}
20h4 {
21 font-weight: bold;
22 margin-top: 1em;
23 margin-bottom: 0.3em;
24 margin-top: 0;
25}
26div.text {
27 padding:0.8em;
28 margin-bottom: 0.7em;
29}
30p { margin: 0.25em 0; }
31p.code {
32 background-color: #d5d5d5;
33 margin: 1em 1cm;
34 padding: 0 0.3cm;
35 border:0.2mm solid #000088;
36 box-shadow: 0.3em 0.3em #888888;
37}
38.code {
39 font-family: monospace;
40 font-size: 9pt;
41}
42.shadowtitle {
43 height: 8mm;
44 background-color: #EEDDFF;
45 background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
46 padding: 0.8em;
47 padding-left: 3em;
48 font-family:sans;
49 font-size: 26pt;
50 font-weight: bold;
51 border: 0.2mm solid white;
52 border-radius: 0.2em;
53 box-shadow: 0 0 1em 0.5em rgba(0,0,255,0.5);
54 color: #AAAACC;
55 text-shadow: 0.03em 0.03em #666, 0.05em 0.05em rgba(127,127,127,0.5), -0.015em -0.015em white;
56}
57h3 {
58 margin: 3em 0 2em -15mm;
59 background-color: #EEDDFF;
60 background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
61 padding: 0.5em;
62 padding-left: 3em;
63 width: 50%;
64 font-family:sans;
65 font-size: 16pt;
66 font-weight: bold;
67 border-left: none;
68 border-radius: 0 2em 2em 0;
69 box-shadow: 0 0 2em 0.5em rgba(255,0,0,1);
70 text-shadow: 0.05em 0.04em rgba(127,127,127,0.5);
71}
72.css {
73 font-family: arial;
74 font-style: italic;
75 color: #000088;
76}
77
78.aBDP { text-align: "." center; }
79.arBDP { text-align: "\66B" center; }
80.middot { text-align: "\B7" center ; }
81
82p.menu {
83 text-align: justify;
84 padding-right: 4em;
85}
86dottab.menu {
87 outdent: 4em;
88}
89
90
91.outlined {
92 text-outline: 0.1mm 0.1mm #FF0000;
93 font-weight: bold;
94 font-size: 20pt;
95 color: #FFFFFF;
96}
97
98/* For background-clip and -origin */
99.divclip {
100 border: 10px dashed #000000;
101 border-radius: 3em;
102 padding: 20px;
103 background:yellow;
104 background-image: -moz-linear-gradient(top right 210deg, red, orange, yellow, green, blue, indigo, violet);
105 width: 300px;
106 height: 50px;
107 margin-bottom: 1em;
108 background-repeat: no-repeat ;
109 background-size: 100% 100%;
110}
111.divpic {
112 background:yellow;
113 background: yellow url("bayeux1.jpg") no-repeat scroll left top;
114 background-size: 100% 100%;
115}
116.div1 {
117 background-clip: content-box;
118 background-origin: content-box;
119}
120.div2 {
121 background-clip: padding-box;
122 background-origin: padding-box;
123}
124.div3 {
125 background-clip: border-box;
126 background-origin: border-box;
127}
128.div4 {
129 background-clip: content-box;
130 background-origin: border-box;
131}
132.div5 {
133 background-clip: border-box;
134 background-origin: content-box;
135}
136
137
138/* For Table of Contents */
139div.mpdf_toc {
140 font-family: sans-serif;
141 font-size: 11pt;
142}
143a.mpdf_toc_a {
144 text-decoration: none;
145 color: black;
146}
147div.mpdf_toc_level_0 { /* Whole line level 0 */
148 line-height: 1.5;
149 margin-left: 0;
150 padding-right: 2em; /* should match e.g <dottab outdent="2em" /> 0 is default */
151}
152span.mpdf_toc_t_level_0 { /* Title level 0 - may be inside <a> */
153 font-weight: bold;
154}
155span.mpdf_toc_p_level_0 { /* Page no. level 0 - may be inside <a> */
156}
157div.mpdf_toc_level_1 { /* Whole line level 1 */
158 margin-left: 2em;
159 text-indent: -2em;
160 padding-right: 2em; /* should match <dottab outdent="2em" /> 2em is default */
161}
162span.mpdf_toc_t_level_1 { /* Title level 1 */
163 font-style: italic;
164 font-weight: bold;
165}
166span.mpdf_toc_p_level_1 { /* Page no. level 1 - may be inside <a> */
167}
168div.mpdf_toc_level_2 { /* Whole line level 2 */
169 margin-left: 4em;
170 text-indent: -2em;
171 padding-right: 2em; /* should match <dottab outdent="2em" /> 2em is default */
172}
173span.mpdf_toc_t_level_2 { /* Title level 2 */
174}
175span.mpdf_toc_p_level_2 { /* Page no. level 2 - may be inside <a> */
176}
177
178</style>
179<body>
180
181<tocpagebreak links="on" toc-preHTML="&lt;div class=&quot;shadowtitle&quot;&gt;New Features in mPDF v5.7&lt;/div&gt;&lt;h3&gt;Table of Contents&lt;/h3&gt;" toc-bookmarktext="Table of Contents"/>
182
183
184<h3>ToC Layout and styling</h3>
185<div class="gradient text">
186<h4>Table of Contents styling</h4>
187<p>When a Table of Contents is generated by mPDF using e.g. &lt;tocpagebreak&gt;, mPDF 5.7 will generate the ToC as HTML. This means that a CSS stylesheet can be used to format its appearance.</p>
188</div>
189
190<div class="gradient text">
191<p>Example table of contents:</p>
192<div class="mpdf_toc" id="mpdf_toc_0">
193 <div class="mpdf_toc_level_0">
194 <a class="mpdf_toc_a" href="#__mpdfinternallink_1"><span class="mpdf_toc_t_level_0">Section 1</span></a>
195 <dottab outdent="2em" />
196 <a class="mpdf_toc_a" href="#__mpdfinternallink_1"><span class="mpdf_toc_p_level_0">5</span></a>
197 </div>
198 <div class="mpdf_toc_level_1">
199 <a class="mpdf_toc_a" href="#__mpdfinternallink_2"><span class="mpdf_toc_t_level_1">Chapter 1</span></a>
200 <dottab outdent="2em" />
201 <a class="mpdf_toc_a" href="#__mpdfinternallink_2"><span class="mpdf_toc_p_level_1">6</span></a>
202 </div>
203 <div class="mpdf_toc_level_2">
204 <a class="mpdf_toc_a" href="#__mpdfinternallink_3"><span class="mpdf_toc_t_level_2">Topic 1</span></a>
205 <dottab outdent="2em" />
206 <a class="mpdf_toc_a" href="#__mpdfinternallink_3"><span class="mpdf_toc_p_level_2">7</span></a>
207 </div>
208</div>
209</div>
210
211<div class="gradient text">
212<p>This will result in the following HTML code generated (internally):</p>
213<p class="code">
214&lt;div class="mpdf_toc" id="mpdf_toc_0"&gt;<br />
215&nbsp; &lt;div class="mpdf_toc_level_0"&gt;<br />
216&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_1"&gt;<br />
217&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_t_level_0"&gt;Section 1&lt;/span&gt;<br />
218&nbsp; &nbsp; &lt;/a&gt;<br />
219&nbsp; &nbsp; &lt;dottab outdent="2em" /&gt;<br />
220&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_1"&gt;<br />
221&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_p_level_0"&gt;5&lt;/span&gt;<br />
222&nbsp; &nbsp; &lt;/a&gt;<br />
223&nbsp; &lt;/div&gt;<br />
224&nbsp; &lt;div class="mpdf_toc_level_1"&gt;<br />
225&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_2"&gt;<br />
226&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_t_level_1"&gt;Chapter 1&lt;/span&gt;<br />
227&nbsp; &nbsp; &lt;/a&gt;<br />
228&nbsp; &nbsp; &lt;dottab outdent="2em" /&gt;<br />
229&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_2"&gt;<br />
230&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_p_level_1"&gt;6&lt;/span&gt;<br />
231&nbsp; &nbsp; &lt;/a&gt;<br />
232&nbsp; &lt;/div&gt;<br />
233&nbsp; &lt;div class="mpdf_toc_level_2"&gt;<br />
234&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_3"&gt;<br />
235&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_t_level_2"&gt;Topic 1&lt;/span&gt;<br />
236&nbsp; &nbsp; &lt;/a&gt;<br />
237&nbsp; &nbsp; &lt;dottab outdent="2em" /&gt;<br />
238&nbsp; &nbsp; &lt;a class="mpdf_toc_a" href="#__mpdfinternallink_3"&gt;<br />
239&nbsp; &nbsp; &nbsp; &lt;span class="mpdf_toc_p_level_2"&gt;7&lt;/span&gt;<br />
240&nbsp; &nbsp; &lt;/a&gt;<br />
241&nbsp; &lt;/div&gt;<br />
242&lt;/div&gt;
243</p>
244
245<p>NB The id is "0" (mpdf_toc_0) for root/un-named ToC; otherwise it is lowercase of the name="" used for the ToC</p>
246</div>
247
248<div class="gradient text">
249
250<p>Example Styling using CSS</p>
251<p>The following CSSwill format the ToC as it appears in this document:</p>
252<p class="code">
253/* For Table of Contents */<br />
254div.mpdf_toc {<br />
255&nbsp; font-family: sans-serif;<br />
256&nbsp; font-size: 11pt;<br />
257}<br />
258a.mpdf_toc_a {<br />
259&nbsp; text-decoration: none;<br />
260&nbsp; color: black;<br />
261}<br /><br />
262/* Whole line level 0 */<br />
263div.mpdf_toc_level_0 {<br />
264&nbsp; line-height: 1.5;<br />
265&nbsp; margin-left: 0;<br />
266&nbsp; padding-right: 2em;<br />
267}<br /><br />
268/* Title level 0 - may be inside &lt;a&gt; */<br />
269span.mpdf_toc_t_level_0 {<br />
270&nbsp; font-weight: bold;<br />
271}<br /><br />
272/* Page no. level 0 - may be inside &lt;a&gt; */<br />
273span.mpdf_toc_p_level_0 { }<br /><br />
274/* Whole line level 1 */<br />
275div.mpdf_toc_level_1 {<br />
276&nbsp; margin-left: 2em;<br />
277&nbsp; padding-right: 2em;<br />
278}<br /><br />
279/* Title level 1 */<br />
280span.mpdf_toc_t_level_1 {<br />
281&nbsp; font-style: italic;<br />
282&nbsp; font-weight: bold;<br />
283}<br /><br />
284/* Page no. level 1 - may be inside &lt;a&gt; */<br />
285span.mpdf_toc_p_level_1 { }<br /><br />
286/* Whole line level 2 */<br />
287div.mpdf_toc_level_2 {<br />
288&nbsp; margin-left: 4em;<br />
289&nbsp; padding-right: 2em;<br />
290}<br /><br />
291/* Title level 2 */<br />
292span.mpdf_toc_t_level_2 { }<br /><br />
293/* Page no. level 2 - may be inside &lt;a&gt; */<br />
294span.mpdf_toc_p_level_2 { }<br /><br />
295</p>
296<p>NB padding-right should match &lt;dottab&gt; "outdent" (0 is default). See &lt;dottab&gt; for more details</p>
297</div>
298
299<div class="gradient text">
300<p>The functions TOCpagebreakByArray() and TOCpagebreak() have a new final parameter, and HTML tags &lt;TOC&gt; and &lt;TOCpagebreak&gt; have a new attribute "tocoutdent". This should be blank or a valid CSS length e.g. "2em". See &lt;dottab&gt; for more details.</p>
301</div>
302
303
304
305
306
307<h3>Text-align on decimal point</h3>
308<div class="gradient text">
309<p>Text inside a table column can be aligned on a decimal point (or any other character) by using either HTML attribute or CSS.</p>
310<p>This example table uses the following CSS stylesheet:</p>
311<p class="code">
312&lt;style&gt;<br />
313.aBDP { text-align: "." center; }<br />
314.arBDP { text-align: "\66B" center; }<br />
315.middot { text-align: "\B7" center ; }<br />
316&lt;/style&gt;
317</p>
318<p></p>
319
320
321<table border="1" style="border-collapse: collapse;" align="center">
322 <tr><th>&lt;TD&gt; element</th><th>Column</th></tr>
323 <tr><td class="code">align="left"</td><td align="left">Left text</td></tr>
324 <tr><td class="code">align="right"</td><td align="right">Right text</td></tr>
325 <tr><td class="code">align="center"</td><td align="center">Center text</td></tr>
326 <tr><td class="code">align="char"</td><td align="char"><p>1000.0001</p></td></tr>
327 <tr><td class="code">align="char" char=","</td><td align="char" char=","><p>1000,0001</p></td></tr>
328 <tr><td class="code">align="char" char="&amp;middot;"</td><td align="char" char="&middot;"><p>1000&#183;0001</p></td></tr>
329 <tr><td class="code">align="char" char="&amp;#183;"</td><td align="char" char="&#183;"><p>1000&#183;0001</p></td></tr>
330 <tr><td class="code">style="text-align: \'.\' center"</td><td style="text-align: \'.\' center">100.001</td></tr>
331 <tr><td class="code">style="text-align: \'.\' center"</td><td style="text-align: \'.\' center">DP aligned text</td></tr>
332 <tr><td class="code">style="text-align: \',\' center"</td><td style="text-align: \',\' center"><p>1.000,0001</p></td></tr>
333 <tr><td class="code">class="aBDP"</td><td class="aBDP">10.01</td></tr>
334 <tr><td class="code">class="aBDP"</td><td class="aBDP">1000</td></tr>
335 <tr><td class="code">class="aBDP"</td><td class="aBDP"><p>1000.0001</p></td></tr>
336 <tr><td class="code">class="middot"</td><td class="middot">1&#8201;000&#183;0001</td></tr>
337 <tr><td class="code">class="aBDP"</td><td class="aBDP"><p>1,000,000.00001</p></td></tr>
338 <tr><td class="code">class="aBDP"</td><td class="aBDP">1.000000001</td></tr>
339 <tr><td class="code">class="aBDP"</td><td class="aBDP">1.000.000.001</td></tr>
340 <tr><td class="code">class="arBDP"</td><td class="arBDP"><p style="lang: ar">&#x661;&#x66c;&#x665;&#x666;&#x667;&#x66c;&#x662;&#x663;&#x664;&#x66b;&#x662;&#x663;&#x664;&#x667;</p></td></tr>
341 <tr><td class="code">class="aBDP"</td><td class="aBDP">(GBP) 1,000,000.00001<br />1,000,000.00001 (EUR)<br />1,000,000.00001</td></tr>
342</table>
343
344</div>
345
346
347
348
349<pagebreak />
350
351<h3>Automatic ToC and Bookmarks</h3>
352<div class="gradient text">
353<p>A Table of Contents and/or Bookmarks can be generated automatically from any of the heading tags H1 - H6. This example will generate ToC and bookmarks from all &lt;h3&gt; tags (top level) and &lt;h4&gt; tags (next level)</p>
354<p class="code">
355 $mpdf->h2toc = array(\'H3\'=>0, \'H4\'=>1);<br />
356 $mpdf->h2bookmarks = array(\'H3\'=>0, \'H4\'=>1);
357</p>
358</div>
359
360
361
362
363
364
365<h3>Improved line-breaking</h3>
366<p>mPDF will now avoid line-breaks in the middle of words even between &lt;tags&gt;</p>
367<div class="gradient text">
368<p class="code">
369&lt;b>Na&lt;sub&gt;2&lt;/sub&gt;HCO&lt;sub&gt;3&lt;/sub&gt;&lt;/b&gt;
370</p>
371<p>Pellentesque purus feugiat semper. Donec nunc odio, et vitae pellentesque. Pellentesque <b>Na<sub>2</sub>HCO<sub>3</sub></b> velit lacus.</p>
372</div>
373
374
375<h3>CSS hyphens</h3>
376<div class="gradient text">
377<p>The CSS property hyphens is now supported on all block elements</p>
378<p class="code">
379hyphens: manual | auto | none
380</p>
381<p>In the following example, the word interdependent contains no soft hyphen or similar characters, and is moved to the next line.</p>
382
383<p style="hyphens:none;border: 1px solid #000000;">Cum velit lacus pena sociis natoque penatibus et magnis disa montes, nascetur ridicuus interdependent (no characters suggesting line-break).</p>
384
385<p><b>manual</b> (default)
386 Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit ("-" hard hyphen) or conditional (&amp;shy; &amp;#173; &lt;wbr&gt;). </p>
387<p style="hyphens:manual;border: 1px solid #000000;">Cum velit lacus pena sociis natoque penatibus et magnis disa montes, nascetur ridicuus inter&shy;dependent (uses soft hyphen &amp;shy;).</p>
388
389<p><b>none</b> - Words are not broken at line breaks, even if characters inside the word suggest line break points. </p>
390<p style="hyphens:none;border: 1px solid #000000;">Cum velit lacus pena sociis natoque penatibus et magnis disa montes, nascetur ridicuus inter-dependent (hard hyphen).</p>
391
392<p><b>auto</b>
393 Words can be broken at appropriate hyphenation points, as determined by characters inside the word.</p>
394<p style="hyphens:auto;border: 1px solid #000000;">Cum velit lacus pena sociis natoque penatibus et magnis disa montes, nascetur ridicuus interdependent (No characters suggesting line-break).</p>
395<p>SHY inside the word take priority over hyphenation points determined by other resources. </p>
396<p style="hyphens:auto;border: 1px solid #000000;">Cum velit lacus pena sociis natoque penatibus et magnis disa montes, nascetur ridicuus inter&shy;dependent (uses soft hyphen &amp;shy;).</p>
397
398<p>The configurable variables $this-&gt;hyphenate and $this-&gt;hyphenateTables are henceforth redundant and have no effect.</p>
399<p>NB Support for &lt;wbr&gt; is new in mPDF 5.7</p>
400</div>
401
402
403
404
405
406<h3>Text circle</h3>
407<div class="gradient text">
408<p>Added in mPDF 5.6 but not included in New Features example - transparent background and Divider were new. Now also added support for font-size:auto</p>
409<p class="code">
410&lt;textcircle r="30mm" top-text="Text Circular Text Circular" bottom-text="Text Circular Text Circular" divider="&amp;bull;" style="font-size: auto" /&gt;
411</p>
412<p></p>
413<div align="center"><textcircle r="30mm" top-text="Text Circular Text Circular" bottom-text="Text Circular Text Circular" divider="&bull;" style="font-size: auto" /></div>
414</div>
415
416
417<h3>List numbering</h3>
418<div class="gradient text">
419<p>This list is set to start numbering at 5</p>
420<p class="code">&lt;ol start="5"&gt;</p>
421<ol start="5">
422<li>List item number 1</li>
423<li>List item number 2</li>
424<li>List item number 3</li>
425</ol>
426</div>
427
428
429
430
431<h3>&lt;dottab&gt; and outdent</h3>
432<div class="gradient text">
433<p>&lt;dottab&gt; now supports a custom CSS property "outdent", which can also be used as an HTML attribute i.e. &lt;dottab outdent="2em"&gt;</p>
434<p>The first item uses &lt;dottab outdent="4em"&gt; whereas the following items have &lt;dottab class="menu"&gt; (with CSS <code>dottab.menu{outdent: 4em;}</code> ) and all have padding-right="4em" on the &lt;div&gt; element</p>
435<div style="border: 0.2mm solid #000088; padding: 1em;">
436<p class="menu">Nulla felis erat, imperdiet eu, ullamcorper non, nonummy quis, elit. Suspendisse potenti. Ut a eros at ligula vehicula pretium. Maecenas feugiat pede vel risus. Nulla et lectus <dottab outdent="4em" />&nbsp;&pound;37.00</p>
437
438<p class="menu">Fusce eleifend neque sit amet erat. Integer consectetuer nulla non orci. Morbi feugiat <dottab class="menu" />&nbsp;&pound;3700.00</p>
439
440<p class="menu">Cras odio. Donec mattis, nisi id euismod auctor, neque metus pellentesque risus, at eleifend lacus sapien et risus <dottab class="menu" />&nbsp;&pound;27.00</p>
441
442<p class="menu">Phasellus metus. Phasellus feugiat, lectus ac aliquam molestie, leo lacus tincidunt turpis, vel aliquam quam odio et sapien. Mauris ante pede, auctor ac, suscipit quis, malesuada sed, nulla. Integer sit amet odio sit amet lectus luctus euismod <dottab class="menu" />&nbsp;&pound;7.00</p>
443
444<p class="menu">Donec et nulla. Sed quis orci <dottab class="menu" />&nbsp;&pound;1137.00</p>
445</div>
446<p></p>
447<p class="code">
448p.menu { text-align: justify; padding-right: 4em; }<br />
449dottab.menu { outdent: 4em; }
450</p>
451<p>NB It is recommended to use &amp;nbsp; after the dottab if a space is required before the following content.</p>
452<p>NB This (outdent) is also used in the Table of Contents (see earlier in this document).</p>
453</div>
454
455
456
457<h3>Layers</h3>
458<div class="gradient text">
459<p>mPDF 5.7 will create layers in the document using the CSS property z-index. All layers are visible by default.</p>
460<p>This demonstrates layers in a PDF document. Select the layers named "Correct Answers" or "Wrong Answers" in your PDF viewer (the layers pane should be open already in Adobe Acrobat)</p>
461<div><b>What is the name of the Prime Minister of Britain?</b></div>
462<div style="z-index:1;color: green;float: left; width:30%">David Cameron</div>
463<div style="z-index:2;color: red;">Rupert Murdoch</div>
464<div><b>What is the name of the David Beckham\'s bulldog?</b></div>
465<div style="z-index:1;color: green;float: left; width:30%;">Scarlet</div>
466<div style="z-index:2;color: red;">Victoria</div>
467<p>To open/close/select layers in Adobe Reader (10):<br />
468<img src="layers_tab.jpg" /></p>
469<p>The layer names and initial state can be set (optionally) e.g.</p>
470<p class="code">
471 $mpdf-&gt;layerDetails[1][\'state\']=\'hidden\'; // Set initial state of layer - "hidden" or ""<br />
472 $mpdf-&gt;layerDetails[1][\'name\']=\'Correct Answers\';<br />
473 $mpdf-&gt;layerDetails[2][\'state\']=\'hidden\';<br />
474 $mpdf-&gt;layerDetails[2][\'name\']=\'Wrong Answers\';<br />
475</p>
476<p>This is the code used in the example above:</p>
477<p class="code">
478 &lt;div style="z-index:1;color: green;float: left; width:30%;"&gt;Scarlet&lt;/div&gt;<br />
479 &lt;div style="z-index:2;color: red;"&gt;Victoria&lt;/div&gt;
480</p>
481<div>To force the PDF reader to open with the layers tab open, set:
482<p class="code">$mpdf-&gt;open_layer_pane = true;</p>
483</div>
484
485</div>
486
487
488
489<h3>CSS visibility on &lt;span&gt;</h3>
490<p>CSS visibility:hidden is now supported on inline elements e.g. &lt;span&gt;</p>
491<div class="gradient text">
492<p>This next bit of text is hidden - <span style="visibility:hidden; border:1px solid #880000;background-color:yellow">Hidden text</span> - and this isn\'t.</p>
493<p class="code">style="visibility:hidden;"</p>
494<p>This next bit of text is only visible in print - <span style="visibility:printonly; border:1px solid #008800;background-color:yellow">Hidden text</span> - and this isn\'t.</p>
495<p class="code">style="visibility:printonly;"</p>
496<p>This next bit of text is only visible on screen - <span style="visibility:screenonly; border:1px solid #000088;background-color:yellow">Hidden text</span> - and this isn\'t.</p>
497<p class="code">style="visibility:screenonly;"</p>
498<p>You can show or hide these elements as for layers (above).</p>
499</div>
500
501
502
503<h3>CSS "rem" unit</h3>
504<div class="gradient text">
505
506<div style="font-size: 1rem; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 1rem
507<div style="font-size: 0.5rem; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 0.5rem
508<div style="font-size: 1.5rem; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 1.5rem
509</div>
510</div>
511</div>
512<div style="font-size: 1em; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 1em
513<div style="font-size: 0.5em; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 0.5em
514<div style="font-size: 1.5em; border: 1px solid #888888; padding: 5px 20px;">This line has the font-size set as 1.5em
515</div>
516</div>
517</div>
518
519</div>
520
521
522
523
524<h3>CSS outline</h3>
525<div class="gradient text">
526<div class="outlined">This is text with an outline set by CSS</div>
527<p class="code">
528.outlined { text-outline: 0.1mm 0.1mm #FF0000; }
529</p>
530</div>
531
532
533
534
535
536<h3>CSS background-clip, background-origin &amp; background-size</h3>
537<div class="gradient text">
538<p>CSS background-clip, background-origin &amp; background-size are now supported for most block level elements. (Not supported in tables, nor on page/body backgrounds).</p>
539
540
541<div class="divclip">background-clip: border-box[default value]<br />background-origin: padding-box[default value]</div>
542<div class="divclip div1">background-clip: content-box;<br />background-origin: content-box</div>
543<div class="divclip div2">background-clip: padding-box;<br />background-origin: padding-box</div>
544<div class="divclip div3">background-clip: border-box;<br />background-origin: border-box</div>
545<div class="divclip div4">background-clip: content-box;<br />background-origin: border-box</div>
546<div class="divclip div5">background-clip: border-box;<br />background-origin: content-box</div>
547
548<div class="divclip divpic">background-clip: border-box[default value]<br />background-origin: padding-box[default value]</div>
549<div class="divclip div1 divpic">background-clip: content-box;<br />background-origin: content-box</div>
550<div class="divclip div2 divpic">background-clip: padding-box;<br />background-origin: padding-box</div>
551<div class="divclip div3 divpic">background-clip: border-box;<br />background-origin: border-box</div>
552<div class="divclip div4 divpic">background-clip: content-box;<br />background-origin: border-box</div>
553<div class="divclip div5 divpic">background-clip: border-box;<br />background-origin: content-box</div>
554
555
556</div>
557
558
559';
560
561$mpdf->h2toc = array('H3'=>0, 'H4'=>1);
562$mpdf->h2bookmarks = array('H3'=>0, 'H4'=>1);
563
564$mpdf->open_layer_pane = false;
565$mpdf->layerDetails[1]['state']='hidden'; // Set initial state of layer - "hidden" or nothing
566$mpdf->layerDetails[1]['name']='Correct Answers';
567$mpdf->layerDetails[2]['state']='hidden'; // Set initial state of layer - "hidden" or nothing
568$mpdf->layerDetails[2]['name']='Wrong Answers';
569
570//==============================================================
571if ($_REQUEST['html']) { echo $html; exit; }
572if ($_REQUEST['source']) {
573 $file = __FILE__;
574 header("Content-Type: text/plain");
575 header("Content-Length: ". filesize($file));
576 header("Content-Disposition: attachment; filename='".$file."'");
577 readfile($file);
578 exit;
579}
580
581//==============================================================
582
583$mpdf->WriteHTML($html);
584
585// OUTPUT
586$mpdf->Output(); exit;
587
588
589//==============================================================
590//==============================================================
591//==============================================================
592//==============================================================
593
594
595?> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-03 04:04:18 +0000