nickpons666/ventas_php
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primer commit del sistema avantika sin cambios

Browse Source
This commit is contained in:
nickpons666
2026-01-06 19:42:24 -06:00
commit 3ae4be5957
7127 changed files with 440072 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
pdf/www/test/backgroundcolor_fontdecoration_pageborder.html Executable file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
* { padding: 0; margin: 0; }
body {
/*color: #7d7a7a;*/
/*font-family: 'trebuchet ms', verdana, sans-serif;*/
font-family: sans-serif;
}
div.page {
margin:10mm;
padding:10mm;
border:0.5pt solid gray;
}
div.bgcolor {
background-color:#e0e0e0;
line-height:170%;
}
</style>
</head>
<body>
<div class="page">
<h2><a name="bgimages">Background color, text decoration, page border</a></h2>
<p>see more testcases with background images in <a href="image_variants.html">image_variants.html</a></p>
<div class="bgcolor">
</div>
<p>&nbsp;<p>
<p style="background:yellow; line-height:170%;">Text</p>
<p><a href="bgimages" style="background:yellow; line-height:170%;">Link</a></p>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-size:200%; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-family:times; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-family:times; font-size:200%; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
<span style="background-color:yellow;text-decoration:underline;">
underline sdfjsfh sdfs sfd sf sf sdfsdfasf asdfasdfa asdfasdf asdf asdfas dfasdf afsafasf asdfasdasdf adfasfasdf
</span>
block
</div>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;font-family:serif;">
block
<span style="background-color:yellow;">inline</span>
block
<u style="background-color:yellow;">underline</u>
block
<span style="background-color:yellow;text-decoration:underline;">underline style</span>
block
</div>
<p>&nbsp;<p>
<p>
<span>The PHP 5 HTML to PDF converter</span>
</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<div>
</body> </html>

128
pdf/www/test/css/common.css Executable file
View File

@@ -0,0 +1,128 @@
/* Notes
-----------------------------------------------------------------------*/
.note_form {
display: none;
}
/* Page
-----------------------------------------------------------------------*/
.page {
background-color: white;
padding: 20px;
font-size: 0.7em;
margin-bottom: 15px;
margin-right: 5px;
}
.page table.header td h1 {
margin: 0px;
}
.page table.header {
border-bottom: 1px solid black;
}
.page h1 {
text-align: center;
color: black;
font-style: normal;
font-size: 2em;
}
.page h2 {
text-align: center;
color: black;
}
.page h3 {
color: black;
font-size: 1em;
}
.page p {
text-align: justify;
font-size: 1em;
}
.page em {
font-weight: bold;
font-style: normal;
text-decoration: underline;
margin-left: 1%;
margin-right: 1%;
}
.money_table {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.money {
text-align: right;
padding-right: 20px;
}
.money_field {
text-align: right;
padding: 0px 15px 5px 15px;
font-weight: bold;
}
.total_label {
border-top: 2px double black;
font-weight: bold;
}
.total_field {
border-top: 2px double black;
text-align: right;
padding: 0px 15px 5px 15px;
font-weight: bold;
}
.written_field {
border-bottom: 0.1pt solid black;
}
.page .indent * { margin-left: 4em; }
.checkbox {
border: 1px solid black;
padding: 1px 2px;
font-size: 7px;
font-weight: bold;
}
table.fax_head {
width: 100%;
font-weight: bold;
font-size: 1.1em;
border-bottom: 1px solid black;
}
/* Sales-agreement specific
-----------------------------------------------------------------------*/
table.sa_signature_box {
margin: 2em auto 2em auto;
}
table.sa_signature_box tr td {
padding-top: 1.5em;
vertical-align: top;
white-space: nowrap;
}
.special_conditions {
font-style: italic;
margin-left: 2em;
white-space: pre;
font-weight: bold;
}
.page h2 {
text-align: left;
}

2
pdf/www/test/css/importabs.css Executable file
View File

@@ -0,0 +1,2 @@
p.importabs {background-color:#ffffc0;}

2
pdf/www/test/css/importall.css Executable file
View File

@@ -0,0 +1,2 @@
li.import {background-color:#ffffc0;}

2
pdf/www/test/css/importdisplay.css Executable file
View File

@@ -0,0 +1,2 @@
p.import {background-color:#c0c0ff;}

2
pdf/www/test/css/importprint.css Executable file
View File

@@ -0,0 +1,2 @@
p.import {background-color:#eeeeee;}

2
pdf/www/test/css/importsub.css Executable file
View File

@@ -0,0 +1,2 @@
p.importsub {background-color:#ffffc0;}

2
pdf/www/test/css/linkall.css Executable file
View File

@@ -0,0 +1,2 @@
li.link {background-color:#ffffc0;}

2
pdf/www/test/css/linkdefault.css Executable file
View File

@@ -0,0 +1,2 @@
li.link {color:#ff0000;}

2
pdf/www/test/css/linkdisplay.css Executable file
View File

@@ -0,0 +1,2 @@
p.link {background-color:#c0c0ff;}

2
pdf/www/test/css/linkprint.css Executable file
View File

@@ -0,0 +1,2 @@
p.link {background-color:#eeeeee;}

701
pdf/www/test/css/print_static.css Executable file
View File

@@ -0,0 +1,701 @@
/* Default style definitions */
@import url(common.css);
@page {
margin: 0.25in;
}
/* General
-----------------------------------------------------------------------*/
body {
background-color: transparent;
color: black;
font-family: "verdana", "sans-serif";
margin: 0px;
padding-top: 0px;
font-size: 1em;
}
@media print {
p { margin: 2px; }
}
h1 {
font-size: 1.1em;
font-style: italic;
}
h2 {
font-size: 1.05em;
}
img {
border: none;
}
pre {
font-family: "verdana", "sans-serif";
font-size: 0.7em;
}
ul {
list-style-type: circle;
list-style-position: inside;
margin: 0px;
padding: 3px;
}
li.alpha {
list-style-type: lower-alpha;
margin-left: 15px;
}
p {
font-size: 0.8em;
}
a:link,
a:visited {
/* font-weight: bold; */
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
#body {
padding-bottom: 2em;
padding-top: 5px;
}
#body pre {
}
.center {
text-align: center;
}
.right {
text-align: right;
}
#money {
text-align: right;
padding-right: 20px;
}
/* Footer
-----------------------------------------------------------------------*/
#footer {
color: black;
}
#copyright {
padding: 5px;
font-size: 0.6em;
background-color: white;
}
#footer_spacer_row {
width: 100%;
}
#footer_spacer_row td {
padding: 0px;
border-bottom: 1px solid #000033;
background-color: #F7CF07;
height: 2px;
font-size: 2px;
line-height: 2px;
}
#logos {
padding: 5px;
float: right;
}
/* Section Header
-----------------------------------------------------------------------*/
#section_header {
text-align: center;
}
#job_header {
text-align: left;
background-color: white;
margin-left: 5px;
padding: 5px;
border: 1px dashed black;
}
#job_info {
font-weight: bold;
}
.header_details td {
font-size: 0.6em;
}
.header_label {
padding-left: 20px;
}
.header_field {
padding-left: 5px;
font-weight: bold;
}
/* Content
-----------------------------------------------------------------------*/
#content {
padding: 0.2em 1% 0.2em 1%;
min-height: 15em;
}
.page_buttons {
text-align: center;
margin: 3px;
font-size: 0.7em;
white-space: nowrap;
font-weight: bold;
width: 74%;
}
.link_bar {
font-size: 0.7em;
text-align: center;
margin: auto;
/* white-space: nowrap; */
}
.link_bar a {
white-space: nowrap;
font-weight: bold;
}
.page_menu li {
margin: 5px;
font-size: 0.8em;
}
/* Detail
-----------------------------------------------------------------------*/
.detail_table {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 3px;
margin: 15px;
}
.detail_head td {
background-color: #ddd;
color: black;
font-weight: bold;
padding: 3px;
font-size: 0.75em;
text-align: center;
}
.detail_label {
padding: 3px;
font-size: 0.75em;
width: 16%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background-color: #ddd;
}
.detail_field {
width: 33%;
font-size: 0.8em;
color: ;
text-align: center;
padding: 3px;
}
.detail_sub_table {
font-size: 1em;
}
.detail_spacer_row td {
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: #999;
font-size: 2px;
line-height: 2px;
}
#narrow {
width: 50%;
}
.operation {
width: 1%;
}
.summary_spacer_row {
font-size: 0.1em;
}
.bar {
border-top: 1px solid black;
}
/* Forms
-----------------------------------------------------------------------*/
.form {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 10px;
}
.form td {
padding: 3px;
}
.form th, .form_head td {
background-color: #ddd
border-bottom: 1px solid black;
color: black;
padding: 3px;
text-align: center;
font-size: 0.65em;
font-weight: bold;
}
.form_head a:link,
.form_head a:visited {
color: black;
}
.form_head a:hover {
}
.sub_form_head td {
border: none;
font-size: 0.9em;
white-space: nowrap;
}
.form input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
font-size: 1em;
}
.form textarea {
color: black;
background-color: white;
border: 1px solid black;
font-size: 1em;
}
.form select {
color: black;
background-color: white;
font-size: 1em;
}
.button, a.button {
color: black;
background-color: white;
border: 1px solid black;
font-weight: normal;
white-space: nowrap;
text-decoration: none;
}
a.button {
display: inline-block;
text-align: center;
padding: 2px;
}
a.button:hover {
text-decoration: none;
color: black;
}
.form_field {
color: black;
background-color: white;
font-size: 0.7em;
}
.form_label {
color: black;
background-color: #ddd;
font-size: 0.7em;
padding: 3px;
}
/*
.form_foot {
background-color: #E5D9C3;
font-size: 0.6em;
}
*/
.form_foot td {
background-color: #ddd
border-bottom: 1px solid black;
color: black;
padding: 3px;
text-align: center;
font-size: 0.65em;
font-weight: bold;
}
.form_foot a:link,
.form_foot a:visited {
color: black;
}
.form_foot a:hover {
color: black;
}
.no_border_input input {
border: none;
}
.no_wrap {
white-space: nowrap;
}
tr.row_form td {
white-space: nowrap;
}
/* Wizards
-----------------------------------------------------------------------*/
.wizard {
font-size: 0.8em;
border-top: 1px solid black;
}
#no_border {
border: none;
}
.wizard p {
text-indent: 2%;
}
.wizard td {
padding: 3px;
/* padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;*/
}
.wizard input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
}
.wizard textarea {
color: black;
background-color: white;
border: 1px solid black;
}
.wizard select {
color: black;
background-color: white;
border: 1px solid black;
}
.wizard_head {
color: black;
font-weight: bold;
}
.wizard_buttons {
border-top: 1px solid black;
padding-top: 3px;
}
.wizard_buttons a {
background-color: white;
border: 1px solid black;
padding: 2px 3px 2px 3px;
}
/* List
-----------------------------------------------------------------------*/
.list_table,
.notif_list_table {
color: black;
padding-bottom: 4px;
background-color: white;
}
.list_table td,
.notif_list_table td {
padding: 3px 5px 3px 5px;
}
.list_table input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
}
.list_head,
.notif_list_head {
font-weight: bold;
background-color: #ddd;
font-size: 0.65em;
}
.list_head td,
.notif_list_head td {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
text-align: center;
white-space: nowrap;
}
.list_head a:link,
.list_head a:visited,
.notif_list_head a:link,
.notif_list_head a:visited {
color: black;
}
.list_head a:hover,
.notif_list_head a:hover {
}
.list_foot {
font-weight: bold;
background-color: #ddd;
font-size: 0.65em;
}
.list_foot td {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
text-align: right;
white-space: nowrap;
}
.sub_list_head td {
border: none;
font-size: 0.7em;
}
.odd_row td {
/* background-color: #EDF2F7;
border-top: 2px solid #FFFFff;*/
background-color: transparent;
border-bottom: 0.9px solid #ddd; /* 0.9 so table borders take precedence */
}
.even_row td {
/* background-color: #F8EEE4;
border-top: 3px solid #FFFFff;*/
background-color: #f6f6f6;
border-bottom: 0.9px solid #ddd;
}
.spacer_row td {
line-height: 2px;
font-size: 2px;
}
.phone_table td {
border: none;
font-size: 0.8em;
}
div.notif_list_text {
margin-bottom: 1px;
font-size: 1.1em;
}
.notif_list_row td.notif_list_job {
text-align: center;
font-weight: bold;
font-size: 0.65em;
}
.notif_list_row td.notif_list_dismiss table td {
text-align: center;
font-size: 1em;
border: none;
padding: 0px 2px 0px 2px;
}
.notif_list_row td {
padding: 5px 5px 7px 5px;
border-bottom: 1px dotted #ddd;
background-color: white;
font-size: 0.6em;
}
.notif_list_row:hover td {
background-color: #ddd;
}
/* Page
-----------------------------------------------------------------------*/
.page {
border: none;
padding: 0in;
margin-right: 0.1in;
margin-left: 0.1in;
/*margin: 0.33in 0.33in 0.4in 0.33in; */
background-color: transparent;
}
.page table.header h1{
font-size: 12pt;
}
.page>h2,
.page>p {
margin-top: 2pt;
margin-bottom: 2pt;
}
.page h2 {
page-break-after: avoid;
}
.money_table {
border-collapse: collapse;
font-size: 6pt;
}
/* Tree
-----------------------------------------------------------------------*/
.tree_div {
display: none;
background-color: #ddd;
border: 1px solid #333;
}
.tree_div .tree_step_bottom_border {
border-bottom: 1px dashed #8B9DBE;
}
.tree_div .button, .tree_row_table .button,
.tree_div .no_button {
width: 110px;
font-size: 0.7em;
padding: 3px;
text-align: center;
}
/*
.tree_div .button a, .tree_row_table .button a {
text-decoration: none;
color: #114C8D;
}
*/
.tree_row_desc {
font-weight: bold;
font-size: 0.7em;
text-indent: -10px;
}
.tree_row_info {
font-size: 0.7em;
width: 200px;
}
.tree_div_head a,
.tree_row_desc a {
color: #000033;
text-decoration: none;
}
.tree_div_head {
font-weight: bold;
font-size: 0.7em;
}
/* Summaries
-----------------------------------------------------------------------*/
.summary {
border: 1px solid black;
background-color: white;
padding: 1%;
font-size: 0.8em;
}
.summary h1 {
color: black;
font-style: normal;
}
/* Sales-agreement specific
-----------------------------------------------------------------------*/
table.sa_signature_box {
margin: 2em auto 2em auto;
}
table.sa_signature_box tr td {
padding-top: 1.25em;
vertical-align: top;
white-space: nowrap;
}
.special_conditions {
font-style: italic;
margin-left: 2em;
white-space: pre;
}
.sa_head * {
font-size: 7pt;
}
/* Change order specific
-----------------------------------------------------------------------*/
table.change_order_items {
font-size: 8pt;
width: 100%;
border-collapse: collapse;
margin-top: 2em;
margin-bottom: 2em;
}
table.change_order_items>tbody {
border: 1px solid black;
}
table.change_order_items>tbody>tr>th {
border-bottom: 1px solid black;
}
table.change_order_items>tbody>tr>td {
border-right: 1px solid black;
padding: 0.5em;
}
td.change_order_total_col {
padding-right: 4pt;
text-align: right;
}
td.change_order_unit_col {
padding-left: 2pt;
text-align: left;
}

87
pdf/www/test/css_2d_transforms.html Executable file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
<style>
body {
font-family: sans-serif;
font-size: 11px;
}
div.transformed {
border: 1px solid red;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
}
div.transformed:after {
content: attr(style);
}
div.grid {
border: 1px dotted grey;
margin: 0;
padding: 1em;
margin-bottom: -1px;
}
</style>
<!--[if IE]>
<script type="text/javascript" src="../cssSandpaper/js/EventHelpers.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/cssQuery-p.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/cssSandpaper.js"></script>
<script type="text/javascript">
if (!document.documentMode || document.documentMode < 9)
window.onload = function(){
var nodes = document.querySelectorAll("*[style]");
for (var i = 0; i < nodes.length; i++) {
var style = nodes[i].getAttribute("style");
var trans = /-ms-transform\s*:\s*([^;]+)/i.exec(style);
try {
if (trans && trans[1] !== "none") {
cssSandpaper.setTransform(nodes[i], trans[1]);
}
} catch(e) {}
}
}
</script>
<![endif]-->
</head>
<body>
<h3>none</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: none; -moz-transform: none; -ms-transform: none;">&nbsp; </div></div>
<h3>rotate</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: rotate(0.1rad); -moz-transform: rotate(0.1rad); -ms-transform: rotate(0.1rad);">&nbsp; </div></div>
<h3>scale</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: scale(0.5, 1.5); -moz-transform: scale(0.5, 1.5); -ms-transform: scale(0.5, 1.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5); -ms-transform: scaleX(0.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -ms-transform: scaleY(0.5);">&nbsp; </div></div>
<h3>translate</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: translate(10px, 10px); -moz-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translate(20px); -moz-transform: translate(20px); -ms-transform: translate(20px);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%);">&nbsp; </div></div>
<h3>skew</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: skew(30deg, -4deg); -moz-transform: skew(30deg, -4deg); -ms-transform: skew(30deg, -4deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skew(-4deg); -moz-transform: skew(-4deg); -ms-transform: skew(-4deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skewY(-4deg); -moz-transform: skewY(-4deg); -ms-transform: skewY(-4deg);">&nbsp; </div></div>
<h3>mixed</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: rotate(10deg) scale(0.5, 1.5); -moz-transform: rotate(10deg) scale(0.5, 1.5); -ms-transform: rotate(10deg) scale(0.5, 1.5);">&nbsp; </div></div>
</body>
</html>

16
pdf/www/test/css_baseline.html Executable file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
</head>
<body style='text-decoration: underline;'>
<span style="font-size: 30px;">(enter </span><span style="font-family:
Arial; font-size: 12px; font-weight: bold; color: rgb(255, 66, 0);
font-style: italic;">your </span><span style="font-size: 20px;
font-weight: bold; color: rgb(255, 66, 0); font-style:
italic;">text</span><span style="font-family: Arial; font-size:
12px;"> here)</span>
</body>
</html>

14
pdf/www/test/css_block_height.html Executable file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div style="height: 100%; width: 30%; background-color: #D3D7D8">
&nbsp;
</div>
</body>
</html>

124
pdf/www/test/css_border.html Executable file
View File

@@ -0,0 +1,124 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
table {
border-spacing: 5px;
margin: 2em auto;
}
td {
border-width: 5px;
padding: 1em;
}
td.dotted { border-style: dotted; color: maroon;}
td.dashed { border-style: dashed; color: orange; }
td.solid { border-style: solid; color: yellow; }
td.double { border-style: double; color: olive; }
td.groove { border-style: groove; color: green; }
td.ridge { border-style: ridge; color: lime; }
td.inset { border-style: inset; color: teal; }
td.outset { border-style: outset; color: blue; }
div.full { border:thin blue solid; margin:2pt;}
div.partialthinsolid,
div.partial1,
div.partial2 { border:thin solid; margin:2pt;}
div.partial1 { border-color:green; }
div.partial2 { border:blue;}
div.partial3 { border-style:dashed; }
div.partial4 { border-width:thick; }
div.partial5 { border-width:medium; }
div.partial6 { border-width:3pt; }
div.partial1top,
div.partial2top { border-top:thin solid; margin:2pt;}
div.partial1top {border-top-color:green; }
div.partial2top {border-top:blue;}
</style>
</head>
<body>
<table>
<tr>
<td class="dotted">dotted</td>
<td class="dashed">dashed</td>
<td class="solid">solid</td>
<td class="double">double</td>
</tr>
<tr>
<td class="groove">groove</td>
<td class="ridge">ridge</td>
<td class="inset">inset</td>
<td class="outset">outset</td>
</tr>
</table>
<h2>partial attributes merged</h2>
<div style="border:thin solid red;">border:thin solid red;</div>
<div style="border:red thin solid;">border:red thin solid;</div>
<div class="partialthinsolid partial2">{ border:thin solid; }{border:blue; } (merged, reset all - color has no effect)</div>
<div class="partialthinsolid partial1">{ border:thin solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="partial2">{ border:thin solid; }{border:blue; } (merged, reset all - color has no effect)</div>
<div class="partial1">{ border:thin solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="full partial1">{ border:thin blue solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="full partial3">{ border:thin blue solid; }{border-style:dashed; } (merged, overwrite only style)</div>
<div class="full partial4">{ border:thin blue solid; }{border-width:thick; } (merged, overwrite only width)</div>
<div class="full partial5">{ border:thin blue solid; }{border-width:medium; } (merged, overwrite only width)</div>
<div class="full partial6">{ border:thin blue solid; }{border-width:3pt; } (merged, overwrite only width)</div>
<h2>top:</h2>
<div style="border-top:thin solid red;">border-top:thin solid red;</div>
<div style="border-top:red thin solid;">border-top:red thin solid;</div>
<div class="partial1top">{ border-top:thin solid; }{border-top-color:green; } (merged, overwrite only color)</div>
<div class="partial2top">{ border-top:thin solid; }{border-top:blue; } (merged, reset all - color has no effect)</div>
<h2>right left bottom:</h2>
<div style="border-right:thin solid red;">border-right:thin solid red;</div>
<div style="border-left:thin solid red;">border-left:thin solid red;</div>
<div style="border-bottom:thin solid red;">border-bottom:thin solid red;</div>
<h2>Individual Attributes</h2>
<div class="full" style="border-top-color:red;">{border:thin blue solid;}{border-top-color:red;}</div>
<div class="full" style="border-right-color:red;">{border:thin blue solid;}{border-right-color:red;}</div>
<div class="full" style="border-bottom-color:red;">{border:thin blue solid;}{border-bottom-color:red;}</div>
<div class="full" style="border-left-color:red;">{border:thin blue solid;}{border-left-color:red;}</div>
<div class="full" style="border-top-style:dashed;">{border:thin blue solid;}{border-top-style:dashed;}</div>
<div class="full" style="border-right-style:dashed;">{border:thin blue solid;}{border-right-style:dashed;}</div>
<div class="full" style="border-bottom-style:dashed;">{border:thin blue solid;}{border-bottom-style:dashed;}</div>
<div class="full" style="border-left-style:dashed;">{border:thin blue solid;}{border-left-style:dashed;}</div>
<div class="full" style="border-top-width:medium;">{border:thin blue solid;}{border-top-width:medium;}</div>
<div class="full" style="border-right-width:medium;">{border:thin blue solid;}{border-right-width:medium;}</div>
<div class="full" style="border-bottom-width:medium;">{border:thin blue solid;}{border-bottom-width:medium;}</div>
<div class="full" style="border-left-width:medium;">{border:thin blue solid;}{border-left-width:medium;}</div>
<h2>Individual side specific Attributes</h2>
<div class="full" style="border-color:red;">{border:thin blue solid;}{border-color:red;}</div>
<div class="full" style="border-color:red green;">{border:thin blue solid;}{border-color:red green;}</div>
<div class="full" style="border-color:red green blue;">{border:thin blue solid;}{border-color:red green blue;}</div>
<div class="full" style="border-color:red green blue gray;">{border:thin blue solid;}{border-color:red green blue gray;}</div>
<div class="full" style="border-style:dashed;">{border:thin blue solid;}{border-style:dashed;}</div>
<div class="full" style="border-style:dashed dotted;">{border:thin blue solid;}{border-style:dashed dotted;}</div>
<div class="full" style="border-style:dashed dotted double;">{border:thin blue solid;}{border-style:dashed dotted double;}</div>
<div class="full" style="border-style:dashed dotted double groove;">{border:thin blue solid;}{border-style:dashed dotted double groove;}</div>
<div class="full" style="border-width:1pt;">{border:thin blue solid;}{border-width:1pt;}</div>
<div class="full" style="border-width:1pt 2pt;">{border:thin blue solid;}{border-width:1pt 2pt;}</div>
<div class="full" style="border-width:1pt 2pt 3pt;">{border:thin blue solid;}{border-width:1pt 2pt 3pt;}</div>
<div class="full" style="border-width:1pt 2pt 3pt 4pt;">{border:thin blue solid;}{border-width:1pt 2pt 3pt 4pt;}</div>
</body> </html>

41
pdf/www/test/css_border_values.html Executable file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.d { width: 1in; height: 1in; margin: 5pt; }
.b1 {
border: 1px solid red;
}
.b2 {
border: solid thick blue;
}
.b3 {
border: #369 thin dashed;
}
.b4 {
border: dotted green 2px;
}
.b5 {
border: 0.1em #0033DD solid;
}
.b6 {
border: orange inset 4pt;
}
</style>
</head>
<body>
<div class="d b1"> </div>
<div class="d b2"> </div>
<div class="d b3"> </div>
<div class="d b4"> </div>
<div class="d b5"> </div>
<div class="d b6"> </div>
</body>
</html>

51
pdf/www/test/css_color_cmyk.html Executable file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
body {
color: cmyk(0,0,0,1);
}
div {
margin: 2px;
}
div:before {
content: attr(style);
}
</style>
</head>
<body>
All these rectangles should look red:
<div style="background-color: red;"></div>
<div style="background-color: #FF0000;"></div>
<div style="background-color: #F00;"></div>
<div style="background-color: rgb(255, 0, 0);"></div>
<div style="background-color: rgb(100%, 0%, 0%);"></div>
<div style="background-color: cmyk(0, 1, 1, 0);"></div>
<br />
<br />
CMYK JPEG: <br />
<img src="images/cmyk_test2.jpg" />
<br /><br />
CMYK:
<div style="background-color: cmyk(1,0,0,0);"></div>
<div style="background-color: cmyk(0,1,0,0);"></div>
<div style="background-color: cmyk(0,0,1,0);"></div>
<div style="background-color: cmyk(0,0,0,1);"></div>
</body> </html>

47
pdf/www/test/css_content.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
p {
border: 1px dotted grey;
}
p.image:before {
content: url(images/html.png);
}
p.image:after {
content: url(images/pdf.png);
}
p.counter {
page-break-after: always;
}
p.counter:before {
content: "Page number " counter(page, upper-roman);
}
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
</style>
</head>
<body>
Look at the HTML source !
<p><q>quote &lt;q&gt;</q></p>
<p class="image"> to </p>
<p class="counter"></p>
<p class="counter"></p>
<p class="counter"></p>
</body>
</html>

55
pdf/www/test/css_float.html Executable file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
.left {
float: left;
border: 1px solid green;
}
.right {
float: right;
border: 1px solid blue;
}
.block {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 600px; padding: 1em; text-align: justify;">
<img src="images/dompdf_simple.png" style="float: left; margin-right: 0.5em; margin-bottom: 0.5em;" />
Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit. Sed non risus. Suspendisse lectus <strong>tortor</strong>, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum <em>ultrices</em> diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
<img src="images/goldengate.jpg" style="float: right; margin-left: 0.5em; margin-bottom: 0.5em;" width="220" />
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque vitae, <strong>consequat</strong> in, pretium a, enim. Pellentesque congue.
Ut in risus volutpat <em>libero</em> pharetra tempor. Cras vestibulum bibendum augue.
Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.
Mauris ac mauris sed pede pellentesque fermentum.
</div>
<!--
<div style="border: 1px solid black; height: 400px; width: 200px; padding: 1em;">
<div class="left">left</div>
<div class="right">rmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmght</div>
before block
<div class="block" style="height: 30px;">block</div>
after block
<div class="left" style="height: 30px;">left2</div>
text
<div class="left">left3</div>
<div class="block">block2</div>
</div>
-->
</body> </html>

116
pdf/www/test/css_font_selection.html Executable file
View File

@@ -0,0 +1,116 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<h1>Font Selection</h1>
<p>Available font-family:</p>
<ul>
<li>serif (default) (Aliases: times, times-roman)</li>
<li>sans-serif (Aliases: helvetica)</li>
<li>monospace (Aliases: fixed, courier)</li>
</ul>
<p>Available font-style:</p>
<ul>
<li>normal (default)</li>
<li>italic</li>
</ul>
<p>Available font-weight:</p>
<ul>
<li>normal (default)</li>
<li>bold</li>
</ul>
<p>Other variations are falling back to a combination of the above</p>
<p>Special fonts</p>
<ul>
<li>symbol</li>
<li>zapfdingbats</li>
</ul>
<h2>Font selection</h2>
<p style="font-family:sans-serif;">abcdefghijk ABCDEFGHIJK - (Helvetica) - (sans-serif) - sans-serif</p>
<p style="font-family:helvetica;">abcdefghijk ABCDEFGHIJK - (Helvetica) - (sans-serif) - helvetica</p>
<p style="font-family:serif;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - serif</p>
<p style="font-family:times;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - times</p>
<p style="font-family:times-roman;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - times-roman</p>
<p style="font-family:monospace;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - mononospace</p>
<p style="font-family:fixed;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - fixed</p>
<p style="font-family:courier;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - courier</p>
<h2>Font search path</h2>
<p style="font-family:dummy1,dummy2;">abcdefghijk ABCDEFGHIJK - serif - "font-family:dummy1,dummy2;"</p>
<p style="font-family:dummy1,dummy2,sans-serif;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:dummy1,dummy2,sans-serif;"</p>
<p style="font-family:sans-serif,dummy1,dummy2;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:sans-serif,dummy1,dummy2;"</p>
<p style="font-family:sans-serif,courier;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:sans-serif,courier;"</p>
<h2>Font variations</h2>
<p style="font-style:normal; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:normal;"</p>
<p style="font-style:normal; font-weight:lighter;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:lighter;"</p>
<p style="font-style:normal; font-weight:100;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:100;"</p>
<p style="font-style:normal; font-weight:200;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:200;"</p>
<p style="font-style:normal; font-weight:300;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:300;"</p>
<p style="font-style:normal; font-weight:400;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:400;"</p>
<p style="font-style:normal; font-weight:500;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:500;"</p>
<p style="font-style:normal; font-weight:600;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:600;"</p>
<p style="font-style:normal; font-weight:700;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:700;"</p>
<p style="font-style:normal; font-weight:800;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:800;"</p>
<p style="font-style:normal; font-weight:900;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:900;"</p>
<p style="font-style:normal; font-weight:bold;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:bold;"</p>
<p style="font-style:normal; font-weight:bolder;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:bolder;"</p>
<p style="font-style:italic; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - italic - "font-style:italic; font-weight:normal;"</p>
<p style="font-style:oblique; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - italic - "font-style:oblique; font-weight:normal;"</p>
<p style="font-style:italic; font-weight:bold;">abcdefghijk ABCDEFGHIJK - serif - bold_italic - "font-style:italic; font-weight:bold;"</p>
<p style="font-variant:small-caps; font-style:normal; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-variant:small-caps; font-style:normal; font-weight:normal;"</p>small-caps
<h2>Font size</h2>
<p style="font-size:xx-small">abcdefghijk ABCDEFGHIJK - xx-small</p>
<p style="font-size:x-small">abcdefghijk ABCDEFGHIJK - x-small</p>
<p style="font-size:small">abcdefghijk ABCDEFGHIJK - small</p>
<p style="font-size:medium">abcdefghijk ABCDEFGHIJK - medium</p>
<p style="font-size:large">abcdefghijk ABCDEFGHIJK - large</p>
<p style="font-size:x-large">abcdefghijk ABCDEFGHIJK - x-large</p>
<p style="font-size:xx-large">abcdefghijk ABCDEFGHIJK - xx-large</p>
<p style="font-size:10pt">abcdefghijk ABCDEFGHIJK - 10pt</p>
<p style="font-size:12pt">abcdefghijk ABCDEFGHIJK - 12pt</p>
<p style="font-size:14pt">abcdefghijk ABCDEFGHIJK - l4pt</p>
<p style="font-size:smaller">abcdefghijk ABCDEFGHIJK - smaller</p>
<p style="font-size:larger">abcdefghijk ABCDEFGHIJK - larger</p>
<h2>Line height</h2>
<p style="line-height:100%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 100%</p>
<p style="line-height:120%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 120%</p>
<p style="line-height:140%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 140%</p>
<p style="font-size:xx-large;line-height:100%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 100%</p>
<p style="font-size:xx-large;line-height:120%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 120%</p>
<p style="font-size:xx-large;line-height:140%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 140%</p>
<h2>Font combined setting</h2>
<p style="font:italic small-caps bold 14pt/160% sans-serif;">style="font:italic small-caps bold 14pt/160% sans-serif;"<br>(all attributes)</p>
<p style="font:normal 10pt/160% sans-serif;">style="font:normal 10pt/160% sans-serif;"<br>(partial attributes)</p>
<p style="font:700 10pt/160% sans-serif;">style="font:700 10pt/160% sans-serif;"<br>(partial attributes)</p>
<p style="font:small sans-serif;">style="font:small sans-serif;"<br>(partial attributes)</p>
<div style="font:italic small-caps bold 14pt/160% sans-serif;">
<p>inherit style="font:italic small-caps bold 14pt/160% sans-serif;" :</p>
<p style="font:small sans-serif;">
style="font:small sans-serif;"<br>
(partial attributes - reset inherited)<br>
<span style="font-weight:bold;">style="font-weight:bold;"<br>
(partial overwrite)</span><br>
(resume partial attributes)
</p>
<p>continue inherited</p>
</div>
</body>
</html>

54
pdf/www/test/css_important_flag.html Executable file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
ul { line-height:160% }
a {
border-bottom:dashed 1pt red !important;
text-decoration:none !important;
}
.monospace { font-family:monospace !important; }
</style>
</head>
<body>
<h1>Handling of "!important" property flag</h1>
<p>
Normally later css style properties defined later are overriding earlier ones.<br>
Except if they are marked with the flag "!important".<br>
Those can only be overridden by style properties which are also marked "!important".
</p>
<p>There are two classes of property overriding</p>
<ul>
<li>inherit (nested html tags)</li>
<li>merging (more css properties to the same html tag)</li>
</ul>
<p>This is handled similarly for all styles, so we check only examples here</p>
<p>ul { line-height:160% }<p>
<h2>merge a { border-bottom:dashed 1pt red !important; text-decoration:none !important; }</h2>
<p>dummy links, text decoration/border bottom:</p>
<ul>
<li><a href="">(default)</a></li>
<li><a href="" style="border-bottom-style:none;">border-bottom-style:none; (ignore)</a></li>
<li><a href="" style="border:1pt solid blue;">border:1pt solid blue; (ignore)</a></li>
<li><a href="" style="border-bottom-style:none!important;">border-bottom-style:none!important; (override)</a></li>
<li><a href="" style="border:1pt solid blue!important;">border:1pt solid blue!important; (override)</a></li>
</ul>
<h2>Inherit .monospace { font-family:monospace !important; }</h2>
<p>font family selection:</p>
<ul class="monospace">
<li>(default)</li>
<li class="font-family:sans-serif;">font-family:sans-serif; (ignored)</li>
<li style="font-family:sans-serif!important;">font-family:sans-serif!important; (override)</li>
</ul>
</body>
</html>

102
pdf/www/test/css_letter_spacing.html Executable file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
p {
font-size: 150%;
}
div {
page-break-after: always;
}
.example5 {
letter-spacing: 5px;
}
.example4 {
letter-spacing: 4px;
}
.example3 {
letter-spacing: 3px;
}
.example2 {
letter-spacing: 2px;
}
.example1 {
letter-spacing: 1px;
}
.example_1 {
letter-spacing: -1px;
}
.example_2 {
letter-spacing: -2px;
}
.example_3 {
letter-spacing: -3px;
}
.example_4 {
letter-spacing: -4px;
}
.example_5 {
letter-spacing: -5px;
}
</style>
</head>
<body>
<div style="text-align: left;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: right;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: center;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: justify;">
<p class="example5">This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. </p>
<p class="example4">This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. </p>
<p class="example3">This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. </p>
<p class="example2">This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. </p>
<p class="example1">This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. </p>
<p>This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. </p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. </p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. </p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. </p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. </p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. </p>
</div>
</body> </html>

63
pdf/www/test/css_line_height.html Executable file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html LANG="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Line Height Inheritance</title>
<style type="text/css">
<!--
h1 {margin-top: 0; margin-bottom: 0;}
h2 {font-size: 125%; margin-top: 0;}
h3 {font-size: medium; margin-bottom: .5ex;}
div {border: 1px solid red;}
div div {border: 1px solid blue;}
a:link img, a:visited img { border-style: none;}
.admin {
background-color: #E0E0FF;
width: 15ex;
margin: 2ex;
padding: 1ex;
text-align: center;
font-size: .85em;
border: 0;
z-index: 10;
}
-->
</style>
</head>
<body>
<h1>Use only &lt;number&gt; for line-height</h1>
<h2>unless you like solving inexplicable inheritance problems or setting an explicit line-height on every element</h2>
<h3>div {line-height: 1}; div div {font-size: 200%}</h3>
<div style="line-height: 1;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<h3>div {line-height: 1em}; div div {font-size: 200%}</h3>
<div style="line-height: 1em;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<h3>div {line-height: 100%}; div div {font-size: 200%}</h3>
<div style="line-height: 100%;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<div class="updir" style="border: 0; margin-top: 2ex;">
<p>When rendered according to the
<a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">css 2.1 spec</a>,
the 200% text in the second two div divs, those for which line-height of the parent
are specified in em or %, will overlap, the child divs being 1/2 the height of their containing
divs; while the first div div will be 2/3 the height of its containing div,
and its text won't overlap. The overlapping text in the latter div divs is because the spec requires the calculated
line-height specified in em or % be inherited by the children. In contrast, it is &lt;number&gt; itself that is inherited by
the children, which allows the line-height specified to be applied in reference to the font-size of the child div instead of
the ancestor.</p>
<hr>
<a href="http://fm.no-ip.com/Auth/IE/line-heightIE.html">IE has an additional problem with line-height.</a>
<hr>
</div>
<div class="admin">
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
<br>
Last Modified<br>2005.11.29<br>&#169; Felix Miata<br>
<A HREF="http://fm.no-ip.com/Auth/">Felix's Home</A>
</div>
</body>
</html>

38
pdf/www/test/css_margin.html Executable file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
p { width: 50%; text-align: justify; }
</style>
</head>
<body>
<p style="margin: 1em;"><strong>(margin: 1em;)</strong> The PHP Development
Team would like to announce the immediate availability of PHP 5.0.1. This is
a maintenance release that in addition to many non-critical bug fixes also
includes new UNIX and Windows installation docs which are now auto-generated
from the PHP Manual.</p>
<p style="margin: 1em 1em 1em 50%;"><strong>(margin: 1em 1em 1em
50%;)</strong> PHP 4.3.9RC1 has been released for testing. This is the first
release candidate and should have a very low number of problems and/or
bugs. Nevertheless, please download and test it as much as possible on
real-life applications to uncover any remaining issues.</p>
<p style="margin: 4em 1em 4em 4em;"><strong>(margin: 4em 1em 4em
1em;)</strong> PHP Tunisie has just released the second issue of its monthly
french PHP Magazine. In this issue you'll find a large plan on PostgreSQL,
Databases abstractions with PHP, your mini template engine, an article on
images generation with PHP, the migration towards PHP5 with
EasyPHP1.7... And many other articles and latests PHP news.</p>
<p style="margin: 1em auto 1em auto;"><strong>(margin: 1em auto 1em
auto;)</strong> The traditional International PHP Conference 2004 will be
taking place from 7th November to 10th November in Frankfurt (FFM). The Call
for Papers has been issued, so if you have an interesting talk, the
organizers would love to hear about it! You can expect a gathering of PHP
experts and core developers.</P>
</body> </html>

150
pdf/www/test/css_media.html Executable file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<link rel="stylesheet" media="screen, projection" href="css/linkdisplay.css">
<link rel="stylesheet" media="print" href="css/linkprint.css">
<link rel="stylesheet" media="all" href="css/linkall.css">
<link rel="stylesheet" href="css/linkdefault.css">
<style>
@page { margin:1cm; color:#0000ff; font-family:sans-serif;}
@media print {
p.media {background-color:#eeeeee;}
}
@media screen {
p.media {background-color:#c0c0ff;}
}
@media projection {
p.media {background-color:#ffffc0;}
}
@import url(css/importall.css);
@import url(css/importprint.css) print;
@import url(css/importdisplay.css) projection, screen;
@import url(css/importsub.css);
@import url(/absimagetest/importabs.css);
body { background-color:#eeeeee; margin:0pt; padding:1cm; border:0.5pt solid red; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<h1>css @media media types</h1>
<p class="media">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen: light blue</li>
<li>projection: light yellow</li>
</ul>
<h1>css @import media types</h1>
<p class="import">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen or projection: light blue</li>
<li class="import">all: this line yellow</li>
</ul>
<p class="importsub">yellow by import css from subfolder</p>
<p class="importabs">yellow by import css from absolute local folder.
Note: Only works if www\test\images/importabs.css was copied to /absimagetest/importabs.css
</p>
<h1>css link media types</h1>
<p class="link">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen or projection: light blue</li>
<li class="link">all: this line yellow background with red color</li>
</ul>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</html>

18
pdf/www/test/css_multiple_class.html Executable file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.a { font-style: italic; }
.b { font-weight: bold; }
.c { color: red; }
</style>
</head>
<body>
<p class="a">class="a"</p>
<p class="b">class="b"</p>
<p class="c">class="c"</p>
<p class="a b">class="a b"</p>
<p class="a b c">class="a b c"</p>
</body>
</html>

107
pdf/www/test/css_opacity.html Executable file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
div {
border: 2px solid #000;
width: 50px;
height: 50px;
margin: 10px;
background: green;
}
</style>
</head>
<body>
<h1>Nested block elements</h1>
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Inline elements</h1>
<span style="width: 100%;">
<span style="opacity: 0.1">ab</span>
<span style="opacity: 0.2">cb</span>
<span style="opacity: 0.3">ef</span>
<span style="opacity: 0.4">gh</span>
<span style="opacity: 0.5">ij</span>
<span style="opacity: 0.6">kl</span>
<span style="opacity: 0.7">mn</span>
<span style="opacity: 0.8">op</span>
<span style="opacity: 0.9">qr</span>
<span style="opacity: 1.0">st</span>
</span>
<br/>
<span style="width: 100%; opacity: 0.5;">
<span style="opacity: 0.1">ab</span>
<span style="opacity: 0.2">cb</span>
<span style="opacity: 0.3">ef</span>
<span style="opacity: 0.4">gh</span>
<span style="opacity: 0.5">ij</span>
<span style="opacity: 0.6">kl</span>
<span style="opacity: 0.7">mn</span>
<span style="opacity: 0.8">op</span>
<span style="opacity: 0.9">qr</span>
<span style="opacity: 1.0">st</span>
</span>
<div style="opacity: 0.1;">0.1</div>
<div style="opacity: 0.2;">0.2</div>
<div style="opacity: 0.3;">0.3</div>
<div style="opacity: 0.4;">0.4</div>
<div style="opacity: 0.5;">0.5</div>
<div style="opacity: 0.6;">0.6</div>
<div style="opacity: 0.7;">0.7</div>
<div style="opacity: 0.8;">0.8</div>
<div style="opacity: 0.9;">0.9</div>
<div style="opacity: 1.0;">1.0</div>
<div style="opacity: 1.0;">1.0 opacity</div>
<div>No opacity</div>
<div style="opacity: 0.5; height: auto;">
<div style="opacity: 0.5;">
<div style="opacity: 1.0;"></div>
<div style="opacity: 0.5;"></div>
</div>
<div style="opacity: 0.5;"></div>
</div>
</body> </html>

77
pdf/www/test/css_outline.html Executable file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
table {
border-spacing: 15px;
margin: 2em auto;
}
td {
outline-width: 5px;
border: thin dotted gray;
padding: 1em;
}
td.dotted { outline-style: dotted; color: maroon;}
td.dashed { outline-style: dashed; color: orange; }
td.solid { outline-style: solid; color: yellow; }
td.double { outline-style: double; color: olive; }
td.groove { outline-style: groove; color: green; }
td.ridge { outline-style: ridge; color: lime; }
td.inset { outline-style: inset; color: teal; }
td.outset { outline-style: outset; color: blue; }
div { margin: 5pt; }
div.full { outline:thin blue solid;}
div.partialthinsolid,
div.partial1,
div.partial2 { outline:thin solid;}
div.partial1 { outline-color:green; }
div.partial2 { outline:blue;}
div.partial3 { outline-style:dashed; }
div.partial4 { outline-width:thick; }
div.partial5 { outline-width:medium; }
div.partial6 { outline-width:3pt; }
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">The dotted gray line is the border box</th>
</tr>
<tr>
<td class="dotted">dotted</td>
<td class="dashed">dashed</td>
<td class="solid">solid</td>
<td class="double">double</td>
</tr>
<tr>
<td class="groove">groove</td>
<td class="ridge">ridge</td>
<td class="inset">inset</td>
<td class="outset">outset</td>
</tr>
</table>
<h2>partial attributes merged</h2>
<div style="outline:thin solid red;">outline:thin solid red;</div>
<div style="outline:red thin solid;">outline:red thin solid;</div>
<div class="partialthinsolid partial2">{ outline:thin solid; }{outline:blue; } (merged, reset all - color has no effect)</div>
<div class="partialthinsolid partial1">{ outline:thin solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="partial2">{ outline:thin solid; }{outline:blue; } (merged, reset all - color has no effect)</div>
<div class="partial1">{ outline:thin solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="full partial1">{ outline:thin blue solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="full partial3">{ outline:thin blue solid; }{outline-style:dashed; } (merged, overwrite only style)</div>
<div class="full partial4">{ outline:thin blue solid; }{outline-width:thick; } (merged, overwrite only width)</div>
<div class="full partial5">{ outline:thin blue solid; }{outline-width:medium; } (merged, overwrite only width)</div>
<div class="full partial6">{ outline:thin blue solid; }{outline-width:3pt; } (merged, overwrite only width)</div>
</body> </html>

38
pdf/www/test/css_overflow_hidden.html Executable file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body {
font-family: sans-serif;
}
div {
margin: 0.5em;
width: 50pt;
height: 200pt;
border: 1pt dotted;
padding: 10px;
}
img {
border: 1pt dotted red;
}
</style>
</head>
<body>
<h3>overflow: hidden</h3>
<div style="overflow: hidden;">
<img src="images/dompdf_simple.png" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
</div>
<h3>overflow: visible</h3>
<div style="overflow: visible;">
<img src="images/dompdf_simple.png" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
</div>
</body>
</html>

379
pdf/www/test/css_position_all.html Executable file
View File

@@ -0,0 +1,379 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Printed document</title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 10pt;
}
/* These inline styles will always be active even if an alternate stylesheet is selected with the stylesheet swticher */
.example {
width: 400px;
page-break-after: always;
margin-bottom: 10em;
}
.div-before, .div-after {
background-color: #88d;
color: #000;
}
.div-1 {
background-color: #000;
color: #fff;
}
.div-1-padding {
padding: 10px;
}
.div-1a {
background-color: #d33;
color: #fff;
}
.div-1b {
background-color: #3d3;
color: #fff;
}
.div-1c {
background-color: #33d;
color: #fff;
}
.example div p {
margin: 0 .25em;
padding: .25em 0;
}
#example-1 .div-1 {
position: static;
}
#example-2 .div-1 {
position: relative;
top:20px;
left:-40px;
}
#example-3 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-4 .div-1 {
position:relative;
}
#example-4 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-5 .div-1 {
position:relative;
}
#example-5 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-5 .div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
#example-6 .div-1 {
position:relative;
height:250px;
}
#example-6 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-6 .div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
#example-7 .div-1a {
float:left;
width:200px;
}
#example-8 .div-1a {
float:left;
width:150px;
}
#example-8 .div-1b {
float:left;
width:150px;
}
#example-9 .div-1a {
float:left;
width:190px;
}
#example-9 .div-1b {
float:left;
width:190px;
}
#example-9 .div-1c {
clear:both;
}
</style>
</head>
<body>
<h3>Examples from <br />http://www.barelyfitz.com/screencast/html-training/css/positioning/</h3>
position: static
<div id="example-1" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: relative
<div id="example-2" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: absolute
<div id="example-3" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: relative + position: absolute
<div id="example-4" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
two column absolute
<div id="example-5" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
two column absolute height
<div id="example-6" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float
<div id="example-7" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float columns
<div id="example-8" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float columns with clear
<div id="example-9" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
</body>
</html>

215
pdf/www/test/css_position_fixed.html Executable file
View File

@@ -0,0 +1,215 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Printed document</title>
<style type="text/css">
@page {
margin: 0;
}
body {
margin-top: 3.5cm;
margin-bottom: 1cm;
margin-left: 3.5cm;
font-family: sans-serif;
text-align: justify;
}
div.header,
div.footer {
position: fixed;
background: #ddd;
width: 100%;
border: 0px solid #888;
overflow: hidden;
padding: 0.1cm;
}
div.leftpane {
position: fixed;
background: #ddd;
width: 3cm;
border-right: 1px solid #888;
top: 0cm;
left: 0cm;
height: 30cm;
}
div.header {
top: 0cm;
left: 0cm;
border-bottom-width: 1px;
height: 3cm;
}
div.footer {
bottom: 0cm;
left: 0cm;
border-top-width: 1px;
height: 1cm;
}
div.footer table {
width: 100%;
text-align: center;
}
hr {
page-break-after: always;
border: 0;
}
</style>
</head>
<body>
<div class="header">
<div style="text-align: right;">
Header line 1<br/>
Header line 2<br/>
Header line 3<br/>
Header line 4<br/>
</div>
</div>
<div class="footer">
<div style="text-align: right;">On line footer content aligned to the right. <a href="http://fr.selfhtml.org/css/proprietes/printlayouts.htm">More info on print layouts</a></div>
</div>
<div class="leftpane">
<div style="text-align: center;">
<img src="images/dompdf_simple.png" width="80" style="margin: 1cm;" />
</div>
</div>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<hr/>
<h2>Section 2</h2>
<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna.</p>
<hr/>
<h2>Section 3</h2>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
</body></html>

53
pdf/www/test/css_selectors.html Executable file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body {
color: red;
}
a {
display: block;
}
a[href$=ends_1] {color: green;}
a[href$='ends_2'] {color: green;}
a[href$="ends_3"] {color: green;}
a[href^=starts_1] {color: green;}
a[href^='starts_2'] {color: green;}
a[href^="starts_3"] {color: green;}
a[href*=contains_1] {color: green;}
a[href*='contains_2'] {color: green;}
a[href*="contains_3"] {color: green;}
a[target=equal_1] {color: green;}
a[target='equal_2'] {color: green;}
a[target="equal_3"] {color: green;}
</style>
</head>
<body>
<a href="#" target="equal_1">a[target=equal_1]</a>
<a href="#" target="equal_2">a[target='equal_2']</a>
<a href="#" target="equal_3">a[target="equal_3"]</a>
<a href="test/ends_1">a[href$=ends_1]</a>
<a href="test/ends_2">a[href$='ends_2']</a>
<a href="test/ends_3">a[href$="ends_3"]</a>
<p>
<a href="test/contains_1/test">a[href*=contains_1]</a>
<a href="test/contains_2/test">a[href*='contains_2']</a>
<a href="test/contains_3/test">a[href*="contains_3"]</a>
</p>
<a href="starts_1/test">a[href^=starts_1]</a>
<a href="starts_2/test">a[href^='starts_2']</a>
<a href="starts_3/test">a[href^="starts_3"]</a>
</body>
</html>

15
pdf/www/test/css_table_height.html Executable file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<table style="height: 50%; border: 0.5pt solid black;">
<tbody>
<tr>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>

61
pdf/www/test/css_text_align.html Executable file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<h1>text-align: left</h1>
<div style="text-align: left;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: center</h1>
<div style="text-align: center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: right</h1>
<div style="text-align: right;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: justify</h1>
<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
</body>
</html>

40
pdf/www/test/css_z_index.html Executable file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>z-index</title>
<style type="text/css">
div {
position: absolute;
}
</style>
</head>
<body>
<div style="background: #fff; opacity: 0.8; border: 6px solid red; z-index: 3; padding: 3em; top: 3em; left: 2em; width: 6em;">
z-index: 3, order: 1
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid green; z-index: 2; padding: 3em; top: 6em; left: 6em; width: 6em;">
z-index: 2, order: 2
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid blue; z-index: 1; padding: 3em; top: 1em; left: 4em; width: 6em;">
z-index: 1, order: 3
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid red; z-index: auto; padding: 3em; top: 23em; left: 2em; width: 6em;">
z-index: auto, order: 1
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid green; z-index: auto; padding: 3em; top: 26em; left: 6em; width: 6em;">
z-index: auto, order: 2
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid blue; z-index: auto; padding: 3em; top: 21em; left: 4em; width: 6em;">
z-index: auto, order: 3
</div>
</body>
</html>

214
pdf/www/test/demo_01.html Executable file
View File

@@ -0,0 +1,214 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="STYLESHEET" href="css/print_static.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="section_header">
</div>
<div id="content">
<div class="page" style="font-size: 7pt">
<table style="width: 100%;" class="header">
<tr>
<td><h1 style="text-align: left">SCHEDULE A</h1></td>
<td><h1 style="text-align: right">Job: 132-003</h1></td>
</tr>
</table>
<table style="width: 100%; font-size: 8pt;">
<tr>
<td>Job: <strong>132-003</strong></td>
<td>Purchasers(s): <strong>Palmer</strong></td>
</tr>
<tr>
<td>Created: <strong>2004-08-13</strong></td>
<td>Last Change: <strong>2004-08-16 9:28 AM</strong></td>
</tr>
<tr>
<td>Address: <strong>667 Pine Lodge Dr.</strong></td>
<td>Legal: <strong>N/A</strong></td>
</tr>
</table>
<table style="width: 100%; border-top: 1px solid black; border-bottom: 1px solid black; font-size: 8pt;">
<tr>
<td>Model: <strong>Franklin</strong></td>
<td>Elevation: <strong>B</strong></td>
<td>Size: <strong>1160 Cu. Ft.</strong></td>
<td>Style: <strong>Reciprocating</strong></td>
</tr>
</table>
<table class="change_order_items">
<tr><td colspan="6"><h2>Standard Items:</h2></td></tr>
<tbody>
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th colspan="2">Unit Cost</th>
<th>Total</th>
</tr>
<tr class="even_row">
<td style="text-align: center">1</td>
<td>Sprockets (13 tooth)</td>
<td style="text-align: center">50</td>
<td style="text-align: right; border-right-style: none;">$10.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$5,000.00</td>
</tr>
<tr class="odd_row">
<td style="text-align: center">2</td>
<td>Cogs (Cylindrical)</td>
<td style="text-align: center">45</td>
<td style="text-align: right; border-right-style: none;">$25.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$1125.00</td>
</tr>
<tr class="even_row">
<td style="text-align: center">3</td>
<td>Gears (15 tooth)</td>
<td style="text-align: center">32</td>
<td style="text-align: right; border-right-style: none;">$19.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$608.00</td>
</tr>
<tr class="odd_row">
<td style="text-align: center">4</td>
<td>Leaf springs (13 N/m)</td>
<td style="text-align: center">6</td>
<td style="text-align: right; border-right-style: none;">$125.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$750.00</td>
</tr>
<tr class="even_row">
<td style="text-align: center">5</td>
<td>Coil springs (6 N/deg)</td>
<td style="text-align: center">7</td>
<td style="text-align: right; border-right-style: none;">$11.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$77.00</td>
</tr>
</tbody>
<tr>
<td colspan="3" style="text-align: right;">(Tax is not included; it will be collected on closing.)</td>
<td colspan="2" style="text-align: right;"><strong>GRAND TOTAL:</strong></td>
<td class="change_order_total_col"><strong>$7560.00</strong></td></tr>
</table>
<table class="sa_signature_box" style="border-top: 1px solid black; padding-top: 2em; margin-top: 2em;">
<tr>
<td>WITNESS:</td><td class="written_field" style="padding-left: 2.5in">&nbsp;</td>
<td style="padding-left: 1em">PURCHASER:</td><td class="written_field" style="padding-left: 2.5in; text-align: right;">X</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 0em">&nbsp;</td>
<td style="text-align: center; padding-top: 0em;">Mr. Leland Palmer</td>
</tr>
<tr><td colspan="4" style="white-space: normal">
This change order shall have no force or effect until approved and signed
by an authorizing signing officer of the supplier. Any change or special
request not noted on this document is not contractual.
</td>
</tr>
<tr>
<td colspan="2">ACCEPTED THIS
<span class="written_field" style="padding-left: 4em">&nbsp;</span>
DAY OF <span class="written_field" style="padding-left: 8em;">&nbsp;</span>,
20<span class="written_field" style="padding-left: 4em">&nbsp;</span>.
</td>
<td colspan="2" style="padding-left: 1em;">TWIN PEAKS SUPPLY LTD.<br/><br/>
PER:
<span class="written_field" style="padding-left: 2.5in">&nbsp;</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("verdana");
// If verdana isn't available, we'll use sans-serif.
if (!isset($font)) { Font_Metrics::get_font("sans-serif"); }
$size = 6;
$color = array(0,0,0);
$text_height = Font_Metrics::get_font_height($font, $size);
$foot = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
// Draw a line along the bottom
$y = $h - 2 * $text_height - 24;
$pdf->line(16, $y, $w - 16, $y, $color, 1);
$y += $text_height;
$text = "Job: 132-003";
$pdf->text(16, $y, $text, $font, $size, $color);
$pdf->close_object();
$pdf->add_object($foot, "all");
global $initials;
$initials = $pdf->open_object();
// Add an initals box
$text = "Initials:";
$width = Font_Metrics::get_text_width($text, $font, $size);
$pdf->text($w - 16 - $width - 38, $y, $text, $font, $size, $color);
$pdf->rectangle($w - 16 - 36, $y - 2, 36, $text_height + 4, array(0.5,0.5,0.5), 0.5);
$pdf->close_object();
$pdf->add_object($initials);
// Mark the document as a duplicate
$pdf->text(110, $h - 240, "DUPLICATE", Font_Metrics::get_font("verdana", "bold"),
110, array(0.85, 0.85, 0.85), 0, 0, -52);
$text = "Page {PAGE_NUM} of {PAGE_COUNT}";
// Center the text
$width = Font_Metrics::get_text_width("Page 1 of 2", $font, $size);
$pdf->page_text($w / 2 - $width / 2, $y, $text, $font, $size, $color);
}
</script>
</body>
</html>

210
pdf/www/test/dom_anchor_link.html Executable file
View File

@@ -0,0 +1,210 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body {
margin: 18pt 18pt 24pt 18pt;
}
* {
font-family: georgia,serif;
font-weight: bold;
}
p {
text-align: justify;
font-size: 1em;
margin: 0.5em;
padding: 10px;
}
</style>
</head>
<body>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("verdana");;
$size = 6;
$color = array(0,0,0);
$text_height = Font_Metrics::get_font_height($font, $size);
$foot = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
// Draw a line along the bottom
$y = $h - $text_height - 24;
$pdf->line(16, $y, $w - 16, $y, $color, 0.5);
$pdf->close_object();
$pdf->add_object($foot, "all");
$text = "Page {PAGE_NUM} of {PAGE_COUNT}";
// Center the text
$width = Font_Metrics::get_text_width("Page 1 of 2", $font, $size);
$pdf->page_text($w / 2 - $width / 2, $y, $text, $font, $size, $color);
}
</script>
<h1>Lorem ipsum dolor sit amet</h1>
<h2><a name="anchor1">Anchor 1</a></h2>
<p><a href="#anchor3">link to anchor3</a></p>
<p><a href="http://www.dompdf.com//">www.dompdf.com</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</p>
<p>Etiam a mauris. Proin justo elit, accumsan sit amet, tempus et,
blandit id, tellus. Morbi varius, nisi id iaculis aliquam, lacus
ligula facilisis velit, ac pharetra ipsum augue a massa. Etiam rhoncus
commodo orci. Mauris ullamcorper sagittis turpis. Nullam magna libero,
sagittis sed, auctor faucibus, accumsan vitae, urna. Pellentesque
volutpat. Aliquam sapien ipsum, eleifend nec, imperdiet vitae,
consectetuer id, quam. Donec a urna. Suspendisse sit amet
velit. Curabitur quis nisi id dui viverra ornare. Sed condimentum enim
quis tortor. Ut condimentum, magna non tempus tincidunt, leo nibh
molestie tellus, vitae convallis dolor ante sed ante. Nunc et
metus. Phasellus ultricies. Fusce faucibus tortor sit amet mauris.</p>
<p>Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</p>
<p>Cras fringilla, nulla id egestas elementum, augue nunc iaculis nibh,
ac adipiscing nibh justo id tortor. Donec vel orci a nisi ultricies
aliquet. Nunc urna quam, adipiscing molestie, vehicula non,
condimentum non, magna. Integer magna. Donec quam metus, pulvinar id,
suscipit eget, euismod ac, orci. Nulla facilisi. Nullam nec
mauris. Morbi in mi. Etiam urna lectus, pulvinar ac, sollicitudin eu,
euismod ac, lectus. Fusce elit. Sed ultricies odio ac felis.</p>
<h1>Cras iaculis. Nulla facilisi.</h1>
<h2><a name="anchor2">Anchor 2</a></h2>
<p><a href="#anchor1">link to anchor1</a></p>
<p>Cras iaculis. Nulla facilisi. Fusce vitae arcu. Integer lectus mauris,
ornare vel, accumsan eget, scelerisque vel, nunc. Maecenas justo urna,
volutpat vel, vehicula vel, ullamcorper nec, odio. Suspendisse laoreet
nisi sed erat. Cras convallis sollicitudin sapien. Phasellus ac erat
eu mi rutrum rhoncus. Morbi et velit. Morbi odio nisi, pharetra eget,
sollicitudin sed, aliquam at, nisl. Quisque euismod diam in
sapien. Integer accumsan urna in risus.</p>
<p>Proin sit amet nisl. Phasellus dui ipsum, laoreet a, pulvinar id,
fringilla ut, libero. In hac habitasse platea dictumst. Maecenas mi
magna, cursus sed, rutrum eget, molestie nec, dui. Suspendisse
lacus. Vivamus nibh urna, accumsan sit amet, gravida sed, convallis a,
leo. Cras sollicitudin orci sit amet eros. Pellentesque eu odio et
velit tempor dignissim. Morbi vehicula malesuada enim. Pellentesque
tincidunt, tellus ac fringilla tempor, justo libero interdum nunc, eu
sollicitudin tortor augue nec tellus. Nullam eget leo quis tellus
gravida faucibus. Nam gravida. Curabitur rhoncus egestas
nunc. Curabitur mollis, nisi sed suscipit gravida, enim felis interdum
justo, vel accumsan magna nunc ut libero. Ut fermentum. Fusce luctus,
est sit amet feugiat lobortis, nisl eros bibendum libero, ut suscipit
felis ligula in massa. Proin congue elit et nisi. Cras ac nisl. Nunc
ullamcorper neque vel diam.</p>
<h1>Ut pellentesque arcu ac lectus.</h1>
<p>Sed ac lorem. Ut pellentesque arcu ac lectus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Pellentesque ultrices metus sollicitudin pede. Donec fermentum
est a velit fringilla mollis. Duis ligula. Fusce viverra laoreet
odio. Suspendisse sit amet ligula. Maecenas nunc velit, sagittis eu,
bibendum eu, placerat at, nibh. Praesent ut erat eget nisi gravida
imperdiet. Quisque vitae sapien. Ut eros.</p>
<p>Donec eros ligula, dignissim vel, ultricies id, mattis in, massa. Duis
lobortis dui nec orci. Sed ullamcorper metus non massa. Aliquam eget
mauris ac nulla elementum posuere. Sed porta, augue vitae rhoncus
aliquet, felis quam eleifend est, vitae rutrum metus arcu vel
lorem. Proin laoreet, mauris sit amet aliquet eleifend, nisl sem
molestie nisi, eu varius eros ligula non erat. Integer ac
sem. Suspendisse lectus. Aliquam erat volutpat. Fusce sit amet leo
faucibus erat molestie ultrices. Maecenas lacinia lectus eget
dui. Etiam porta porttitor ante. Phasellus sit amet lacus adipiscing
enim mollis iaculis. Fusce congue, nulla a commodo aliquam, erat dui
fermentum dui, pellentesque faucibus orci enim at mauris. Pellentesque
a diam porta magna tempor posuere. Donec lorem.</p>
<p>Sed viverra aliquam turpis. Aliquam lacus. Duis id massa. Nullam
ante. Suspendisse condimentum. Donec adipiscing, felis vel semper
sollicitudin, lacus justo pretium est, sed blandit pede risus eu
ante. Praesent ante nulla, fringilla id, ultrices et, feugiat a,
metus. Proin ac velit a metus suscipit fermentum. Integer aliquet. Sed
sapien nulla, placerat at, rutrum at, condimentum quis, libero. In
accumsan, tellus nec tincidunt malesuada, pede arcu commodo ipsum, ac
mattis tortor urna vitae enim. Aenean nonummy, mauris eget commodo
bibendum, augue sem ultrices nunc, eget rhoncus metus erat placerat
lectus. Aliquam mollis lectus in justo. Vivamus iaculis lacus sit amet
ligula. Etiam consectetuer convallis diam. Curabitur sollicitudin,
felis eu vehicula scelerisque, nisl urna aliquam orci, sit amet
laoreet mi turpis id ligula. Donec at enim non nulla adipiscing
dapibus. Aenean nisl.</p>
<p>Ut in lacus nec enim volutpat pellentesque. Integer euismod. In odio
eros, malesuada in, mattis vel, tempor nec, sem. In libero tellus,
varius vitae, bibendum in, elementum quis, nisl. Duis tortor. Etiam at
justo. Pellentesque facilisis mauris non nunc. Praesent eros mi,
dapibus eget, placerat ac, lobortis quis, sem. Nulla rhoncus
turpis. Nulla vitae mi. Proin id massa. Nunc eros.</p>
<h1>Aliquam molestie pulvinar ligula.</h1>
<h2><a name="anchor3">Anchor 3</a></h2>
<p><a href="#anchor2">link to anchor2</a></p>
<p>Vestibulum dui risus, varius ut, semper et, consequat ultrices,
felis. Pellentesque iaculis urna in velit. Ut pharetra. Nunc
fringilla, nisi vitae fringilla placerat, enim justo semper erat,
mollis feugiat leo neque eu sem. Vestibulum orci urna, suscipit a,
accumsan nec, fringilla in, risus. Nullam ante. Nullam nec
eros. Nullam varius. Nulla facilisi. In auctor libero in
metus. Aliquam porttitor congue eros. Nulla facilisi. Mauris euismod
turpis ut felis. Ut nunc nisl, cursus quis, eleifend at, viverra
bibendum, lacus. Donec consequat lacus eu sapien. Fusce pulvinar
lectus quis nunc. In hac habitasse platea dictumst.</p>
<p>Aliquam molestie pulvinar ligula. Maecenas imperdiet, urna eget
ultrices adipiscing, nibh ante elementum neque, id molestie massa quam
ut nunc. Nullam porta. Phasellus a magna in sem volutpat
viverra. Quisque aliquet nunc ac turpis. Mauris dolor enim, viverra
rutrum, placerat et, laoreet et, justo. In id nulla. Donec
erat. Phasellus nec mi sed velit mollis cursus. Vestibulum
tincidunt. Praesent dui libero, facilisis eu, vulputate eget, aliquet
nec, ipsum. Pellentesque in nisl in mauris pretium euismod.</p>
</body> </html>

46
pdf/www/test/dom_br.html Executable file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
</head>
<body>
<h1>Line break test</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,<br/>
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
<br/>
<br/>
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p>Line break at beginning of next paragraph:</p>
<p style="border: 0.5pt solid blue"><br/>
Line 2</p>
<p>Line break within a font tag:
<font face="Trebuchet MS,Arial,Helvetica,sans-serif">ABCDE<br/>FGHIJK</font></p>
<p>Line break within two nested spans: <span>span 1 <span>2<br/>break</span></span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,<br/>
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
<br/>
<br/>
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
</body>
</html>

2198
pdf/www/test/dom_large_table.html Executable file
View File

File diff suppressed because it is too large Load Diff

43
pdf/www/test/dom_long_table.php Executable file
View File

@@ -0,0 +1,43 @@
<html>
<style>
table { margin: auto; }
td {
font-size: 0.8em;
padding: 4pt;
text-align: center;
font-family: sans-serif;
}
</style>
<body>
<table>
<thead>
<tr>
<td colspan="20">Header</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="20">Footer</td>
</tr>
</tfoot>
<?php
$i_max = 40;
$j_max = 20;
for ( $i = 1; $i <= $i_max; $i++): ?>
<tr>
<?php
for ( $j = 1; $j <= $j_max; $j++) {
$r = (int)(255*$i / $i_max);
$b = (int)(255*$j / $j_max);
$g = (int)(255*($i + $j)/($i_max + $j_max));
$c = "black;";
$bg = "rgb($r,$g,$b)";
echo "<td style=\"color: $c; background-color: $bg;\">" . ($i * $j) . "</td>\n";
}
?>
</tr>
<?php endfor; ?>
</table>
</body>
</html>

6
pdf/www/test/dom_nbsp.html Executable file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
</head>
<body><p style="font-family: verdana">a&#xA0;b&nbsp;c&nbsp;</p></body></html>

62
pdf/www/test/dom_nested_table.html Executable file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
table { border-collapse: separate; border-spacing: 5px; margin: 1px; border: 1px solid black; }
td { border: 1px solid grey; width: 10px; height: 10px; padding: 2px;}
td td { border: 1px solid green; }
td td td { border: 1px solid red; }
</style>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top: 1em; width: 300px;">
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">a</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
</table>
</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>e</td>
</tr>
</table>
</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
</tr>
</table>
</body>
</html>

148
pdf/www/test/dom_ol.html Executable file
View File

@@ -0,0 +1,148 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
color: #7d7a7a;
font-family: 'trebuchet ms', verdana, sans-serif;
font-size: 12px;
}
.none li { list-style-type: none; }
.decimal li { list-style-type: decimal; }
.lower-alpha li { list-style-type: lower-alpha; }
.lower-latin li { list-style-type: lower-latin; }
.lower-roman li { list-style-type: lower-roman; }
.lower-greek li { list-style-type: lower-greek; }
.upper-alpha li { list-style-type: upper-alpha; }
.upper-latin li { list-style-type: upper-latin; }
.upper-roman li { list-style-type: upper-roman; }
.upper-greek li { list-style-type: upper-greek; }
.decimal-leading-zero li { list-style-type: decimal-leading-zero; }
</style>
</head>
<body>
<h3>none</h3>
<ol class="none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>decimal</h3>
<ol class="decimal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-alpha</h3>
<ol class="lower-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-latin</h3>
<ol class="lower-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-roman</h3>
<ol class="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-greek</h3>
<ol class="lower-greek">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-alpha</h3>
<ol class="upper-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-latin</h3>
<ol class="upper-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-roman</h3>
<ol class="upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3 style="page-break-before: always;">Advanced</h3>
<ol class="decimal">
<li>Item 1</li>
<li>Item 2
<ol class="lower-roman">
<li>Item 1
<ol class="upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</li>
<li>Item 2</li>
<li>Item 3
<ol class="decimal-leading-zero">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</li>
</ol>
</li>
<li>Item 3</li>
</ol>
<h3>decimal-leading-zero</h3>
<ol class="decimal-leading-zero">
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
</ol>
</body> </html>

39
pdf/www/test/dom_simple_ul.html Executable file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<p>Here's a simple list from my favourite website:</p>
<ul>
<li>The Zend Engine II with a new object model and dozens of new features.</li>
<li>XML support has been completely redone in PHP 5, all extensions are
now focused around the excellent libxml2 library
(http://www.xmlsoft.org/).</li>
<li>A new SimpleXML extension for easily accessing and manipulating XML
as PHP objects. It can also interface with the DOM extension and
vice-versa.</li>
<li>A brand new built-in SOAP extension for interoperability with Web Services.</li>
<li>A new MySQL extension named MySQLi for developers using MySQL 4.1 and
later. This new extension includes an object-oriented interface in
addition to a traditional interface; as well as support for many of
MySQL's new features, such as prepared statements.</li>
<li>SQLite has been bundled with PHP. For more information on SQLite,
please visit their website. </li>
<li>Streams have been greatly improved, including the ability to access low-level socket operations on streams.</li>
<li>And lots more...</li>
<ul><li>Sublists</li><li>work</li><li>too!</li></ul>
</ul>
</body> </html>

106
pdf/www/test/dom_table.html Executable file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body { font-family: verdana;}
table {
margin-top: 2em;
}
thead {
background-color: #eeeeee;
}
tbody {
background-color: #ffffee;
}
th,td {
padding: 3pt;
}
table.separate {
border-collapse: separate;
border-spacing: 5pt;
border: 3pt solid #33d;
}
table.separate td {
border: 2pt solid #33d;
}
table.collapse {
border-collapse: collapse;
border: 1pt solid black;
}
table.collapse td {
border: 1pt solid black;
}
</style>
</head>
<body>
<table class="separate">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tr>
<td rowspan="2">cell 1</td>
<td>cell 2</td>
<td colspan="2">cell 3</td>
</tr>
<tr>
<td style="border: 4px double black" colspan="2">cell 4</td>
<td rowspan="2">cell 5</td>
</tr>
<tr>
<td colspan="3">cell 6</td>
</tr>
<tr>
<td colspan="4">cell 7</td>
</tr>
</table>
<table class="collapse">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td colspan="2">cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<td>cell 8</td>
<td>cell 9</td>
<td colspan="2">cell 10</td>
</tr>
</tbody>
<tr>
<td colspan="4">cell 11</td>
</tr>
</table>
</body> </html>

24
pdf/www/test/dom_table_01.html Executable file
View File

@@ -0,0 +1,24 @@
<html>
<head>
<style>
TABLE {
border: 3px, solid, #eeeeee;
}
</style>
</head>
<body>
<table border="3">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>Kaire</td>
<td>Desine</td>
</tr>
</table>
</body>
</html>

19
pdf/www/test/dom_table_image.html Executable file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
</head>
<body>
<table>
<tr>
<td><img src="images/dompdf_simple.png"/></td>
<td>Some Text</td>
</tr>
<tr>
<td>More Text</td>
<td>Blah</td>
</tr>
</table>
</body>
</html>

312
pdf/www/test/dom_ul.html Executable file
View File

@@ -0,0 +1,312 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
.disc li { list-style-type: disc; }
.circle li { list-style-type: circle; }
.square li { list-style-type: square; }
.image li { list-style-type: square; list-style-image:url(images/png.png)}
.missing li { list-style-type: square; list-style-image:url(dummy.png)}
.nobullet li { list-style-type: none;}
.noimage li { list-style-type: none; list-style-image:url(dummy.png)}
.bigimage li { list-style-type: square; list-style-image:url(images/dokuwiki-128.png)}
.mindentimage li { list-style-type: square; list-style-image:url(images/png.png); margin-left:50px;}
.mindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); margin-left:100px;}
.pindentimage li { list-style-type: square; list-style-image:url(images/png.png); padding-left:50px;}
.pindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); padding-left:100px;}
.mindentsquare li { list-style-type: square; margin-left:50px;}
.mindentsquare2 li { list-style-type: square; margin-left:100px;}
.pindentsquare li { list-style-type: square; padding-left:50px;}
.pindentsquare2 li { list-style-type: square; padding-left:100px;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</ul>
<ul class="circle">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</li>
<li>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</li>
<li style="list-style-position: inside">Inside. Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</li>
</ul>
<ul class="disc">
<li>Item 1 disc</li>
<li>Item 2 disc</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 disc</li>
</ul>
<ul class="circle">
<li>Item 1 circle</li>
<li>Item 2 circle</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 circle</li>
</ul>
<ul class="square">
<li>Item 1 square</li>
<li>Item 2 square</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 square </li>
</ul>
<ul class="image">
<li>Item 1 image</li>
<li>Item 2 image</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">Item 7 noimage</li>
<ul>
<li>sub Item 1 image</li>
<li>sub Item 2 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">sub Item 5 noimage</li>
</ul>
</ul>
<ul class="missing">
<li>Item 1 missing image - fallback square</li>
<li>Item 2 missing image - fallback square</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 missing image - fallback square</li>
</ul>
<ul class="nobullet">
<li>Item 1 nobullet</li>
<li>Item 2 nobullet</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 nobullet</li>
</ul>
<ul class="noimage">
<li>Item 1 missing image - fallback none</li>
<li>Item 2 missing image - fallback none</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 missing image - fallback none</li>
</ul>
<ul class="bigimage">
<li>Item 1 bigimage</li>
<li>Item 2 bigimage</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 bigimage</li>
</ul>
<ul class="mindentimage">
<li>margin Item 1 image</li>
<li>margin Item 2 image</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>margin Item 4 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">margin Item 7 noimage</li>
<ul class="mindentimage2">
<li>margin sub Item 1 image</li>
<li>margin sub Item 2 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">margin sub Item 5 noimage</li>
</ul>
</ul>
<ul class="pindentimage">
<li>padding Item 1 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="pindentimage2">
<li>padding sub Item 1 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<ul class="mindentsquare">
<li>margin Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="mindentsquare2">
<li>margin sub Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<ul class="pindentsquare">
<li>padding Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="pindentsquare2">
<li>padding sub Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<h1>combined list attributes list-style</h1>
<ul style="list-style:square inside url(dummy.png);">
<li>list-style:square inside url(dummy.png);</li>
<li style="list-style-position:outside;">list-style:outside;[overwrites only position]</li>
</ul>
<ul style="list-style:square inside url(images/png.png);">
<li>list-style:square inside url(images/png.png);</li>
<li style="list-style-position:outside;">list-style-position:outside;[overwrites only position]</li>
<li style="list-style:outside;">list-style-position:outside;[overwrite attributes - firefox3: all; dompdf, internet explorer 8: only position]</li>
<li style="list-style:none;">list-style:none; [resets both, bullet and image]</li>
</ul>
</body> </html>

14
pdf/www/test/encoding_entities.html Executable file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
p.serif { font-family: serif; }
p.sans-serif { font-family: arial, sans-serif; }
</style>
</head>
<body>
<p class="serif">&eacute; &copy; &laquo; avoir et &ecirc;tre &alpha; &beta;</p>
<p class="sans-serif">&eacute; &copy; &laquo; avoir et &ecirc;tre &alpha; &beta;</p>
</body> </html>

1162
pdf/www/test/encoding_latin1.html Executable file
View File

File diff suppressed because it is too large Load Diff

570
pdf/www/test/encoding_special.html Executable file
View File

@@ -0,0 +1,570 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML 4.0 Special Entities</title>
<link rev=Made href="mailto:liam@htmlhelp.com">
<link rel=Start href="../index.html">
<link rel=Prev href="symbols.html">
<style>
body {
background: white;
color: black;
font-family: sans-serif;
}
h1 {
color: #c33;
background: none;
font-weight: bold;
text-align: center
}
h2 {
color: #00008b;
background: none;
font-weight: bold
}
h3 {
color: #006400;
background: none;
margin-left: 4%;
margin-right: 4%;
font-weight: bold
}
h4 {
margin-left: 6%;
margin-right: 6%;
font-weight: bold
}
h5 {
margin-left: 6%;
margin-right: 6%;
font-weight: bold
}
ul, ol, dl, p {
margin-left: 6%;
margin-right: 6%
}
ul ul, table ol, table ul, dl ol, dl ul {
margin-left: 1.2em;
margin-right: 1%;
padding-left: 0
}
pre {
margin-left: 10%;
white-space: pre
}
table caption {
font-size: larger;
font-weight: bolder
}
table p, table dl, ol p, ul p, dl p, blockquote p, .note p, .note ul, .note ol, .note dl, li pre, dd pre {
margin-left: 0;
margin-right: 0
}
p.top {
margin-left: 1%;
margin-right: 1%
}
blockquote {
margin-left: 8%;
margin-right: 8%;
border: thin ridge #dc143c
}
blockquote pre {
margin-left: 1%;
margin-right: 1%
}
dt a {
font-weight: bold;
margin-top: .8em
}
a:link {
color: #00f;
background: none;
}
a:visited {
color: #800080;
background: none;
}
a:active {
color: green;
background: #FFD700
}
.html {
color: #000080;
background: none
}
.css {
color: #800000;
background: none
}
.javascript {
color: #008000;
background: none
}
.example { margin-left: 10% }
dfn {
font-style: normal;
font-weight: bolder
}
var sub { font-style: normal }
.note {
font-size: 85%;
margin-left: 10%
}
.SMA {
color: fuchsia;
background: none;
font-family: Kids, "Comic Sans MS", Jester
}
.oops {
font-family: Jester, "Comic Sans MS"
}
.author {
font-style: italic
}
.copyright {
font-size: smaller;
text-align: right;
clear: right
}
.toolbar {
text-align: center
}
.toolbar IMG {
float: right
}
.error {
color: #DC143C;
background: none;
text-decoration: none
}
.warning {
color: #FF4500;
background: none;
text-decoration: none
}
.error strong {
color: #DC143C;
background: #FFD700;
text-decoration: none
}
.warning strong {
color: #FF4500;
background: #FFD700;
text-decoration: none
}
.warning a:link, .warning a:visited, .warning a:active {
color: #FF4500;
background: none;
text-decoration: underline
}
.error a:link, .error a:visited, .error a:active {
color: #DC143C;
background: none;
text-decoration: underline
}
.error strong a:link, .error strong a:visited, .error strong a:active {
color: #DC143C;
background: #FFD700
}
.warning strong a:link, .warning strong a:visited, .warning strong a:active {
color: #FF4500;
background: #FFD700
}
colgroup.entity { text-align: center }
.default { text-decoration: underline; font-style: normal }
.required { font-weight: bold }
td li.transitional, .elements li.transitional {
font-weight: lighter;
color: #696969;
background: none
}
td li.frameset, .elements li.frameset {
font-weight: lighter;
color: #808080;
background: none
}
.footer, .checkedDocument {
margin-top: 2em;
padding-top: 1em;
border-top: solid thin black
}
strong.legal {
font-weight: normal;
text-transform: uppercase
}
@media print {
input#toggler, .toolbar { display: none }
}
table { border-collapse: collapse; width: 100%; }
td { border: 0.5pt solid black; }
</style>
<meta name="author" content="Liam Quinn">
<meta name="description" content="A table of the HTML 4.0 entities for markup-significant and internationalization characters.">
<meta name="keywords" content="internationalization, internationalisation, i18n, I18N, entities, characters, character set, HTML, HyperText Markup Language, HTML 4.0, HTML4, character entity reference, decimal, hexadecimal, hex, browser test, WDG, Web Design Group">
<body>
<h1>Special Entities</h1>
<p>The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for markup-significant and internationalization characters, as well as the rendering of each in your browser. <a href="http://www.unicode.org/charts/">Glyphs</a> of the characters are available at the <a href="http://www.unicode.org/">Unicode Consortium</a>.</p>
<p>With the exception of <a href="http://www.w3.org/MarkUp/html-spec/">HTML 2.0</a>'s <strong class=html>&amp;quot;</strong>, <strong class=html>&amp;amp;</strong>, <strong class=html>&amp;lt;</strong>, and <strong class=html>&amp;gt;</strong>, browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.</p>
<table>
<thead>
<tr>
<th scope=col rowspan=2>Character</th>
<th scope=col rowspan=2>Entity</th>
<th scope=col rowspan=2>Decimal</th>
<th scope=col rowspan=2>Hex</th>
<th scope=colgroup colspan=3>Rendering in Your Browser</th>
</tr>
<tr>
<th scope=col>Entity</th>
<th scope=col>Decimal</th>
<th scope=col>Hex</th>
</tr>
</thead>
<tbody>
<tr>
<td scope=row>quotation mark = APL quote</td>
<td>&amp;quot;</td>
<td>&amp;#34;</td>
<td>&amp;#x22;</td>
<td>&quot;</td>
<td>&#34;</td>
<td>&#x22;</td>
</tr>
<tr>
<td scope=row>ampersand</td>
<td>&amp;amp;</td>
<td>&amp;#38;</td>
<td>&amp;#x26;</td>
<td>&amp;</td>
<td>&#38;</td>
<td>&#x26;</td>
</tr>
<tr>
<td scope=row>less-than sign</td>
<td>&amp;lt;</td>
<td>&amp;#60;</td>
<td>&amp;#x3C;</td>
<td>&lt;</td>
<td>&#60;</td>
<td>&#x3C;</td>
</tr>
<tr>
<td scope=row>greater-than sign</td>
<td>&amp;gt;</td>
<td>&amp;#62;</td>
<td>&amp;#x3E;</td>
<td>&gt;</td>
<td>&#62;</td>
<td>&#x3E;</td>
</tr>
<tr>
<td scope=row>Latin capital ligature OE</td>
<td>&amp;OElig;</td>
<td>&amp;#338;</td>
<td>&amp;#x152;</td>
<td>&OElig;</td>
<td>&#338;</td>
<td>&#x152;</td>
</tr>
<tr>
<td scope=row>Latin small ligature oe</td>
<td>&amp;oelig;</td>
<td>&amp;#339;</td>
<td>&amp;#x153;</td>
<td>&oelig;</td>
<td>&#339;</td>
<td>&#x153;</td>
</tr>
<tr>
<td scope=row>Latin capital letter S with caron</td>
<td>&amp;Scaron;</td>
<td>&amp;#352;</td>
<td>&amp;#x160;</td>
<td>&Scaron;</td>
<td>&#352;</td>
<td>&#x160;</td>
</tr>
<tr>
<td scope=row>Latin small letter s with caron</td>
<td>&amp;scaron;</td>
<td>&amp;#353;</td>
<td>&amp;#x161;</td>
<td>&scaron;</td>
<td>&#353;</td>
<td>&#x161;</td>
</tr>
<tr>
<td scope=row>Latin capital letter Y with diaeresis</td>
<td>&amp;Yuml;</td>
<td>&amp;#376;</td>
<td>&amp;#x178;</td>
<td>&Yuml;</td>
<td>&#376;</td>
<td>&#x178;</td>
</tr>
<tr>
<td scope=row>modifier letter circumflex accent</td>
<td>&amp;circ;</td>
<td>&amp;#710;</td>
<td>&amp;#x2C6;</td>
<td>&circ;</td>
<td>&#710;</td>
<td>&#x2C6;</td>
</tr>
<tr>
<td scope=row>small tilde</td>
<td>&amp;tilde;</td>
<td>&amp;#732;</td>
<td>&amp;#x2DC;</td>
<td>&tilde;</td>
<td>&#732;</td>
<td>&#x2DC;</td>
</tr>
<tr>
<td scope=row>en space</td>
<td>&amp;ensp;</td>
<td>&amp;#8194;</td>
<td>&amp;#x2002;</td>
<td>&ensp;</td>
<td>&#8194;</td>
<td>&#x2002;</td>
</tr>
<tr>
<td scope=row>em space</td>
<td>&amp;emsp;</td>
<td>&amp;#8195;</td>
<td>&amp;#x2003;</td>
<td>&emsp;</td>
<td>&#8195;</td>
<td>&#x2003;</td>
</tr>
<tr>
<td scope=row>thin space</td>
<td>&amp;thinsp;</td>
<td>&amp;#8201;</td>
<td>&amp;#x2009;</td>
<td>&thinsp;</td>
<td>&#8201;</td>
<td>&#x2009;</td>
</tr>
<tr>
<td scope=row>zero width non-joiner</td>
<td>&amp;zwnj;</td>
<td>&amp;#8204;</td>
<td>&amp;#x200C;</td>
<td>&zwnj;</td>
<td>&#8204;</td>
<td>&#x200C;</td>
</tr>
<tr>
<td scope=row>zero width joiner</td>
<td>&amp;zwj;</td>
<td>&amp;#8205;</td>
<td>&amp;#x200D;</td>
<td>&zwj;</td>
<td>&#8205;</td>
<td>&#x200D;</td>
</tr>
<tr>
<td scope=row>left-to-right mark</td>
<td>&amp;lrm;</td>
<td>&amp;#8206;</td>
<td>&amp;#x200E;</td>
<td>&lrm;</td>
<td>&#8206;</td>
<td>&#x200E;</td>
</tr>
<tr>
<td scope=row>right-to-left mark</td>
<td>&amp;rlm;</td>
<td>&amp;#8207;</td>
<td>&amp;#x200F;</td>
<td>&rlm;</td>
<td>&#8207;</td>
<td>&#x200F;</td>
</tr>
<tr>
<td scope=row>en dash</td>
<td>&amp;ndash;</td>
<td>&amp;#8211;</td>
<td>&amp;#x2013;</td>
<td>&ndash;</td>
<td>&#8211;</td>
<td>&#x2013;</td>
</tr>
<tr>
<td scope=row>em dash</td>
<td>&amp;mdash;</td>
<td>&amp;#8212;</td>
<td>&amp;#x2014;</td>
<td>&mdash;</td>
<td>&#8212;</td>
<td>&#x2014;</td>
</tr>
<tr>
<td scope=row>left single quotation mark</td>
<td>&amp;lsquo;</td>
<td>&amp;#8216;</td>
<td>&amp;#x2018;</td>
<td>&lsquo;</td>
<td>&#8216;</td>
<td>&#x2018;</td>
</tr>
<tr>
<td scope=row>right single quotation mark</td>
<td>&amp;rsquo;</td>
<td>&amp;#8217;</td>
<td>&amp;#x2019;</td>
<td>&rsquo;</td>
<td>&#8217;</td>
<td>&#x2019;</td>
</tr>
<tr>
<td scope=row>single low-9 quotation mark</td>
<td>&amp;sbquo;</td>
<td>&amp;#8218;</td>
<td>&amp;#x201A;</td>
<td>&sbquo;</td>
<td>&#8218;</td>
<td>&#x201A;</td>
</tr>
<tr>
<td scope=row>left double quotation mark</td>
<td>&amp;ldquo;</td>
<td>&amp;#8220;</td>
<td>&amp;#x201C;</td>
<td>&ldquo;</td>
<td>&#8220;</td>
<td>&#x201C;</td>
</tr>
<tr>
<td scope=row>right double quotation mark</td>
<td>&amp;rdquo;</td>
<td>&amp;#8221;</td>
<td>&amp;#x201D;</td>
<td>&rdquo;</td>
<td>&#8221;</td>
<td>&#x201D;</td>
</tr>
<tr>
<td scope=row>double low-9 quotation mark</td>
<td>&amp;bdquo;</td>
<td>&amp;#8222;</td>
<td>&amp;#x201E;</td>
<td>&bdquo;</td>
<td>&#8222;</td>
<td>&#x201E;</td>
</tr>
<tr>
<td scope=row>dagger</td>
<td>&amp;dagger;</td>
<td>&amp;#8224;</td>
<td>&amp;#x2020;</td>
<td>&dagger;</td>
<td>&#8224;</td>
<td>&#x2020;</td>
</tr>
<tr>
<td scope=row>double dagger</td>
<td>&amp;Dagger;</td>
<td>&amp;#8225;</td>
<td>&amp;#x2021;</td>
<td>&Dagger;</td>
<td>&#8225;</td>
<td>&#x2021;</td>
</tr>
<tr>
<td scope=row>per mille sign</td>
<td>&amp;permil;</td>
<td>&amp;#8240;</td>
<td>&amp;#x2030;</td>
<td>&permil;</td>
<td>&#8240;</td>
<td>&#x2030;</td>
</tr>
<tr>
<td scope=row>single left-pointing angle quotation mark</td>
<td>&amp;lsaquo;</td>
<td>&amp;#8249;</td>
<td>&amp;#x2039;</td>
<td>&lsaquo;</td>
<td>&#8249;</td>
<td>&#x2039;</td>
</tr>
<tr>
<td scope=row>single right-pointing angle quotation mark</td>
<td>&amp;rsaquo;</td>
<td>&amp;#8250;</td>
<td>&amp;#x203A;</td>
<td>&rsaquo;</td>
<td>&#8250;</td>
<td>&#x203A;</td>
</tr>
<tr>
<td scope=row>euro sign</td>
<td>&amp;euro;</td>
<td>&amp;#8364;</td>
<td>&amp;#x20AC;</td>
<td>&euro;</td>
<td>&#8364;</td>
<td>&#x20AC;</td>
</tr>
</tbody>
</table>
<div class=footer>
<address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> &lt;<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>&gt;</address>
<p class=toolbar><a href="../index.html" rel=Start>HTML&#160;4.0&#160;Reference</a>&#160;~ <a href="latin1.html">Latin-1&#160;Characters</a>&#160;~ <a href="symbols.html" rel=Prev>Symbols&#160;and&#160;Greek&#160;Letters</a></p>
<p class=copyright>Copyright &copy; 1998 by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a>. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at <a href="http://www.opencontent.org/openpub/">http://www.opencontent.org/openpub/</a>).</p>
<p class=copyright>Modfications made by Benj Carson <a>benjcarson@digitaljunkies.ca</a> for dompdf, Jan 5, 2006.</p>
</div>
</body>
</html>

1400
pdf/www/test/encoding_symbols.html Executable file
View File

File diff suppressed because it is too large Load Diff

8
pdf/www/test/encoding_unicode.html Executable file
View File

@@ -0,0 +1,8 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body style="font-size: 8pt; font-family: verdana, sans-serif;">
献给母亲的爱
</body>
</html>

13
pdf/www/test/encoding_unicode_wrapping.html Executable file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wrapping of non-ANSI characters</title>
</head>
<body>
No se tendrá en cuenta el hecho de que las partes tengan sus establecimientos en Estados diferentes
cuando ello no resulte del contrato, ni de los tratos entre ellas, ni de información revelada por
las partes en cualquier momento antes de la celebración del contrato o en el momento de su celebración.
</body>
</html>

793
pdf/www/test/encoding_utf-8.html Executable file
View File

@@ -0,0 +1,793 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8" />
<style type="text/css">
* {
font-family: DejaVuSansMono, monospace;
}
</style>
<title>Unicode (UTF-8) Test</title>
</head>
<body dir="ltr">
<h1 lang="en"><small>Unicode (UTF-8) test</small></h1>
<p lang="en">You can use this document to check if your browser and your installed fonts display multilingual HTML documents in <a href="http://www.unicode.org/unicode/faq/utf_bom.html#UTF8" title=" FAQ - UTF and BOM ">Unicode (UTF-8)</a> correctly.</p>
<hr id="latin" class="noprint">
<h2 lang="en" class="newpage"><small>Latin extended</small></h2>
<dl>
<dt lang="en">Letters with <strong>acute</strong></dt>
<dd>AÁ aá &nbsp; CĆ cć &nbsp; EÉ eé &nbsp; IÍ ií &nbsp; LĹ lĺ &nbsp; NŃ nń &nbsp; OÓ oó &nbsp; RŔ rŕ &nbsp; SŚ sś &nbsp; UÚ uú &nbsp; YÝ yý &nbsp; ZŹ zź</dd>
<dt lang="en">Letters with <strong>apostrophe</strong> (<strong>hacek</strong>)</dt>
<dd>dď &nbsp; LĽ lľ &nbsp; tť</dd>
<dt lang="en">Letters with <strong>breve</strong></dt>
<dd>AĂ aă &nbsp; GĞ gğ &nbsp; UŬ uŭ</dd>
<dt lang="en">Letters with <strong>caron</strong> (<strong>hacek</strong>)</dt>
<dd>CČ cč &nbsp; DĎ &nbsp; EĚ eě &nbsp; NŇ nň &nbsp; RŘ rř &nbsp; SŠ sš &nbsp; TŤ &nbsp; ZŽ zž</dd>
<dt lang="en">Letters with <strong>cedilla</strong> (<strong>comma</strong>)</dt>
<dd>CÇ cç &nbsp; GĢ gģ &nbsp; KĶ kķ &nbsp; LĻ lļ &nbsp; NŅ nņ &nbsp; RŖ rŗ &nbsp; SŞ sş &nbsp; TŢ tţ</dd>
<dt lang="en">Letters with <strong>circumflex</strong></dt>
<dd>AÂ aâ &nbsp; CĈ cĉ &nbsp; EÊ eê &nbsp; GĜ gĝ &nbsp; HĤ hĥ &nbsp; IÎ iî &nbsp; JĴ jĵ &nbsp; OÔ oô &nbsp; SŜ sŝ &nbsp; UÛ uû &nbsp; WŴ wŵ &nbsp; YŶ yŷ</dd>
<dt lang="en">Letters with <strong>diaeresis</strong> (<strong>umlaut</strong>)</dt>
<dd>AÄ aä &nbsp; EË eë &nbsp; IÏ iï &nbsp; OÖ oö &nbsp; UÜ uü &nbsp; YŸ yÿ</dd>
<dt lang="en">Letters with/without <strong>dot above</strong></dt>
<dd>CĊ cċ &nbsp; EĖ eė &nbsp; GĠ gġ &nbsp; Iİ iı &nbsp; ZŻ zż</dd>
<dt lang="en">Letters with <strong>double acute</strong></dt>
<dd>OŐ oő &nbsp; UŰ uű</dd>
<dt lang="en">Letters with <strong>grave</strong></dt>
<dd>AÀ aà &nbsp; EÈ eè &nbsp; IÌ iì &nbsp; OÒ oò &nbsp; UÙ uù</dd>
<dt lang="en">Letters with <strong>horn</strong></dt>
<dd>OƠ oơ &nbsp; UƯ uư</dd>
<dt lang="en">Letters with <strong>macron</strong></dt>
<dd>AĀ aā &nbsp; EĒ eē &nbsp; IĪ iī &nbsp; OŌ oō &nbsp; UŪ uū</dd>
<dt lang="en">Letters with <strong>ogonek</strong></dt>
<dd>AĄ aą &nbsp; EĘ eę &nbsp; IĮ iį &nbsp; UŲ uų</dd>
<dt lang="en">Letters with <strong>ring above</strong></dt>
<dd>AÅ aå &nbsp; UŮ uů</dd>
<dt lang="en">Letters with <strong>stroke</strong></dt>
<dd>DĐ dđ &nbsp; HĦ hħ &nbsp; LŁ lł &nbsp; OØ oø</dd>
<dt lang="en">Letters with <strong>tilde</strong></dt>
<dd>AÃ aã &nbsp; NÑ nñ &nbsp; OÕ oõ</dd>
<dt lang="en"><strong>Ligatures</strong></dt>
<dd>AEÆ aeæ &nbsp; OEŒ oeœ</dd>
<dt lang="en"><strong>Eth</strong> &amp; <strong>Thorn</strong></dt>
<dd>DÐ dð &nbsp; THÞ thþ</dd>
<dt lang="en">German <strong>sharp s</strong> &amp; <strong>long s</strong></dt>
<dd>ß &nbsp; ſ</dd>
</dl>
<h3 lang="en" class="noprint"><small><a href="combining-marks.html">Combining diacritical marks</a><br>&nbsp;</small></h3>
<hr id="greek" class="noprint">
<h2 lang="en" class="newpage"><small><a href="greek-alphabet.html">Greek</a></small></h2>
<dl>
<dt lang="en"><strong>Capital</strong> letters</dt>
<dd>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</dd>
<dt lang="en"><strong>Capital</strong> letters with <strong>tonos</strong></dt>
<dd>Ά &nbsp; Έ &nbsp; Ή &nbsp; Ί &nbsp; Ό &nbsp; Ύ &nbsp; Ώ</dd>
<dt lang="en"><strong>Capital</strong> letters with <strong>dialytika</strong></dt>
<dd>Ϊ &nbsp; Ϋ</dd>
<dt lang="en"><strong>Small</strong> letters</dt>
<dd>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σς τ υ φ χ ψ ω</dd>
<dt lang="en"><strong>Small</strong> letters with <strong>tonos</strong></dt>
<dd>ά &nbsp; έ &nbsp; ή &nbsp; ί &nbsp; ό &nbsp; ύ &nbsp; ώ</dd>
<dt lang="en"><strong>Small</strong> letters with <strong>dialytika</strong></dt>
<dd>ϊ &nbsp; ϋ</dd>
<dt lang="en"><strong>Small</strong> letters with <strong>dialytika and tonos</strong></dt>
<dd>ΐ &nbsp; ΰ</dd>
</dl>
<hr id="cyrillic" class="noprint">
<h2 lang="en"><small><a href="cyrillic-script.html">Cyrillic</a></small></h2>
<dl>
<dt lang="en"><strong>Russian</strong> alphabet</dt>
<dd>А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
<br>а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я</dd>
<dt lang="en"><strong>Belarussian</strong> alphabet</dt>
<dd>А Б В Г Д Е Ё Ж З І Й К Л М Н О П Р С Т У Ў Ф Х Ц Ч Ш Ы Ь Э Ю Я
<br>а б в г д е ё ж з і й к л м н о п р с т у ў ф х ц ч ш ы ь э ю я</dd>
<dt lang="en"><strong>Ukrainian</strong> alphabet</dt>
<dd>А Б В Г Ґ Д Е Є Ж З И І Ї Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
<br>а б в г ґ д е є ж з и і ї й к л м н о п р с т у ф х ц ч ш щ ь ю я</dd>
<dt lang="en"><strong>Bulgarian</strong> alphabet</dt>
<dd>А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ь Ю Я
<br>а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ь ю я</dd>
<dt lang="en"><strong>Macedonian</strong> alphabet</dt>
<dd>А Б В Г Д Ѓ Е Ж З Ѕ И Ј К Л Љ М Н Њ О П Р С Т Ќ У Ф Х Ц Ч Џ Ш
<br>а б в г д ѓ е ж з ѕ и ј к л љ м н њ о п р с т ќ у ф х ц ч џ ш</dd>
<dt lang="en"><strong>Serbian</strong> alphabet</dt>
<dd>А Б В Г Д Ђ Е Ж З И Ј К Л Љ М Н Њ О П Р С Т Ћ У Ф Х Ц Ч Џ Ш
<br>а б в г д ђ е ж з и ј к л љ м н њ о п р с т ћ у ф х ц ч џ ш</dd>
<dt lang="en"><strong>Mongolian</strong> alphabet</dt>
<dd class="translit">
A B V G D E &#203; Zh Z I J K L M N O &#214; P R S T U &#220; F X C Ch Sh Shh " Y ' E Ju Ja</dd>
<dd>А Б В Г Д Е Ё Ж З И Й К Л М Н О Ө П Р С Т У Ү Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
<br>а б в г д е ё ж з и й к л м н о ө п р с т у ү ф х ц ч ш щ ъ ы ь э ю я</dd>
</dl>
<hr id="armenian" class="noprint">
<h2 lang="en" class="newpage"><small><a href="armenian-alphabet.html">Armenian</a></small></h2>
<dl>
<dt lang="en"><strong>Capital</strong> letters</dt>
<dd class="translit">a b g d e z &#234; &#259; th
&nbsp; &#382; i l x c&#8217; k&#8217; h dz &#287;
&nbsp; &#269;&#8217; m j n &#353; o &#269; p&#8217; d&#382;
&nbsp; rr s v t&#8217; r c w ph kh
&nbsp; &#244; f</dd>
<dd>
<dfn title=" ajb " >Ա</dfn>
<dfn title=" ben " >Բ</dfn>
<dfn title=" gim " >Գ</dfn>
<dfn title=" da " >Դ</dfn>
<dfn title=" eC " >Ե</dfn>
<dfn title=" za " >Զ</dfn>
<dfn title=" &#234; ">Է</dfn>
<dfn title=" ath " >Ը</dfn>
<dfn title=" tho " >Թ</dfn> &nbsp;
<dfn title=" Ze " >Ժ</dfn>
<dfn title=" ini " >Ի</dfn>
<dfn title=" ljun ">Լ</dfn>
<dfn title=" xe " >Խ</dfn>
<dfn title=" c'a " >Ծ</dfn>
<dfn title=" k'en ">Կ</dfn>
<dfn title=" ho " >Հ</dfn>
<dfn title=" dza " >Ձ</dfn>
<dfn title=" Gat' ">Ղ</dfn> &nbsp;
<dfn title=" C'e " >Ճ</dfn>
<dfn title=" men " >Մ</dfn>
<dfn title=" ji " >Յ</dfn>
<dfn title=" nu " >Ն</dfn>
<dfn title=" Sa " >Շ</dfn>
<dfn title=" vo " >Ո</dfn>
<dfn title=" Ca " >Չ</dfn>
<dfn title=" p'e " >Պ</dfn>
<dfn title=" dZe " >Ջ</dfn> &nbsp;
<dfn title=" rra " >Ռ</dfn>
<dfn title=" se " >Ս</dfn>
<dfn title=" vev " >Վ</dfn>
<dfn title=" t'jun ">Տ</dfn>
<dfn title=" re " >Ր</dfn>
<dfn title=" co " >Ց</dfn>
<dfn title=" vjun " >Ւ</dfn>
<dfn title=" phjur ">Փ</dfn>
<dfn title=" khe " >Ք</dfn> &nbsp;
<dfn title=" o " >Օ</dfn>
<dfn title=" fe " >Ֆ</dfn>
</dd>
<dt lang="en"><strong>Small</strong> letters</dt>
<dd class="translit">a b g d e z &#234; &#259; th
&nbsp; &#382; i l x c&#8217; k&#8217; h dz &#287;
&nbsp; &#269;&#8217; m j n &#353; o &#269; p&#8217; d&#382;
&nbsp; rr s v t&#8217; r c w ph kh
&nbsp; ew &#244; f</dd>
<dd>
<dfn title=" ajb " >ա</dfn>
<dfn title=" ben " >բ</dfn>
<dfn title=" gim " >գ</dfn>
<dfn title=" da " >դ</dfn>
<dfn title=" eC " >ե</dfn>
<dfn title=" za " >զ</dfn>
<dfn title=" &#234; ">է</dfn>
<dfn title=" ath " >ը</dfn>
<dfn title=" tho " >թ</dfn> &nbsp;
<dfn title=" Ze " >ժ</dfn>
<dfn title=" ini " >ի</dfn>
<dfn title=" ljun ">լ</dfn>
<dfn title=" xe " >խ</dfn>
<dfn title=" c'a " >ծ</dfn>
<dfn title=" k'en ">կ</dfn>
<dfn title=" ho " >հ</dfn>
<dfn title=" dza " >ձ</dfn>
<dfn title=" Gat' ">ղ</dfn> &nbsp;
<dfn title=" C'e " >ճ</dfn>
<dfn title=" men " >մ</dfn>
<dfn title=" ji " >յ</dfn>
<dfn title=" nu " >ն</dfn>
<dfn title=" Sa " >շ</dfn>
<dfn title=" vo " >ո</dfn>
<dfn title=" Ca " >չ</dfn>
<dfn title=" p'e " >պ</dfn>
<dfn title=" dZe " >ջ</dfn> &nbsp;
<dfn title=" rra " >ռ</dfn>
<dfn title=" se " >ս</dfn>
<dfn title=" vev " >վ</dfn>
<dfn title=" t'jun ">տ</dfn>
<dfn title=" re " >ր</dfn>
<dfn title=" co " >ց</dfn>
<dfn title=" vjun " >ւ</dfn>
<dfn title=" phjur ">փ</dfn>
<dfn title=" khe " >ք</dfn> &nbsp;
<dfn title=" ew " >և</dfn>
<dfn title=" o " >օ</dfn>
<dfn title=" fe " >ֆ</dfn>
</dd>
</dl>
<hr id="georgian" class="noprint">
<h2 lang="en"><small><a href="georgian-alphabet.html">Georgian</a></small></h2>
<dl>
<dt lang="en"><strong>Mxedruli</strong> (<strong>Mkhedruli</strong>) script</dt>
<dd class="translit">a b g d e v z th
&nbsp; i k&#8217; l m n o p&#8217; &#382;
&nbsp; r s t&#8217; u ph kh &#287; q&#8217; &#353;
&nbsp; &#269; c dz c&#8217; &#269;&#8217; x d&#382; h</dd>
<dd>
<dfn title=" ani " >ა</dfn>
<dfn title=" bani " >ბ</dfn>
<dfn title=" gani " >გ</dfn>
<dfn title=" doni " >დ</dfn>
<dfn title=" eni " >ე</dfn>
<dfn title=" vini " >ვ</dfn>
<dfn title=" zeni " >ზ</dfn>
<dfn title=" thani ">თ</dfn> &nbsp;
<dfn title=" ini " >ი</dfn>
<dfn title=" k'ani ">კ</dfn>
<dfn title=" lasi " >ლ</dfn>
<dfn title=" mani " >მ</dfn>
<dfn title=" nari " >ნ</dfn>
<dfn title=" oni " >ო</dfn>
<dfn title=" p'ari ">პ</dfn>
<dfn title=" Zani " >ჟ</dfn> &nbsp;
<dfn title=" rae " >რ</dfn>
<dfn title=" sani " >ს</dfn>
<dfn title=" t'ari ">ტ</dfn>
<dfn title=" uni " >უ</dfn>
<dfn title=" phari ">ფ</dfn>
<dfn title=" khani ">ქ</dfn>
<dfn title=" Gani " >ღ</dfn>
<dfn title=" q'ari ">ყ</dfn>
<dfn title=" Sini " >შ</dfn> &nbsp;
<dfn title=" Cini " >ჩ</dfn>
<dfn title=" cani " >ც</dfn>
<dfn title=" dzili ">ძ</dfn>
<dfn title=" c'ili ">წ</dfn>
<dfn title=" C'ari ">ჭ</dfn>
<dfn title=" xani " >ხ</dfn>
<dfn title=" dZani ">ჯ</dfn>
<dfn title=" hae " >ჰ</dfn>
</dd>
</dl>
<hr id="hebrew" class="noprint">
<h2 lang="en"><small>Hebrew</small></h2>
<dl>
<dt lang="en"><strong>Hebrew</strong> alphabet</dt>
<dd class="translit">&#8217; v g d h w z H T y xx l mm nn s &#8216; ff cc q r S (&nbsp;&#353; &#347;&nbsp;) t</dd>
<dd dir="rtl" class="rightalign">&nbsp;
א ב ג ד ה ו ז ח ט י כך ל מם נן ס ע פף צץ ק ר ש ( שׁ שׂ ) ת
</dd>
<dt lang="en">Letters with <strong>dagesh</strong> (<strong>mappiq</strong>)</dt>
<dd class="translit">&#8217; b g d h w z &nbsp; T y kk l m&nbsp; n&nbsp; s &nbsp; pp c&nbsp; q r S (&nbsp;&#353; &#347;&nbsp;) t</dd>
<dd dir="rtl" class="rightalign">&nbsp;
אּ בּ גּ דּ הּ וּ זּ טּ יּ כּךּ לּ מּ נּ סּ פּףּ צּ קּ רּ שּ ( שּׁ שּׂ ) תּ
</dd>
<dt lang="en"><strong>Yiddish</strong> digraphs</dt>
<dd class="translit">ww &nbsp; wy &nbsp; yy</dd>
<dd dir="rtl" class="rightalign">&nbsp;
װ ױ ײ
</dd>
<dt lang="en">Letters with <strong>rafe</strong></dt>
<dd class="translit">v &nbsp; x &nbsp; f</dd>
<dd dir="rtl" class="rightalign">&nbsp;
<dfn title=" bet with rafe ">בֿ</dfn> &nbsp;
<dfn title=" kaf with rafe ">כֿ</dfn> &nbsp;
<dfn title=" pe with rafe " >פֿ</dfn></dd>
<dt lang="en">Vowels with <strong>points</strong></dt>
<dd class="translit">a &nbsp; &#229; &nbsp; o &nbsp; u &nbsp; i &nbsp; ai</dd>
<dd dir="rtl" class="rightalign">&nbsp;
<dfn title=" alef with pataH ">אַ</dfn> &nbsp;
<dfn title=" alef with qamac ">אָ</dfn> &nbsp;
<dfn title=" waw with Holam " >וֹ </dfn>&nbsp;
<dfn title=" waw with shuruq ">וּ </dfn>&nbsp;
<dfn title=" yod with Hiriq " >יִ </dfn>&nbsp;
<dfn title=" yodyod with pataH ">ײַ</dfn></dd>
</dl>
<hr id="arabic" class="noprint">
<h2 lang="en" class="newpage"><small>Arabic</small></h2>
<dl>
<dt lang="en"><a href="arabic-alphabet.html"><strong>Arabic</strong> alphabet</a></dt>
<dd class="translit">&#8217;a a b t &#254; j H x d &#240; r z s &#353; S D T Z &#8216; &#287; f v q k l m n h -t w &#255; y -a</dd>
<dd dir="rtl" class="rightalign"><big>
&nbsp;<dfn title=" alif maddah ">ـآ آ</dfn>&nbsp;
&nbsp;<dfn title=" alif " >ـا ا</dfn>&nbsp;
&nbsp;<dfn title=" ba " >بـبـب ب</dfn>&nbsp;
&nbsp;<dfn title=" ta " >تـتـت ت</dfn>&nbsp;
&nbsp;<dfn title=" tha " >ثـثـث ث</dfn>&nbsp;
&nbsp;<dfn title=" jim " >جـجـج ج</dfn>&nbsp;
&nbsp;<dfn title=" Ha " >حـحـح ح</dfn>&nbsp;
&nbsp;<dfn title=" xa " >خـخـخ خ</dfn>&nbsp;
&nbsp;<dfn title=" dal " >ـد د</dfn>&nbsp;
&nbsp;<dfn title=" dhal " >ـذ ذ</dfn>&nbsp;
&nbsp;<dfn title=" ra " >ـر ر</dfn>&nbsp;
&nbsp;<dfn title=" zay " >ـز ز</dfn>&nbsp;
&nbsp;<dfn title=" sin " >سـسـس س</dfn>&nbsp;
&nbsp;<dfn title=" shin " >شـشـش ش</dfn>&nbsp;
&nbsp;<dfn title=" Sad " >صـصـص ص</dfn>&nbsp;
&nbsp;<dfn title=" Dad " >ضـضـض ض</dfn>&nbsp;
&nbsp;<dfn title=" Ta " >طـطـط ط</dfn>&nbsp;
&nbsp;<dfn title=" Za " >ظـظـظ ظ</dfn>&nbsp;
&nbsp;<dfn title=" ayn " >عـعـع ع</dfn>&nbsp;
&nbsp;<dfn title=" ghayn " >غـغـغ غ</dfn>&nbsp;
&nbsp;<dfn title=" fa " >فـفـف ف</dfn>&nbsp;
&nbsp;<dfn title=" va " >ڤـڤـڤ ڤ</dfn>&nbsp;
&nbsp;<dfn title=" qaf " >قـقـق ق</dfn>&nbsp;
&nbsp;<dfn title=" kaf " >كـكـك ك</dfn>&nbsp;
&nbsp;<dfn title=" lam " >لـلـل ل</dfn>&nbsp;
&nbsp;<dfn title=" mim " >مـمـم م</dfn>&nbsp;
&nbsp;<dfn title=" nun " >نـنـن ن</dfn>&nbsp;
&nbsp;<dfn title=" ha " >هـهـه ه</dfn>&nbsp;
&nbsp;<dfn title=" ta marbuTah ">ـة ة</dfn>&nbsp;
&nbsp;<dfn title=" waw " >ـو و</dfn>&nbsp;
&nbsp;<dfn title=" ya with dots ">يـيـي ي</dfn>&nbsp;
&nbsp;<dfn title=" ya " >یـیـی ی</dfn>&nbsp;
&nbsp;<dfn title=" alif maqSurah ">ـى ى</dfn>&nbsp;
</big></dd>
<dt lang="en">Letters with <strong>hamzah</strong> <big>&nbsp;</big></dt>
<dd dir="rtl" class="rightalign"><big>
&nbsp;<dfn title=" hamzah ">ء</dfn>&nbsp;
&nbsp;<dfn title=" alif with hamzah below ">ـإ إ</dfn>&nbsp;
&nbsp;<dfn title=" alif with hamzah above ">ـأ أ</dfn>&nbsp;
&nbsp;<dfn title=" waw with hamzah ">ـؤ ؤ</dfn>&nbsp;
&nbsp;<dfn title=" ya with hamzah " >ئـئـئ ئ</dfn>&nbsp;
</big></dd>
<dt lang="en"><a href="persian-alphabet.html"><strong>Persian</strong> alphabet</a> <big>&nbsp;</big></dt>
<dd class="translit">&#8217;a a b p t <u>s</u> j c H x d <u>z</u> r z &#382; s &#353; S Z T Z &#8216; &#287; f q k g l m n v h y</dd>
<dd dir="rtl" class="rightalign"><big>
&nbsp;<dfn title=" alef-e maddi ">ـآ آ</dfn>&nbsp;
&nbsp;<dfn title=" alef " >ـا ا</dfn>&nbsp;
&nbsp;<dfn title=" be " >بـبـب ب</dfn>&nbsp;
&nbsp;<dfn title=" pe " >پـپـپ پ</dfn>&nbsp;
&nbsp;<dfn title=" te " >تـتـت ت</dfn>&nbsp;
&nbsp;<dfn title=" se " >ثـثـث ث</dfn>&nbsp;
&nbsp;<dfn title=" jim " >جـجـج ج</dfn>&nbsp;
&nbsp;<dfn title=" ce " >چـچـچ چ</dfn>&nbsp;
&nbsp;<dfn title=" He " >حـحـح ح</dfn>&nbsp;
&nbsp;<dfn title=" xe " >خـخـخ خ</dfn>&nbsp;
&nbsp;<dfn title=" dal " >ـد د</dfn>&nbsp;
&nbsp;<dfn title=" zal " >ـذ ذ</dfn>&nbsp;
&nbsp;<dfn title=" re " >ـر ر</dfn>&nbsp;
&nbsp;<dfn title=" ze " >ـز ز</dfn>&nbsp;
&nbsp;<dfn title=" zhe " >ـژ ژ</dfn>&nbsp;
&nbsp;<dfn title=" sin " >سـسـس س</dfn>&nbsp;
&nbsp;<dfn title=" shin " >شـشـش ش</dfn>&nbsp;
&nbsp;<dfn title=" Sad " >صـصـص ص</dfn>&nbsp;
&nbsp;<dfn title=" Zad " >ضـضـض ض</dfn>&nbsp;
&nbsp;<dfn title=" Ta " >طـطـط ط</dfn>&nbsp;
&nbsp;<dfn title=" Za " >ظـظـظ ظ</dfn>&nbsp;
&nbsp;<dfn title=" ayn " >عـعـع ع</dfn>&nbsp;
&nbsp;<dfn title=" ghayn " >غـغـغ غ</dfn>&nbsp;
&nbsp;<dfn title=" fe " >فـفـف ف</dfn>&nbsp;
&nbsp;<dfn title=" qaf " >قـقـق ق</dfn>&nbsp;
&nbsp;<dfn title=" kaf " >کـکـک ک</dfn>&nbsp;
&nbsp;<dfn title=" gaf " >گـگـگ گ</dfn>&nbsp;
&nbsp;<dfn title=" lam " >لـلـل ل</dfn>&nbsp;
&nbsp;<dfn title=" mim " >مـمـم م</dfn>&nbsp;
&nbsp;<dfn title=" nun " >نـنـن ن</dfn>&nbsp;
&nbsp;<dfn title=" vav " >ـو و</dfn>&nbsp;
&nbsp;<dfn title=" he " >هـهـه ه</dfn>&nbsp;
&nbsp;<dfn title=" ye " >یـیـی ی</dfn>&nbsp;
</big></dd>
<dt lang="en" id="urdu"><a href="urdu-alphabet.html"><strong>Urdu</strong> alphabet</a> <big>&nbsp;</big></dt>
<dd class="translit">&#8217;a a b p t t. <u>s</u> j c H x d d. <u>z</u> r r. z &#382; s &#353; S Z T Z &#8216; &#287; f q k g l m n -n v h h y -e</dd>
<dd dir="rtl" class="rightalign"><big>
&nbsp;<dfn title=" alif madd " >ـآ آ</dfn>&nbsp;
&nbsp;<dfn title=" alif " >ـا ا</dfn>&nbsp;
&nbsp;<dfn title=" be " >بـبـب ب</dfn>&nbsp;
&nbsp;<dfn title=" pe " >پـپـپ پ</dfn>&nbsp;
&nbsp;<dfn title=" te " >تـتـت ت</dfn>&nbsp;
&nbsp;<dfn title=" t.e " >ٹـٹـٹ ٹ</dfn>&nbsp;
&nbsp;<dfn title=" se " >ثـثـث ث</dfn>&nbsp;
&nbsp;<dfn title=" jim " >جـجـج ج</dfn>&nbsp;
&nbsp;<dfn title=" ce " >چـچـچ چ</dfn>&nbsp;
&nbsp;<dfn title=" bar.i He " >حـحـح ح</dfn>&nbsp;
&nbsp;<dfn title=" xe " >خـخـخ خ</dfn>&nbsp;
&nbsp;<dfn title=" dal " >ـد د</dfn>&nbsp;
&nbsp;<dfn title=" d.al " >ـڈ ڈ</dfn>&nbsp;
&nbsp;<dfn title=" zal " >ـذ ذ</dfn>&nbsp;
&nbsp;<dfn title=" re " >ـر ر</dfn>&nbsp;
&nbsp;<dfn title=" r.e " >ـڑ ڑ</dfn>&nbsp;
&nbsp;<dfn title=" ze " >ـز ز</dfn>&nbsp;
&nbsp;<dfn title=" zhe " >ـژ ژ</dfn>&nbsp;
&nbsp;<dfn title=" sin " >سـسـس س</dfn>&nbsp;
&nbsp;<dfn title=" shin " >شـشـش ش</dfn>&nbsp;
&nbsp;<dfn title=" Swad " >صـصـص ص</dfn>&nbsp;
&nbsp;<dfn title=" Zwad " >ضـضـض ض</dfn>&nbsp;
&nbsp;<dfn title=" Toe " >طـطـط ط</dfn>&nbsp;
&nbsp;<dfn title=" Zoe " >ظـظـظ ظ</dfn>&nbsp;
&nbsp;<dfn title=" ain " >عـعـع ع</dfn>&nbsp;
&nbsp;<dfn title=" Gain " >غـغـغ غ</dfn>&nbsp;
&nbsp;<dfn title=" fe " >فـفـف ف</dfn>&nbsp;
&nbsp;<dfn title=" qaf " >قـقـق ق</dfn>&nbsp;
&nbsp;<dfn title=" kaf " >کـکـک ک</dfn>&nbsp;
&nbsp;<dfn title=" gaf " >گـگـگ گ</dfn>&nbsp;
&nbsp;<dfn title=" lam " >لـلـل ل</dfn>&nbsp;
&nbsp;<dfn title=" mim " >مـمـم م</dfn>&nbsp;
&nbsp;<dfn title=" nun " >نـنـن ن</dfn>&nbsp;
&nbsp;<dfn title=" nun-e Gunnah ">ـں ں</dfn>&nbsp;
&nbsp;<dfn title=" vao " >ـو و</dfn>&nbsp;
&nbsp;<dfn title=" chot.i he " >ہـہـہ ہ</dfn>&nbsp;
&nbsp;<dfn title=" do-cashmi he ">ھـھـھ ھ</dfn>&nbsp;
&nbsp;<dfn title=" chot.i ye " >یـیـی ی</dfn>&nbsp;
&nbsp;<dfn title=" bar.i ye " >ـے ے</dfn>&nbsp;
</big></dd>
<dt lang="en">Arabic-Indic <strong>digits</strong> <big>&nbsp;</big></dt>
<dd lang="en" class="translit">
0 1 2 3 4 5 6 7 8 9 10 11 12</dd>
<dd dir="rtl" class="rightalign">
0 1 2 3 4 5 6 7 8 9 10 11 12 <br>
٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ ١٠ ١١ ١٢ <br>
۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲
</dd>
</dl>
<hr id="nagari" class="noprint">
<h2 lang="en" class="newpage"><small>Devanagari</small></h2>
<dl>
<dt lang="en"><a href="sanskrit-alphabet.html"><strong>Sanskrit</strong> alphabet</a></dt>
<dd class="translit">a aa i ii u uu &nbsp; r rr l &nbsp; e ai o au</dd>
<dd>
<dfn title=" a aa i ii u uu ">अ&nbsp;आ&nbsp;इ&nbsp;ई&nbsp;उ&nbsp;ऊ</dfn> &nbsp;
<dfn title=" r rr l ">ऋ&nbsp;ॠ&nbsp;ऌ</dfn> &nbsp;
<dfn title=" e ai o au ">ए&nbsp;ऐ&nbsp;ओ&nbsp;औ</dfn>
</dd>
<dd class="translit">kaa ki kii ku kuu&nbsp;&nbsp; kr krr kl&nbsp;&nbsp; ke kai ko kau</dd>
<dd>
<dfn title=" kaa ki kii ku kuu ">का कि की कु कू</dfn> &nbsp;
<dfn title=" kr krr kl ">कृ&nbsp;कॄ&nbsp;कॢ</dfn> &nbsp;
<dfn title=" ke kai ko kau ">के कै को कौ</dfn>
</dd>
<dd class="translit">k kh g gh ng&nbsp;&nbsp;
c&nbsp;ch&nbsp;j&nbsp;jh&nbsp;&#241;&nbsp;&nbsp;
t.&nbsp;t.h&nbsp;d.&nbsp;d.h&nbsp;n.&nbsp;&nbsp;
t&nbsp;th&nbsp;d&nbsp;dh&nbsp;n&nbsp;&nbsp;
p&nbsp;ph&nbsp;b&nbsp;bh&nbsp;m&nbsp;&nbsp;
y&nbsp;r&nbsp;l.&nbsp;l&nbsp;v&nbsp;&nbsp;
&#347;&nbsp;s.&nbsp;s&nbsp;h</dd>
<dd>
<dfn title=" ka kha ga gha nga " >क&nbsp;ख&nbsp;ग&nbsp;घ&nbsp;ङ</dfn>&nbsp;&nbsp;
<dfn title=" ca cha ja jha &#241;a ">च&nbsp;छ&nbsp;ज&nbsp;झ&nbsp;ञ</dfn>&nbsp;&nbsp;
<dfn title=" t.a t.ha d.a d.ha n.a ">ट&nbsp;ठ&nbsp;ड&nbsp;ढ&nbsp;ण</dfn>&nbsp;&nbsp;
<dfn title=" ta tha da dha na " >त&nbsp;थ&nbsp;द&nbsp;ध&nbsp;न</dfn>&nbsp;&nbsp;
<dfn title=" pa pha ba bha ma " >प&nbsp;फ&nbsp;ब&nbsp;भ&nbsp;म</dfn>&nbsp;&nbsp;
<dfn title=" ya ra l.a la va " >य&nbsp;र&nbsp;ळ&nbsp;ल&nbsp;व</dfn>&nbsp;&nbsp;
<dfn title=" sha s.a sa ha " >श&nbsp;ष&nbsp;स&nbsp;ह</dfn>
</dd>
<dt lang="en"><strong>Hindi/Urdu</strong> letters with <strong>nuqta</strong></dt>
<dd class="translit">q x &#287; z r. r.h f</dd>
<dd>
<dfn title=" qa xa Ga za ">क़ ख़ ग़ ज़</dfn>
<dfn title=" r.a r.ha fa " >ड़ ढ़ फ़</dfn>
</dd>
<dt lang="en">Sample <strong>conjuncts</strong></dt>
<dd class="translit">ks. j&#241; tt tr rt</dd>
<dd>
<dfn title=" ks.a j&#241;a tta tra rta ">क्ष ज्ञ त्त त्र र्त</dfn>
</dd>
<dt lang="en">Devanagari <strong>digits</strong></dt>
<dd class="translit">
0 1 2 3 4 5 6 7 8 9 10</dd>
<dd>
० १ २ ३ ४ ५ ६ ७ ८ ९ १०</dd>
</dl>
<hr id="gujarati" class="noprint">
<h2 lang="en"><small>Gujarati</small></h2>
<dl>
<dt lang="en"><a href="sanskrit-alphabet.html"><strong>Sanskrit</strong> alphabet</a></dt>
<dd class="translit">a aa i ii u uu &nbsp; r rr &nbsp; e ai o au</dd>
<dd>
<dfn title=" a aa i ii u uu ">અ&nbsp;આ&nbsp;ઇ&nbsp;ઈ&nbsp;ઉ&nbsp;ઊ</dfn> &nbsp;
<dfn title=" r rr ">ઋ&nbsp;ૠ</dfn> &nbsp;
<dfn title=" e ai o au ">એ&nbsp;ઐ&nbsp;ઓ&nbsp;ઔ</dfn>
</dd>
<dd class="translit">kaa ki kii ku kuu &nbsp; kr krr &nbsp; ke kai ko kau</dd>
<dd>
<dfn title=" kaa ki kii ku kuu ">કા કિ કી કુ કૂ</dfn> &nbsp;
<dfn title=" kr krr ">કૃ&nbsp;કૄ</dfn> &nbsp;
<dfn title=" ke kai ko kau ">કે કૈ કો કૌ</dfn>
</dd>
<dd class="translit">k kh g gh ng&nbsp;&nbsp;
c&nbsp;ch&nbsp;j&nbsp;jh&nbsp;&#241;&nbsp;&nbsp;
t.&nbsp;t.h&nbsp;d.&nbsp;d.h&nbsp;n.&nbsp;&nbsp;
t&nbsp;th&nbsp;d&nbsp;dh&nbsp;n&nbsp;&nbsp;
p&nbsp;ph&nbsp;b&nbsp;bh&nbsp;m&nbsp;&nbsp;
y&nbsp;r&nbsp;l.&nbsp;l&nbsp;v&nbsp;&nbsp;
&#347;&nbsp;s.&nbsp;s&nbsp;h</dd>
<dd>
<dfn title=" ka kha ga gha nga " >ક&nbsp;ખ&nbsp;ગ&nbsp;ઘ&nbsp;ઙ</dfn>&nbsp;&nbsp;
<dfn title=" ca cha ja jha &#241;a ">ચ&nbsp;છ&nbsp;જ&nbsp;ઝ&nbsp;ઞ</dfn>&nbsp;&nbsp;
<dfn title=" t.a t.ha d.a d.ha n.a ">ટ&nbsp;ઠ&nbsp;ડ&nbsp;ઢ&nbsp;ણ</dfn>&nbsp;&nbsp;
<dfn title=" ta tha da dha na " >ત&nbsp;થ&nbsp;દ&nbsp;ધ&nbsp;ન</dfn>&nbsp;&nbsp;
<dfn title=" pa pha ba bha ma " >પ&nbsp;ફ&nbsp;બ&nbsp;ભ&nbsp;મ</dfn>&nbsp;&nbsp;
<dfn title=" ya ra l.a la va " >ય&nbsp;ર&nbsp;ળ&nbsp;લ&nbsp;વ</dfn>&nbsp;&nbsp;
<dfn title=" sha s.a sa ha " >શ&nbsp;ષ&nbsp;સ&nbsp;હ</dfn>
</dd>
<dt lang="en">Sample <strong>conjuncts</strong></dt>
<dd class="translit">ks. j&#241; tt tr rt</dd>
<dd>
<dfn title=" ks.a j&#241;a tta tra rta ">ક્ષ જ્ઞ ત્ત ત્ર ર્ત</dfn>
</dd>
<dt lang="en">Gujarati <strong>digits</strong></dt>
<dd class="translit">
0 1 2 3 4 5 6 7 8 9 10</dd>
<dd>
૦ ૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ ૧૦</dd>
</dl>
<hr id="bengali" class="noprint">
<h2 lang="en" class="newpage"><small>Bengali</small></h2>
<dl>
<dt lang="en"><a href="sanskrit-alphabet.html"><strong>Sanskrit</strong> alphabet</a></dt>
<dd class="translit">a aa i ii u uu &nbsp; r rr l &nbsp; e ai o au</dd>
<dd>
<dfn title=" a aa i ii u uu ">অ&nbsp;আ&nbsp;ই&nbsp;ঈ&nbsp;উ&nbsp;ঊ</dfn> &nbsp;
<dfn title=" r rr l ">ঋ&nbsp;ৠ&nbsp;ঌ</dfn> &nbsp;
<dfn title=" e ai o au ">এ&nbsp;ঐ&nbsp;ও&nbsp;ঔ</dfn>
</dd>
<dd class="translit">kaa ki kii ku kuu&nbsp;&nbsp; kr krr kl&nbsp;&nbsp; ke kai ko kau</dd>
<dd>
<dfn title=" kaa ki kii ku kuu ">কা কি কী কু কূ</dfn> &nbsp;
<dfn title=" kr krr kl ">কৃ&nbsp;কৄ&nbsp;কৢ</dfn> &nbsp;
<dfn title=" ke kai ko kau ">কে কৈ কো কো</dfn>
</dd>
<dd class="translit">k kh g gh ng&nbsp;&nbsp;
c&nbsp;ch&nbsp;j&nbsp;jh&nbsp;&#241;&nbsp;&nbsp;
t.&nbsp;t.h&nbsp;d.&nbsp;d.h&nbsp;n.&nbsp;&nbsp;
t&nbsp;th&nbsp;d&nbsp;dh&nbsp;n&nbsp;&nbsp;
p&nbsp;ph&nbsp;b&nbsp;bh&nbsp;m&nbsp;&nbsp;
y&nbsp;r&nbsp;l&nbsp;v&nbsp;&nbsp;
&#347;&nbsp;s.&nbsp;s&nbsp;h</dd>
<dd>
<dfn title=" ka kha ga gha nga " >ক&nbsp;খ&nbsp;গ&nbsp;ঘ&nbsp;ঙ</dfn>&nbsp;&nbsp;
<dfn title=" ca cha ja jha &#241;a ">চ&nbsp;ছ&nbsp;জ&nbsp;ঝ&nbsp;ঞ</dfn>&nbsp;&nbsp;
<dfn title=" t.a t.ha d.a d.ha n.a ">ট&nbsp;ঠ&nbsp;ড&nbsp;ঢ&nbsp;ণ</dfn>&nbsp;&nbsp;
<dfn title=" ta tha da dha na " >ত&nbsp;থ&nbsp;দ&nbsp;ধ&nbsp;ন</dfn>&nbsp;&nbsp;
<dfn title=" pa pha ba bha ma " >প&nbsp;ফ&nbsp;ব&nbsp;ভ&nbsp;ম</dfn>&nbsp;&nbsp;
<dfn title=" ya ra la va " >য&nbsp;র&nbsp;ল&nbsp;ব</dfn>&nbsp;&nbsp;
<dfn title=" sha s.a sa ha " >শ&nbsp;ষ&nbsp;স&nbsp;হ</dfn>
</dd>
<dt lang="en">Letters with <strong>nukta</strong> &amp; <strong>Assamese</strong> letters</dt>
<dd class="translit">r. r.h y. &nbsp; r v</dd>
<dd>
<dfn title=" r.a r.ha y.a " >ড় ঢ় য়</dfn> &nbsp;
<dfn title=" ra va ">ৰ ৱ</dfn>
</dd>
<dt lang="en">Sample <strong>conjuncts</strong></dt>
<dd class="translit">ks. j&#241; tt tr rt</dd>
<dd>
<dfn title=" ks.a j&#241;a tta tra rta ">ক্ষ জ্ঞ ত্ত ত্র র্ত</dfn>
</dd>
<dt lang="en">Bengali <strong>digits</strong></dt>
<dd class="translit">
0 1 2 3 4 5 6 7 8 9 10</dd>
<dd>
০ ১ ২ ৩ ৪ ৫ ৬ ৭ ৮ ৯ ১০</dd>
</dl>
<hr id="gurmukhi" class="noprint">
<h2 lang="en"><small>Gurmukhi</small></h2>
<dl>
<dt lang="en"><a href="western-panjabi-alphabet.html"><strong>Panjabi</strong> alphabet</a></dt>
<dd class="translit">a aa i ii u uu &nbsp; e ai o au</dd>
<dd>
<dfn title=" a aa i ii u uu ">ਅ ਆ ਇ ਈ ਉ ਊ</dfn> &nbsp;
<dfn title=" e ai o au ">ਏ ਐ ਓ ਔ</dfn>
</dd>
<dd class="translit">kaa ki kii ku kuu &nbsp; ke kai ko kau</dd>
<dd>
<dfn title=" kaa ki kii ku kuu ">ਕਾ ਕਿ ਕੀ ਕੁ ਕੂ</dfn> &nbsp;
<dfn title=" ke kai ko kau ">ਕੇ ਕੈ ਕੋ ਕੌ</dfn>
</dd>
<dd class="translit">k kh g gh ng&nbsp;&nbsp;
c&nbsp;ch&nbsp;j&nbsp;jh&nbsp;&#241;&nbsp;&nbsp;
t.&nbsp;t.h&nbsp;d.&nbsp;d.h&nbsp;n.&nbsp;&nbsp;
t&nbsp;th&nbsp;d&nbsp;dh&nbsp;n&nbsp;&nbsp;
p&nbsp;ph&nbsp;b&nbsp;bh&nbsp;m&nbsp;&nbsp;
y&nbsp;r&nbsp;l&nbsp;v&nbsp;r.&nbsp;&nbsp;
s&nbsp;h</dd>
<dd>
<dfn title=" ka kha ga gha nga " >ਕ&nbsp;ਖ&nbsp;ਗ&nbsp;ਘ&nbsp;ਙ</dfn>&nbsp;&nbsp;
<dfn title=" ca cha ja jha &#241;a ">ਚ&nbsp;ਛ&nbsp;ਜ&nbsp;ਝ&nbsp;ਞ</dfn>&nbsp;&nbsp;
<dfn title=" t.a t.ha d.a d.ha n.a ">ਟ&nbsp;ਠ&nbsp;ਡ&nbsp;ਢ&nbsp;ਣ</dfn>&nbsp;&nbsp;
<dfn title=" ta tha da dha na " >ਤ&nbsp;ਥ&nbsp;ਦ&nbsp;ਧ&nbsp;ਨ</dfn>&nbsp;&nbsp;
<dfn title=" pa pha ba bha ma " >ਪ&nbsp;ਫ&nbsp;ਬ&nbsp;ਭ&nbsp;ਮ</dfn>&nbsp;&nbsp;
<dfn title=" ya ra la va r.a " >ਯ&nbsp;ਰ&nbsp;ਲ&nbsp;ਵ&nbsp;ੜ</dfn>&nbsp;&nbsp;
<dfn title=" sa ha " >ਸ&nbsp;ਹ</dfn>
</dd>
<dt lang="en">Letters with <strong>nukta</strong></dt>
<dd class="translit">x &#287; z f l. &#353;</dd>
<dd>
<dfn title=" xa Ga za " >ਖ਼ ਗ਼ ਜ਼</dfn>
<dfn title=" fa l.a sha ">ਫ਼ ਲ਼ ਸ਼</dfn>
</dd>
<dt lang="en">Gurmukhi <strong>digits</strong></dt>
<dd class="translit">
0 1 2 3 4 5 6 7 8 9 10</dd>
<dd>
੦ ੧ ੨ ੩ ੪ ੫ ੬ ੭ ੮ ੯ ੧੦</dd>
</dl>
<hr id="symbols" class="noprint">
<h2 lang="en" class="newpage"><small>Symbols</small></h2>
<table class="symbols">
<col><col>
<tbody>
<tr><td>•</td><td>bullet</td></tr>
<tr><td>¢</td><td>cent sign</td></tr>
<tr><td>©</td><td>copyright sign</td></tr>
<tr><td>¤</td><td>currency sign</td></tr>
<tr><td>†</td><td>dagger</td></tr>
<tr><td>°</td><td>degree sign</td></tr>
<tr><td>÷</td><td>division sign</td></tr>
<tr><td>«</td><td>double angle quotation mark (guillemet) &lt;&lt;</td></tr>
<tr><td>»</td><td>double angle quotation mark (guillemet) &gt;&gt;</td></tr>
<tr><td>“</td><td>double quotation mark 66</td></tr>
<tr><td>”</td><td>double quotation mark 99</td></tr>
<tr><td>„</td><td>double quotation mark low-99</td></tr>
<tr><td>…</td><td>ellipsis</td></tr>
<tr><td>—</td><td>em dash</td></tr>
<tr><td>–</td><td>en dash</td></tr>
<tr><td>€</td><td>euro sign</td></tr>
<tr><td>―</td><td>horizontal bar (quotation dash)</td></tr>
<tr><td>µ</td><td>micro sign</td></tr>
<tr><td>·</td><td>middle dot (centered period)</td></tr>
<tr><td>·</td><td>middle dot (centered period, Greek ano teleia)</td></tr>
<tr><td>×</td><td>multiplication sign</td></tr>
<tr><td>¬</td><td>not sign</td></tr>
<tr><td>№</td><td>numero sign</td></tr>
<tr><td>‰</td><td>per mille (per thousand) sign</td></tr>
<tr><td></td><td>pilcrow (paragraph) sign</td></tr>
<tr><td>±</td><td>plus-minus sign</td></tr>
<tr><td>£</td><td>pound sterling sign</td></tr>
<tr><td>®</td><td>registered sign</td></tr>
<tr><td>§</td><td>section sign</td></tr>
<tr><td>₪</td><td>sheqel sign</td></tr>
<tr><td>‹</td><td>single angle quotation mark (guillemet) &lt;</td></tr>
<tr><td>›</td><td>single angle quotation mark (guillemet) &gt;</td></tr>
<tr><td>‘</td><td>single quotation mark 6</td></tr>
<tr><td>’</td><td>single quotation mark 9 (<a href="http://www.cl.cam.ac.uk/~mgk25/ucs/apostrophe.html" title="Apostrophe and acute accent confusion">apostrophe</a>)</td></tr>
<tr><td>¹</td><td>superscript 1</td></tr>
<tr><td>²</td><td>superscript 2</td></tr>
<tr><td>³</td><td>superscript 3</td></tr>
<tr><td>™</td><td>trademark sign</td></tr>
<tr><td>¥</td><td>yen sign</td></tr>
<tr><td>،</td><td>Arabic comma</td></tr>
<tr><td>٫</td><td>Arabic decimal separator</td></tr>
<tr><td>٪</td><td>Arabic percent sign</td></tr>
<tr><td>؟</td><td>Arabic question mark</td></tr>
<tr><td>؛</td><td>Arabic semicolon</td></tr>
<tr><td>۔</td><td>Arabic-Urdu full stop (Arabic-Urdu period)</td></tr>
<tr><td>־</td><td>Hebrew hyphen (maqaf)</td></tr>
<tr><td>׳</td><td>Hebrew prime (geresh)</td></tr>
<tr><td>״</td><td>Hebrew double prime (gershayim)</td></tr>
<tr><td>॰</td><td>Indic abbreviation sign</td></tr>
<tr><td>।</td><td>Indic danda</td></tr>
<tr><td>॥</td><td>Indic double danda</td></tr>
</tbody>
</table>
<hr class="noprint">
<p lang="en"><br>19 February 2010</p>
</body>
</html>

220
pdf/www/test/encoding_utf-8_w3.html Executable file
View File

@@ -0,0 +1,220 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UTF-8 test file</title>
<style type="text/css">
pre {
font-family: DejaVuSansMono, monospace;
}
</style>
</head>
<body>
<p>Original by Markus Kuhn, adapted for HTML by Martin D&uuml;rst.</p>
<pre>
UTF-8 encoded sample plain-text file
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Markus Kuhn [ˈmaʳkʊs kuːn] &lt;mkuhn@acm.org> — 1999-08-20
The ASCII compatible UTF-8 encoding of ISO 10646 and Unicode
plain-text files is defined in RFC 2279 and in ISO 10646-1 Annex R.
Using Unicode/UTF-8, you can write in emails and source code things such as
Mathematics and Sciences:
∮ E⋅da = Q, n → ∞, ∑ f(i) = ∏ g(i), ∀x∈ℝ: ⌈x⌉ = −⌊−x⌋, α ∧ ¬β = ¬(¬α ∨ β),
ℕ ⊆ ℕ₀ ⊂ ℤ ⊂ ℚ ⊂ ℝ ⊂ ℂ, ⊥ &lt; a ≠ b ≡ c ≤ d ≪ ⊤ ⇒ (A ⇔ B),
2H₂ + O₂ ⇌ 2H₂O, R = 4.7 kΩ, ⌀ 200 mm
Linguistics and dictionaries:
ði ıntəˈnæʃənəl fəˈnɛtık əsoʊsiˈeıʃn
Y [ˈʏpsilɔn], Yen [jɛn], Yoga [ˈjoːgɑ]
APL:
((V⍳V)=⍳⍴V)/V←,V ⌷←⍳→⍴∆∇⊃‾⍎⍕⌈
Nicer typography in plain text files:
╔══════════════════════════════════════════╗
║ ║
║ • ‘single’ and “double” quotes ║
║ ║
║ • Curly apostrophes: “We’ve been here” ║
║ ║
║ • Latin-1 apostrophe and accents: '´` ║
║ ║
║ • ‚deutsche‘ „Anführungszeichen“ ║
║ ║
║ • †, ‡, ‰, •, 3–4, —, −5/+5, ™, … ║
║ ║
║ • ASCII safety test: 1lI|, 0OD, 8B ║
║ ╭─────────╮ ║
║ • the euro symbol: │ 14.95 € │ ║
║ ╰─────────╯ ║
╚══════════════════════════════════════════╝
Greek (in Polytonic):
The Greek anthem:
Σὲ γνωρίζω ἀπὸ τὴν κόψη
τοῦ σπαθιοῦ τὴν τρομερή,
σὲ γνωρίζω ἀπὸ τὴν ὄψη
ποὺ μὲ βία μετράει τὴ γῆ.
᾿Απ᾿ τὰ κόκκαλα βγαλμένη
τῶν ῾Ελλήνων τὰ ἱερά
καὶ σὰν πρῶτα ἀνδρειωμένη
χαῖρε, ὦ χαῖρε, ᾿Ελευθεριά!
From a speech of Demosthenes in the 4th century BC:
Οὐχὶ ταὐτὰ παρίσταταί μοι γιγνώσκειν, ὦ ἄνδρες ᾿Αθηναῖοι,
ὅταν τ᾿ εἰς τὰ πράγματα ἀποβλέψω καὶ ὅταν πρὸς τοὺς
λόγους οὓς ἀκούω· τοὺς μὲν γὰρ λόγους περὶ τοῦ
τιμωρήσασθαι Φίλιππον ὁρῶ γιγνομένους, τὰ δὲ πράγματ᾿
εἰς τοῦτο προήκοντα, ὥσθ᾿ ὅπως μὴ πεισόμεθ᾿ αὐτοὶ
πρότερον κακῶς σκέψασθαι δέον. οὐδέν οὖν ἄλλο μοι δοκοῦσιν
οἱ τὰ τοιαῦτα λέγοντες ἢ τὴν ὑπόθεσιν, περὶ ἧς βουλεύεσθαι,
οὐχὶ τὴν οὖσαν παριστάντες ὑμῖν ἁμαρτάνειν. ἐγὼ δέ, ὅτι μέν
ποτ᾿ ἐξῆν τῇ πόλει καὶ τὰ αὑτῆς ἔχειν ἀσφαλῶς καὶ Φίλιππον
τιμωρήσασθαι, καὶ μάλ᾿ ἀκριβῶς οἶδα· ἐπ᾿ ἐμοῦ γάρ, οὐ πάλαι
γέγονεν ταῦτ᾿ ἀμφότερα· νῦν μέντοι πέπεισμαι τοῦθ᾿ ἱκανὸν
προλαβεῖν ἡμῖν εἶναι τὴν πρώτην, ὅπως τοὺς συμμάχους
σώσομεν. ἐὰν γὰρ τοῦτο βεβαίως ὑπάρξῃ, τότε καὶ περὶ τοῦ
τίνα τιμωρήσεταί τις καὶ ὃν τρόπον ἐξέσται σκοπεῖν· πρὶν δὲ
τὴν ἀρχὴν ὀρθῶς ὑποθέσθαι, μάταιον ἡγοῦμαι περὶ τῆς
τελευτῆς ὁντινοῦν ποιεῖσθαι λόγον.
Δημοσθένους, Γ´ ᾿Ολυνθιακὸς
Georgian:
From a Unicode conference invitation:
გთხოვთ ახლავე გაიაროთ რეგისტრაცია Unicode-ის მეათე საერთაშორისო
კონფერენციაზე დასასწრებად, რომელიც გაიმართება 10-12 მარტს,
ქ. მაინცში, გერმანიაში. კონფერენცია შეჰკრებს ერთად მსოფლიოს
ექსპერტებს ისეთ დარგებში როგორიცაა ინტერნეტი და Unicode-ი,
ინტერნაციონალიზაცია და ლოკალიზაცია, Unicode-ის გამოყენება
ოპერაციულ სისტემებსა, და გამოყენებით პროგრამებში, შრიფტებში,
ტექსტების დამუშავებასა და მრავალენოვან კომპიუტერულ სისტემებში.
Russian:
From a Unicode conference invitation:
Зарегистрируйтесь сейчас на Десятую Международную Конференцию по
Unicode, которая состоится 10-12 марта 1997 года в Майнце в Германии.
Конференция соберет широкий круг экспертов по вопросам глобального
Интернета и Unicode, локализации и интернационализации, воплощению и
применению Unicode в различных операционных системах и программных
приложениях, шрифтах, верстке и многоязычных компьютерных системах.
Thai (UCS Level 2):
Excerpt from a poetry on The Romance of The Three Kingdoms (a Chinese
classic 'San Gua'):
[----------------------------|------------------------]
๏ แผ่นดินฮั่นเสื่อมโทรมแสนสังเวช พระปกเกศกองบู๊กู้ขึ้นใหม่
สิบสองกษัตริย์ก่อนหน้าแลถัดไป สององค์ไซร้โง่เขลาเบาปัญญา
ทรงนับถือขันทีเป็นที่พึ่ง บ้านเมืองจึงวิปริตเป็นนักหนา
โฮจิ๋นเรียกทัพทั่วหัวเมืองมา หมายจะฆ่ามดชั่วตัวสำคัญ
เหมือนขับไสไล่เสือจากเคหา รับหมาป่าเข้ามาเลยอาสัญ
ฝ่ายอ้องอุ้นยุแยกให้แตกกัน ใช้สาวนั้นเป็นชนวนชื่นชวนใจ
พลันลิฉุยกุยกีกลับก่อเหตุ ช่างอาเพศจริงหนาฟ้าร้องไห้
ต้องรบราฆ่าฟันจนบรรลัย ฤๅหาใครค้ำชูกู้บรรลังก์ ฯ
(The above is a two-column text. If combining characters are handled
correctly, the lines of the second column should be aligned with the
| character above.)
Ethiopian:
Proverbs in the Amharic language:
ሰማይ አይታረስ ንጉሥ አይከሰስ።
ብላ ካለኝ እንደአባቴ በቆመጠኝ።
ጌጥ ያለቤቱ ቁምጥና ነው።
ደሀ በሕልሙ ቅቤ ባይጠጣ ንጣት በገደለው።
የአፍ ወለምታ በቅቤ አይታሽም።
አይጥ በበላ ዳዋ ተመታ።
ሲተረጉሙ ይደረግሙ።
ቀስ በቀስ፥ ዕንቁላል በእግሩ ይሄዳል።
ድር ቢያብር አንበሳ ያስር።
ሰው እንደቤቱ እንጅ እንደ ጉረቤቱ አይተዳደርም።
እግዜር የከፈተውን ጉሮሮ ሳይዘጋው አይድርም።
የጎረቤት ሌባ፥ ቢያዩት ይስቅ ባያዩት ያጠልቅ።
ሥራ ከመፍታት ልጄን ላፋታት።
ዓባይ ማደሪያ የለው፥ ግንድ ይዞ ይዞራል።
የእስላም አገሩ መካ የአሞራ አገሩ ዋርካ።
ተንጋሎ ቢተፉ ተመልሶ ባፉ።
ወዳጅህ ማር ቢሆን ጨርስህ አትላሰው።
እግርህን በፍራሽህ ልክ ዘርጋ።
Runes:
ᚻᛖ ᚳᚹᚫᚦ ᚦᚫᛏ ᚻᛖ ᛒᚢᛞᛖ ᚩᚾ ᚦᚫᛗ ᛚᚪᚾᛞᛖ ᚾᚩᚱᚦᚹᛖᚪᚱᛞᚢᛗ ᚹᛁᚦ ᚦᚪ ᚹᛖᛥᚫ
(Old English, which transcribed into Latin reads 'He cwaeth that he
bude thaem lande northweardum with tha Westsae.' and means 'He said
that he lived in the northern land near the Western Sea.')
Braille:
⡌⠁⠧⠑ ⠼⠁⠒ ⡍⠜⠇⠑⠹⠰⠎ ⡣⠕⠌
⡍⠜⠇⠑⠹ ⠺⠁⠎ ⠙⠑⠁⠙⠒ ⠞⠕ ⠃⠑⠛⠔ ⠺⠊⠹⠲ ⡹⠻⠑ ⠊⠎ ⠝⠕ ⠙⠳⠃⠞
⠱⠁⠞⠑⠧⠻ ⠁⠃⠳⠞ ⠹⠁⠞⠲ ⡹⠑ ⠗⠑⠛⠊⠌⠻ ⠕⠋ ⠙⠊⠎ ⠃⠥⠗⠊⠁⠇ ⠺⠁⠎
⠎⠊⠛⠝⠫ ⠃⠹ ⠹⠑ ⠊⠇⠻⠛⠹⠍⠁⠝⠂ ⠹⠑ ⠊⠇⠻⠅⠂ ⠹⠑ ⠥⠝⠙⠻⠞⠁⠅⠻⠂
⠁⠝⠙ ⠹⠑ ⠡⠊⠑⠋ ⠍⠳⠗⠝⠻⠲ ⡎⠊⠗⠕⠕⠛⠑ ⠎⠊⠛⠝⠫ ⠊⠞⠲ ⡁⠝⠙
⡎⠊⠗⠕⠕⠛⠑⠰⠎ ⠝⠁⠍⠑ ⠺⠁⠎ ⠛⠕⠕⠙ ⠥⠏⠕⠝ ⠰⡡⠁⠝⠛⠑⠂ ⠋⠕⠗ ⠁⠝⠹⠹⠔⠛ ⠙⠑
⠡⠕⠎⠑ ⠞⠕ ⠏⠥⠞ ⠙⠊⠎ ⠙⠁⠝⠙ ⠞⠕⠲
⡕⠇⠙ ⡍⠜⠇⠑⠹ ⠺⠁⠎ ⠁⠎ ⠙⠑⠁⠙ ⠁⠎ ⠁ ⠙⠕⠕⠗⠤⠝⠁⠊⠇⠲
⡍⠔⠙⠖ ⡊ ⠙⠕⠝⠰⠞ ⠍⠑⠁⠝ ⠞⠕ ⠎⠁⠹ ⠹⠁⠞ ⡊ ⠅⠝⠪⠂ ⠕⠋ ⠍⠹
⠪⠝ ⠅⠝⠪⠇⠫⠛⠑⠂ ⠱⠁⠞ ⠹⠻⠑ ⠊⠎ ⠏⠜⠞⠊⠊⠥⠇⠜⠇⠹ ⠙⠑⠁⠙ ⠁⠃⠳⠞
⠁ ⠙⠕⠕⠗⠤⠝⠁⠊⠇⠲ ⡊ ⠍⠊⠣⠞ ⠙⠁⠧⠑ ⠃⠑⠲ ⠔⠊⠇⠔⠫⠂ ⠍⠹⠎⠑⠇⠋⠂ ⠞⠕
⠗⠑⠛⠜⠙ ⠁ ⠊⠕⠋⠋⠔⠤⠝⠁⠊⠇ ⠁⠎ ⠹⠑ ⠙⠑⠁⠙⠑⠌ ⠏⠊⠑⠊⠑ ⠕⠋ ⠊⠗⠕⠝⠍⠕⠝⠛⠻⠹
⠔ ⠹⠑ ⠞⠗⠁⠙⠑⠲ ⡃⠥⠞ ⠹⠑ ⠺⠊⠎⠙⠕⠍ ⠕⠋ ⠳⠗ ⠁⠝⠊⠑⠌⠕⠗⠎
⠊⠎ ⠔ ⠹⠑ ⠎⠊⠍⠊⠇⠑⠆ ⠁⠝⠙ ⠍⠹ ⠥⠝⠙⠁⠇⠇⠪⠫ ⠙⠁⠝⠙⠎
⠩⠁⠇⠇ ⠝⠕⠞ ⠙⠊⠌⠥⠗⠃ ⠊⠞⠂ ⠕⠗ ⠹⠑ ⡊⠳⠝⠞⠗⠹⠰⠎ ⠙⠕⠝⠑ ⠋⠕⠗⠲ ⡹⠳
⠺⠊⠇⠇ ⠹⠻⠑⠋⠕⠗⠑ ⠏⠻⠍⠊⠞ ⠍⠑ ⠞⠕ ⠗⠑⠏⠑⠁⠞⠂ ⠑⠍⠏⠙⠁⠞⠊⠊⠁⠇⠇⠹⠂ ⠹⠁⠞
⡍⠜⠇⠑⠹ ⠺⠁⠎ ⠁⠎ ⠙⠑⠁⠙ ⠁⠎ ⠁ ⠙⠕⠕⠗⠤⠝⠁⠊⠇⠲
(The first couple of paragraphs of "A Christmas Carol" by Dickens)
Compact font selection example text:
ABCDEFGHIJKLMNOPQRSTUVWXYZ /0123456789
abcdefghijklmnopqrstuvwxyz £©µÀÆÖÞßéöÿ
–—‘“”„†•…‰™œŠŸž€ ΑΒΓΔΩαβγδω АБВГДабвгд
∀∂∈ℝ∧∪≡∞ ↑↗↨↻⇣ ┐┼╔╘░►☺♀ fi<>⑀₂ἠḂӥẄɐː⍎אԱა
Greetings in various languages:
Hello world, Καλημέρα κόσμε, コンニチハ
Box drawing alignment tests: █
▉
╔══╦══╗ ┌──┬──┐ ╭──┬──╮ ╭──┬──╮ ┏━━┳━━┓ ┎┒┏┑ ╷ ╻ ┏┯┓ ┌┰┐ ▊ ╱╲╱╲╳╳╳
║┌─╨─┐║ │╔═╧═╗│ │╒═╪═╕│ │╓─╁─╖│ ┃┌─╂─┐┃ ┗╃╄┙ ╶┼╴╺╋╸┠┼┨ ┝╋┥ ▋ ╲╱╲╱╳╳╳
║│╲ ╱│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╿ │┃ ┍╅╆┓ ╵ ╹ ┗┷┛ └┸┘ ▌ ╱╲╱╲╳╳╳
╠╡ ╳ ╞╣ ├╢ ╟┤ ├┼─┼─┼┤ ├╫─╂─╫┤ ┣┿╾┼╼┿┫ ┕┛┖┚ ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
║│╱ ╲│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╽ │┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▎
║└─╥─┘║ │╚═╤═╝│ │╘═╪═╛│ │╙─╀─╜│ ┃└─╂─┘┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▏
╚══╩══╝ └──┴──┘ ╰──┴──╯ ╰──┴──╯ ┗━━┻━━┛ └╌╌┘ ╎ ┗╍╍┛ ┋ ▁▂▃▄▅▆▇█
</pre>
</body>
</html>

68
pdf/www/test/image_background.html Executable file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style>
p.c1 { background-image: url(images/dompdf_simple.png); background-repeat: repeat-x; background-position: 100px 50%; }
p.c2 { background-image: url(images/php.gif); background-position: bottom center; background-repeat: repeat-y; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p class="c1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p class="c2">Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. <span>Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit</span>. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</p>
<p class="c1">Etiam a mauris. Proin justo elit, accumsan sit amet, tempus et,
blandit id, tellus. Morbi varius, nisi id iaculis aliquam, lacus
ligula facilisis velit, ac pharetra ipsum augue a massa. Etiam rhoncus
commodo orci. Mauris ullamcorper sagittis turpis. Nullam magna libero,
sagittis sed, auctor faucibus, accumsan vitae, urna. Pellentesque
volutpat. Aliquam sapien ipsum, eleifend nec, imperdiet vitae,
consectetuer id, quam. Donec a urna. Suspendisse sit amet
velit. Curabitur quis nisi id dui viverra ornare. Sed condimentum enim
quis tortor. Ut condimentum, magna non tempus tincidunt, leo nibh
molestie tellus, vitae convallis dolor ante sed ante. Nunc et
metus. Phasellus ultricies. Fusce faucibus tortor sit amet mauris.</p>
<p class="c2">Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</p>
<p class="c1">Cras fringilla, nulla id egestas elementum, augue nunc iaculis nibh,
ac adipiscing nibh justo id tortor. Donec vel orci a nisi ultricies
aliquet. Nunc urna quam, adipiscing molestie, vehicula non,
condimentum non, magna. Integer magna. Donec quam metus, pulvinar id,
suscipit eget, euismod ac, orci. Nulla facilisi. Nullam nec
mauris. Morbi in mi. Etiam urna lectus, pulvinar ac, sollicitudin eu,
euismod ac, lectus. Fusce elit. Sed ultricies odio ac felis.</p>
</body>
</html>

20
pdf/www/test/image_basic.html Executable file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
color: #7d7a7a;
font-family: 'trebuchet ms', verdana, sans-serif;
}
</style>
</head>
<body>
<div style="text-align: center; margin-top: 40%;">
<img style="width: 75%;" src="images/dompdf_simple.png"/>
<br/>
<span>The PHP 5 HTML to PDF converter</span>
</div>
</body> </html>

130
pdf/www/test/image_bmp.html Executable file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>BMP image test suite</title>
<style type="text/css">
body {
font-family: 'trebuchet ms', verdana, sans-serif;
font-size: 12px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<p>
This test suite was grabbed from <a href="http://wvnvaxa.wvnet.edu/vmswww/bmp.html">http://wvnvaxa.wvnet.edu/vmswww/bmp.html</a>.
</p>
<p>Not every BMP format is supported but the most used is the 24 bit format</p>
<table>
<tr>
<th></th>
<th>BMP</th>
<th>PNG</th>
</tr>
<tr>
<td>1 bit (2 color)</td>
<td><img src="images/bmp/test1.bmp" /></td>
<td><img src="images/bmp/test1.png" /></td>
</tr>
<tr>
<td>4 bit</td>
<td><img src="images/bmp/test4.bmp" /></td>
<td><img src="images/bmp/test4.png" /></td>
</tr>
<tr>
<td>8 bit</td>
<td><img src="images/bmp/test8.bmp" /></td>
<td><img src="images/bmp/test8.png" /></td>
</tr>
<tr>
<td>16 bit</td>
<td><img src="images/bmp/test16.bmp" /></td>
<td><img src="images/bmp/test16.png" /></td>
</tr>
<tr>
<td>24 bit</td>
<td><img src="images/bmp/test24.bmp" /></td>
<td><img src="images/bmp/test24.png" /></td>
</tr>
<tr>
<td>32 bit</td>
<td><img src="images/bmp/test32.bmp" /></td>
<td><img src="images/bmp/test32.png" /></td>
</tr>
<tr>
<td>4 bit compressed</td>
<td><img src="images/bmp/testcompress4.bmp" /></td>
<td><img src="images/bmp/testcompress4.png" /></td>
</tr>
<tr>
<td>8 bit compressed</td>
<td><img src="images/bmp/testcompress8.bmp" /></td>
<td><img src="images/bmp/testcompress8.png" /></td>
</tr>
<!-- The two bitmap formats below make an fatal error -->
<!--<tr>
<td>8 bit OS/2 version 1</td>
<td><img src="images/bmp/test8os2.bmp" /></td>
<td><img src="images/bmp/test8os2.png" /></td>
</tr>
<tr>
<td>4 bit OS/2 version 2</td>
<td><img src="images/bmp/test4os2v2.bmp" /></td>
<td><img src="images/bmp/test4os2v2.png" /></td>
</tr>-->
<tr>
<td>16 bit 555 bitfield</td>
<td><img src="images/bmp/test16bf555.bmp" /></td>
<td><img src="images/bmp/test16bf555.png" /></td>
</tr>
<tr>
<td>16 bit 565 bitfield</td>
<td><img src="images/bmp/test16bf565.bmp" /></td>
<td><img src="images/bmp/test16bf565.png" /></td>
</tr>
<tr>
<td>32 bit 888 bitfield</td>
<td><img src="images/bmp/test32bf.bmp" /></td>
<td><img src="images/bmp/test32bf.png" /></td>
</tr>
<tr>
<td>32 bit 888 bitfield version 4</td>
<td><img src="images/bmp/test32bfv4.bmp" width="300" /></td>
<td><img src="images/bmp/test32bfv4.png" width="300" /></td>
</tr>
<tr>
<td>32 bit version 5</td>
<td><img src="images/bmp/test32v5.bmp" width="300" /></td>
<td><img src="images/bmp/test32v5.png" width="300" /></td>
</tr>
<tr>
<td>32 bit transparent version 4</td>
<td><img src="images/bmp/trans.bmp" width="300" /></td>
<td><img src="images/bmp/trans.png" width="300" /></td>
</tr>
</table>
<p>
Note that as of December 2005, Mozilla and Internet Explorer
do not support transparent BMP images.
</p>
<p>
The images (except for the last three and the OS/2 version 2 image)
are from Jason Summer's <a href="http://entropymine.com/jason/bmpsuite/">BMP Suite</a>.
</p>
</body>
</html>

35
pdf/www/test/image_datauri.html Executable file
View File

File diff suppressed because one or more lines are too long

9
pdf/www/test/image_gif.html Executable file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<p><img src="images/php.gif"/></p>
</body> </html>

21
pdf/www/test/image_remote.html Executable file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="http://dompdf.googlecode.com/svn/trunk/dompdf/www/style.css" type="text/css"/>
<style>
#content {
margin: 0.25in;
width: 100%;
}
</style>
</head>
<body>
<div id="content">
<h2>Remote CSS &amp; Image Test</h2>
<h3>CSS: <a href="http://dompdf.googlecode.com/svn/trunk/dompdf/www/style.css">http://dompdf.googlecode.com/svn/trunk/dompdf/www/style.css</a></h3>
<p>Testing remote image: <img src="http://dompdf.googlecode.com/svn/trunk/dompdf/www/images/title.gif"/></p>
<p>Note: DOMPDF_ENABLE_REMOTE must be enabled for this test to work.</p>
</div>
</body>
</html>

23
pdf/www/test/image_transparent_gif.html Executable file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
color: #7d7a7a;
font-family: 'trebuchet ms', verdana, sans-serif;
}
</style>
</head>
<body>
<div style="text-align: center; background: none;">
<img src="images/green.gif" width="50"/>
</div>
<div style="text-align: center; background: black;">
<img src="images/green.gif" width="50"/>
</div>
</body> </html>

189
pdf/www/test/image_transparent_png.html Executable file
View File

@@ -0,0 +1,189 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>PNG transparency test</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2em;
}
p {
background: #C6C6FF;
}
img[width="85"] {
margin: 8px;
}
@page {
margin: 0;
}
</style>
</head>
<body>
<h1>PNG transparency test</h1>
Examples from <a href="http://entropymine.com/jason/testbed/pngtrans/">http://entropymine.com/jason/testbed/pngtrans/</a>
<p>
Not all possible results are shown; there are too many combinations
of background colors and shapes of the opaque region. However, I
intend to include every result that actually occurs in a mainstream
browser. If I am missing any, please
<a href="mailto:jason1@pobox.com">let me know</a>.
</p><p>It's come to my attention that my images which show how
alpha transparency should look are not quite perfect
in regard to precisely how transparent they are at various points.
Rather than try to modify this page to test gamma
correction issues as well, I've created a
<a href="http://entropymine.com/jason/testbed/alphagamma/">separate test page</a> for that.
</p><p>
This test page was constructed by
<a href="http://pobox.com/~jason1/">Jason Summers</a>.
Comments may be emailed to <a href="mailto:jason1@pobox.com">jason1@pobox.com</a>.<br>
There are
<a href="http://www.libpng.org/pub/png/pngmisc.html#images">other test
pages</a> listed at the PNG web site.
<!-- <p>
There's a
<a href="http://www.petitiononline.com/msiepng/petition.html">petition</a>
(at PetitionOnline) for proper PNG support in IE for Windows. -->
<!--
<p>I am aware that MSIE 5.5+ for Windows supports an
"AlphaImageLoader" filter that
<a href="http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html">can be
used</a> to display PNG images with transparency. Personally, I don't consider
it to
be an acceptable replacement for standard PNG support, though it does mostly
work, with some caveats (requires the site author to modify each web page;
requires scripting to be turned on; requires extra documents to be loaded
from the server; prevents visitors from easily saving the image to disk;
slows down processing of non-transparent images;
seems to fail once in a while for no apparent reason). I don't intend to
hack this page to support it, but maybe I'll put up a separate test page
sometime.
-->
</p>
<h3>Alpha and palette transparency</h3>
<p>Expected result:<br>
<img width="95" height="72" src="./images/png/result_ok.gif" alt="[Test image]">
</p>
<p><b>(T1)</b> 8-bit palette, includes background color:<br>
<img width="85" height="62" src="./images/png/pal_bk.png" alt="[Test image]">
</p>
<p><b>(T2)</b> 8-bit palette, no background color:<br>
<img width="85" height="62" src="./images/png/pal.png" alt="[Test image]">
</p>
<p><b>(T3)</b> 32-bit RGBA, includes background color:<br>
<img width="85" height="62" src="./images/png/rgba8_bk.png" alt="[Test image]">
</p>
<p><b>(T4)</b> 32-bit RGBA, no background color:<br>
<img width="85" height="62" src="./images/png/rgba8.png" alt="[Test image]">
</p>
<p><b>(T5)</b> 64-bit RGBA, includes background color:<br>
<img width="85" height="62" src="./images/png/rgba16_bk.png" alt="[Test image]">
</p>
<p><b>(T6)</b> 64-bit RGBA, no background color:<br>
<img width="85" height="62" src="./images/png/rgba16.png" alt="[Test image]">
</p>
<h3>RGB binary transparency</h3>
<p>Expected result:<br>
<img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]">
</p>
<p><b>(T7)</b> 24-bit RGB, binary transparency, includes background color:<br>
<img width="85" height="62" src="./images/png/rgb8_t_bk.png" alt="[Test image]">
</p>
<p><b>(T8)</b> 24-bit RGB, binary transparency, no background color:<br>
<img width="85" height="62" src="./images/png/rgb8_t.png" alt="[Test image]">
</p>
<p><b>(T9)</b> 48-bit RGB, binary transparency, includes background color:<br>
<img width="85" height="62" src="./images/png/rgb16_t_bk.png" alt="[Test image]">
</p>
<p><b>(T10)</b> 48-bit RGB, binary transparency, no background color:<br>
<img width="85" height="62" src="./images/png/rgb16_t.png" alt="[Test image]">
</p>
<h3>Grayscale alpha transparency</h3>
<p>Expected result:<br>
<img width="95" height="72" src="./images/png/resultga.gif" alt="[Test image]">
</p>
<p><b>(G1)</b> 16 bpp grayscale (8 gray + 8 alpha), includes background color:<br>
<img width="85" height="62" src="./images/png/gray8a_bk.png" alt="[Test image]">
</p>
<p><b>(G2)</b> 16 bpp grayscale (8 gray + 8 alpha), no background color:<br>
<img width="85" height="62" src="./images/png/gray8a.png" alt="[Test image]">
</p>
<p><b>(G3)</b> 32 bpp grayscale (16 gray + 16 alpha), includes background color:<br>
<img width="85" height="62" src="./images/png/gray16a_bk.png" alt="[Test image]">
</p>
<p><b>(G4)</b> 32 bpp grayscale (16 gray + 16 alpha), no background color:<br>
<img width="85" height="62" src="./images/png/gray16a.png" alt="[Test image]">
<h3>Grayscale binary transparency</h3>
<p>Expected result:<br>
<img width="95" height="72" src="./images/png/resultgb.gif" alt="[Test image]">
</p>
<p><b>(G5)</b> 8 bpp grayscale (8 gray), includes background color:<br>
<img width="85" height="62" src="./images/png/gray8b_bk.png" alt="[Test image]">
</p>
<p><b>(G6)</b> 8 bpp grayscale (8 gray), no background color:<br>
<img width="85" height="62" src="./images/png/gray8b.png" alt="[Test image]">
</p>
<p><b>(G7)</b> 16 bpp grayscale (16 gray), includes background color:<br>
<img width="85" height="62" src="./images/png/gray16b_bk.png" alt="[Test image]">
</p>
<p><b>(G8)</b> 16 bpp grayscale (16 gray), no background color:<br>
<img width="85" height="62" src="./images/png/gray16b.png" alt="[Test image]">
<h3>Miscellaneous</h3>
<p><b>(M1)</b> 8-bit palette, no transparency, includes background color:<br>
Expected result:<br>
<img width="95" height="72" src="./images/png/result_no.gif" alt="[Test image]"><br>
<img width="85" height="62" src="./images/png/pal_bk_notrns.png" alt="[Test image]">
</p>
<p><b>(M2)</b> (4-bit) palette, binary transparency only, no background color:<br>
Expected result:<br>
<img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]"><br>
<img width="85" height="62" src="./images/png/palb.png" alt="[Test image]"><br>
(This tests a few things that may have slipped through the cracks.)
</p>
</body></html>

149
pdf/www/test/image_variants.html Executable file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
color: #7d7a7a;
font-family: sans-serif;
}
div.bgimages a {
padding-left:20px;
background:url(images/pdf.png) no-repeat yellow;
}
div.bgimages ul {
text-align: left;
line-height:170%;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h2> 40% of box width:</h2>
<div style="width:360pt; border:1pt solid #7d7a7a">
<img style="width:40%;" src="images/dompdf_simple.png"/>
</div>
<h2>multiple identical images jpg:</h2>
<img src="images/goldengate.jpg" width="204" height="272"/>
<img src="images/goldengate.jpg" width="204" height="272"/>
<img src="images/goldengate.jpg" width="204" height="272"/>
<h2>multiple identical images gif (will be recoded to png by dompdf):</h2>
<img src="images/what_ordered.gif" width="560" height="272"/>
<img src="images/what_ordered.gif" width="560" height="272"/>
<img src="images/what_ordered.gif" width="560" height="272"/>
<h2>multiple identical images png:</h2>
<img src="images/dompdf_simple.png" width="200" height="76"/>
<img src="images/dompdf_simple.png" width="200" height="76"/>
<img src="images/dompdf_simple.png" width="200" height="76"/>
<h2>local png image with alpha channel:</h2>
<img src="images/dokuwiki-128.png" width="128" height="128"/>
<h2 style="color:red;">Attention!</h2>
<p style="color:red;">For external images to work, the following configuration is required:</p>
<pre style="color:red;">dompdf_config.inc.php :</pre>
<pre style="color:red;">define("DOMPDF_ENABLE_REMOTE", true);</pre>
<h2>external png Image with alpha channel:</h2>
<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=wiki:dokuwiki-128.png" width="128" height="128" />
<h2>external image, dynamically created with id in url parameter at end of parameter(.jpg):</h2>
<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg" width="500" height="375" />
<h2>external image, dynamically created with id in url parameter not at end of parameter (.jpg):</h2>
<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg&amp;w=100" width="100" height="75" />
<h2>external Image without file extension (.gif):</h2>
<img width="82" height="233" src="http://www.taz.de/fileadmin/templates/neu/images/logo" />
<h2><a name="bgimages">Background images</a></h2>
<div class="bgimages">
<ul>
<li><a href="bgimages">no-repeat position:default</a></li>
<li><a href="bgimages" style="background-position:left center;">no-repeat position:left-center</a></li>
<li><a href="bgimages" style="background-position:left bottom;">no-repeat position:left-bottom</a></li>
<li><a href="bgimages" style="background-position:right bottom;">no-repeat position:right-bottom</a></li>
<li><a href="bgimages" style="background-position:center center;">no-repeat position:center-center</a></li>
<li><a href="bgimages" style="background-position:50% 50%;">no-repeat position:50%-50%</a></li>
<li><a href="bgimages" style="background-position:4px 8px;">no-repeat position:4px-8px</a></li>
<li><a href="bgimages" style="background-position:-4px -8px;">no-repeat position:-4px--8px</a></li>
<li><a href="bgimages" style="background-position:32px 0px;">no-repeat position:32px-0px</a></li>
<li><a href="bgimages" style="background-position:0px 8px;">no-repeat position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat-y;">repeat-y position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left center;">repeat-y position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left bottom;">repeat-y position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:right bottom;">repeat-y position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:center center;">repeat-y position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:50% 50%;">repeat-y position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:4px 8px;">repeat-y position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:-4px -8px;">repeat-y position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:32px 0px;">repeat-y position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:0px 8px;">repeat-y position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat-x;">repeat-x position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left center;">repeat-x position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left bottom;">repeat-x position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:right bottom;">repeat-x position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:center center;">repeat-x position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:50% 50%;">repeat-x position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:4px 8px;">repeat-x position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:-4px -8px;">repeat-x position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:32px 0px;">repeat-x position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:0px 8px;">repeat-x position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat;">repeat position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:left center;">repeat position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:left bottom;">repeat position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:right bottom;">repeat position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:center center;">repeat position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:50% 50%;">repeat position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:4px 8px;">repeat position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:-4px -8px;">repeat position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:32px 0px;">repeat position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:0px 8px;">repeat position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-position:32px 8px;">no-repeat position:32px-8px</a></li>
<li><a href="bgimages" style="background-position:32pt 8pt;">no-repeat position:32pt-8pt</a></li>
<li><a href="bgimages" style="background-position:32px 32px;">no-repeat position:32px-32px</a></li>
<li><a href="bgimages" style="background-position:-16px -16px;">no-repeat position:-16px--16px</a></li>
</ul>
<ul>
<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>
<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>
<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>
<li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]
Added very long description, to see if non repeating background image is repeated after a line break.
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
...
</a></li>
<h2 style="color:red;">Attention!</h2>
<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>
<li><a href="bgimages" style="background-image:url(/absimagetest/smiley.png);">no-repeat position:default image:url(/absimagetest/smiley.png) [abs image ]</a></li>
</ul>
</div>
<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>
<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>
<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>
<p>
<span>The PHP 5 HTML to PDF converter</span>
</p>
</div>
</body> </html>

BIN
pdf/www/test/images/bmp/test1.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
pdf/www/test/images/bmp/test1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 B

BIN
pdf/www/test/images/bmp/test16.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
pdf/www/test/images/bmp/test16.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
pdf/www/test/images/bmp/test16bf555.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
pdf/www/test/images/bmp/test16bf555.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
pdf/www/test/images/bmp/test16bf565.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
pdf/www/test/images/bmp/test16bf565.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 790 B

BIN
pdf/www/test/images/bmp/test24.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
pdf/www/test/images/bmp/test24.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
pdf/www/test/images/bmp/test32.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
pdf/www/test/images/bmp/test32.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
pdf/www/test/images/bmp/test32bf.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
pdf/www/test/images/bmp/test32bf.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
pdf/www/test/images/bmp/test32bfv4.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
pdf/www/test/images/bmp/test32bfv4.png Executable file
View File

Binary file not shown.

BIN
pdf/www/test/images/bmp/test32v5.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
pdf/www/test/images/bmp/test32v5.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
pdf/www/test/images/bmp/test4.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
pdf/www/test/images/bmp/test4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 B

BIN
pdf/www/test/images/bmp/test4os2v2.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
pdf/www/test/images/bmp/test4os2v2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
pdf/www/test/images/bmp/test8.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
pdf/www/test/images/bmp/test8.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 557 B

BIN
pdf/www/test/images/bmp/test8os2.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
pdf/www/test/images/bmp/test8os2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 557 B

BIN
pdf/www/test/images/bmp/testcompress4.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 B

BIN
pdf/www/test/images/bmp/testcompress4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 B

BIN
pdf/www/test/images/bmp/testcompress8.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
pdf/www/test/images/bmp/testcompress8.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 557 B

BIN
pdf/www/test/images/bmp/trans.bmp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
pdf/www/test/images/bmp/trans.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
pdf/www/test/images/cmyk_test2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

BIN
pdf/www/test/images/dokuwiki-128.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

Some files were not shown because too many files have changed in this diff Show More