Skip to content

Instantly share code, notes, and snippets.

@guyzmo

guyzmo/test.html

Created April 20, 2017 16:05
Show Gist options
  • Save guyzmo/d38a85f6b231386df95a943b0dc499b6 to your computer and use it in GitHub Desktop.
Save guyzmo/d38a85f6b231386df95a943b0dc499b6 to your computer and use it in GitHub Desktop.
Download ZIP
Example of title failure
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Status Constitutifs — {{Company_Name}}</title>
<style>
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
/* quotes: none;*/
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* tools */
.white_text {
color: white;
font-size: 5pt;
}
.small {
font-size: 9pt;
}
/* Table style */
table {
border: 0.2pt solid black;
/* width: 115%; */
margin-top: 10pt;
margin-bottom: 10pt;
/* margin-left: -1cm; */
}
table thead {
font-weight: bold;
border: 0.2pt solid black;
}
table td {
padding: 2pt;
border: 0.2pt solid black;
}
table tr {
border: 0.2pt solid black;
}
/* legal style */
body {
margin-left: 1cm;
margin-right: 1cm;
margin-top: 3cm;
margin-bottom: 2cm;
font-family: 'cardo', serif;
font-size: 12pt;
line-height: 14.4pt;
}
b, i {
display: inline;
}
b {
font-weight: bold;
}
i {
font-style: italic;
}
/* Counter headers */
body {counter-reset: htitle;}
main {counter-reset: h1;}
h1 {counter-reset: h2;}
h2 {counter-reset: h3;}
/* h3 {counter-reset: h4} */
/* h4 {counter-reset: h5} */
/* h5 {counter-reset: h6} */
main h1:before {
counter-increment: htitle;
content: "TITRE " counter(htitle) " — ";
}
main section h1:before {
counter-increment: h1;
content: counter(h1) ". ";
}
main section article h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". ";
}
main section article article h3:before {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}
/* section h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "} */
/* section h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "} */
/* section h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " counter(h6)} */
h1.nocount:before,
h2.nocount:before,
h3.nocount:before,
h4.nocount:before,
h5.nocount:before,
h6.nocount:before {
content: "";
counter-increment: none;
}
/* Print page breaks */
h1, h2, h3, h4, h5, h6 {
/* page-break-before: auto; */
/* page-break-inside: avoid; */
/* page-break-after: avoid; */
}
img { page-break-inside:avoid; page-break-after: avoid; }
blockquote, table, pre, li { page-break-inside: avoid; }
/* p { page-break-inside: always; } */
/* section { orphans: 3; widows: 3; } */
/* article { orphans: 3; widows: 3; } */
/* main { page-break-before: avoid; page-break-inside: auto; page-break-after: avoid; } */
/* main > section { page-break-before: avoid; page-break-inside: avoid; page-break-after: auto; } */
/* main > section > article { page-break-before: avoid; page-break-inside: avoid; page-break-after: auto; } */
/* main > section > article > article { page-break-before: avoid; page-break-inside: avoid; page-break-after: avoid; } */
/* main > section > p { page-break-before: avoid; page-break-inside: avoid; page-break-after: auto; } */
/* main > section > article > p { page-break-before: avoid; page-break-inside: avoid; page-break-after: auto; } */
/* main > section > article > article > p { page-break-before: avoid; page-break-inside: avoid; page-break-after: auto; } */
/* main > section > h1 { page-break-before: auto; page-break-inside: avoid; page-break-after: avoid; } */
/* main > section > article > h2 { page-break-before: auto; page-break-inside: avoid; page-break-after: avoid; } */
/* main > section > article > article > h3 { page-break-before: auto; page-break-inside: avoid; page-break-after: avoid; } */
/* header, footer { page-break-after: always; } */
ul, ol, dl {
/* page-break-before: avoid; */
/* page-break-inside: avoid; */
orphans: 2;
widows: 2;
}
ul li, ol li {
/* page-break-before: avoid; */
/* page-break-after: avoid; */
orphans: 2;
widows: 2;
}
.break {break-before: left ; }
/* legal style */
body {
margin-top: 3cm;
margin-bottom: 2cm;
}
header {
margin-top: 5cm;
text-align: center
}
header h1 {
margin-top: 5cm;
font-size: 20pt;
margin-bottom: 5cm; /* just for browser display */
}
header h2, h3 {
font-weight: normal;
display: block;
}
h1 {
margin-top: 7.5pt;
margin-bottom: 10pt;
font-size: 14pt;
/* line-height: 25pt; */
font-weight: bold;
}
h2, h3, h4 {
margin-top: 7.5pt;
margin-bottom: 10pt;
font-weight: bold;
display: inline;
}
h3, h4 {
margin-left: 8pt;
margin-bottom: 10pt;
}
p {
text-align: justify;
margin-bottom: 10pt;
}
body {counter-reset: hsect;}
section > h1:before {
counter-increment: hsect;
content: 'TITRE ' counter(hsect) ' - ';
}
article ul {
list-style: disc;
padding-left: 1.4em;
margin-bottom: 10pt;
}
article ul ul {
counter-reset: list;
margin-bottom: 10pt;
}
article ul ul > li {
list-style: none;
position: relative;
left: 1.4em;
}
article ul ul > li:before {
content: "-";
position: absolute;
left: -1.4em;
}
article ol {
counter-reset: list;
margin-bottom: 10pt;
}
article ol > li {
list-style: none;
position: relative;
left: 1.4em;
}
article ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ". ";
position: absolute;
left: -1.4em;
}
dl {
width: 500pt;
display: table;
float: initial;
}
dt {
float:left;
clear: left;
width: 180pt;
font-weight: bold;
}
dd {
clear: left;
float: left;
/* margin-left: 70px; */
}
dt + dd {
float: left;
clear: none;
margin-left: 0;
}
thead {
font-weight: bold;
}
section > ol > li {
list-style: decimal;
}
blockquote {
margin-top: 5pt;
font-weight: bold;
}
.white_text {
color: white;
font-size: 5pt;
}
.small {
font-size: 9pt;
}
.check {
text-align: center;
vertical-align: middle;
font-size: 14pt;
}
.check p {
text-align: center;
vertical-align: middle;
font-size: 14pt;
}
/* Print parameters */
@page {
margin-top: 1cm;
padding-top: 0.5cm;
margin-bottom: 1cm;
padding-bottom: 0.5cm;
@top-center {
content: "Lorem Ipsum — Fubar";
border-bottom: 0.2pt solid black;
font-size: 8pt;
}
}
@page :left {
/*
margin-left: 2cm;
margin-right: 1.5cm;
@top-left {
font-size: 8pt;
content: "§" counter(h1);
}
*/
@bottom-right {
font-size: 8pt;
content: counter(page) "/" counter(pages);
}
}
@page :right {
/*
margin-right: 2cm;
margin-left: 1.5cm;
@top-right {
font-size: 8pt;
content: "§" counter(h1);
}
*/
@bottom-right {
font-size: 8pt;
content: counter(page) "/" counter(pages);
}
}
@page :first {
@top-right { content: none }
@top-center { content: none }
@bottom-right { content: none }
@bottom-left { content: none }
}
/* @page :blank { */
/* @top-right { content: none } */
/* @top-center { content: none } */
/* @bottom-right { content: none } */
/* @bottom-left { content: none } */
/* } */
</style>
<title>
Lorem Ipsum - Fubar
</title>
</head>
<body>
<header>
<h3><b>Fubar</b><br />
Enim qui sapiente cum.<br />
Veritatis molestiae labore quo.<br />
Et vitae vel illo itaque et iure beatae.
</h3>
<h1>
LOREM IPSUM
</h1>
</header>
<br class="break" />
<main>
<section>
<h1> Une pierre </h1>
<article>
<h2> deux maisons </h2>
<p> Enim qui sapiente cum. Veritatis molestiae labore quo. Et
vitae vel illo itaque et iure beatae. Voluptatem iure nobis
explicabo assumenda et mollitia sit minima. Ea dolore
consequatur molestiae minima dicta iure animi. Dolorem est
reprehenderit nemo eos. </p>
</article>
<article>
<h2> trois ruines </h2>
<p> atque aliquid est numquam. Eaque repudiandae quibusdam nam
dolorum modi. Ad natus similique mollitia tempora autem
qui. Nobis ut architecto eos. Aspernatur enim sed
distinctio tempora similique ut quod dolor. </p>
</article>
</section>
<section>
<h1> quatres fossoyeurs </h1>
<article>
<h2> un jardin </h2>
<article>
<h3> des fleurs </h3>
<p> Magnam hic temporibus modi temporibus asperiores error.
Ea sunt sit et et. Labore pariatur ullam aut ducimus
unde nihil. Quia temporibus dolorem molestias
asperiores atque. Dignissimos nostrum repellat velit et
voluptas quo consequuntur. </p>
</article>
<article>
<h3> un raton laveur </h3>
<p> Minus debitis ea quae veritatis qui. Vitae enim veniam
beatae repellendus sit voluptas voluptas. Molestiae et
quidem non sed consequatur quasi eos perspiciatis.</p>
<p> Maxime omnis at earum enim. Voluptatum debitis ut
dolorem earum. Sapiente aperiam architecto culpa.</p>
</article>
</article>
<article>
<h2>une douzaine d'huîtres</h2>
<p> Vel ea asperiores pariatur recusandae maxime accusamus
error ut. Sunt distinctio occaecati ipsa rerum facere et.
Quis consectetur quis voluptatem placeat sapiente est.
Quasi illo dolor asperiores magni qui qui dignissimos.</p>
<p>Quia est omnis enim. Sit reiciendis ullam sed dolore error.
Rerum mollitia labore enim sint eveniet pariatur.</p>
</article>
</section>
<section>
<h1>un citron</h1>
<article>
<h2>un pain</h2>
<article>
<h3> un rayon de soleil </h3>
<p> Magnam hic temporibus modi temporibus asperiores error.
Ea sunt sit et et. Labore pariatur ullam aut ducimus
unde nihil. Quia temporibus dolorem molestias
asperiores atque. Dignissimos nostrum repellat velit et
voluptas quo consequuntur. </p>
</article>
<article>
<h3> une lame de fond </h3>
<p> Minus debitis ea quae veritatis qui. Vitae enim veniam
beatae repellendus sit voluptas voluptas. Molestiae et
quidem non sed consequatur quasi eos perspiciatis.</p>
<p> Maxime omnis at earum enim. Voluptatum debitis ut
dolorem earum. Sapiente aperiam architecto culpa.</p>
</article>
</article>
<article>
<h2> six musiciens </h2>
<p> Vel ea asperiores pariatur recusandae maxime accusamus
error ut. Sunt distinctio occaecati ipsa rerum facere et.
Quis consectetur quis voluptatem placeat sapiente est.
Quasi illo dolor asperiores magni qui qui dignissimos.</p>
<p>Quia est omnis enim. Sit reiciendis ullam sed dolore error.
Rerum mollitia labore enim sint eveniet pariatur. Nihil
reprehenderit eveniet suscipit ut harum qui pariatur rerum.
Nihil reprehenderit eveniet suscipit ut harum qui pariatur
rerum. Aut et ad ut temporibus assumenda. Consequatur nihil qui impedit
molestias expedita non. </p>
</article>
<article>
<h2> une porte avec son paillasson </h2>
<p>Aut et ad ut temporibus assumenda. Consequatur nihil qui impedit
molestias expedita non. Aut qui odit corrupti omnis quia et
provident quo. </p>
</article>
</section>
<section>
<h1> un monsieur décoré de la légion d'honneur </h1>
<p>Ducimus fugiat sed ducimus rerum ex modi hic blanditiis. Ipsam
ullam quia voluptatem quos aut est nostrum aut. Vero non vel
unde nesciunt. Quibusdam et tenetur quas aut. Quibusdam quod
est assumenda dolores quia aliquid exercitationem.</p>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment