Commit a52e8ed1 authored by Julie Blanc's avatar Julie Blanc
Browse files

add link to script + generate correct PDF

parent 17b0067b
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<title> <title>
Fichier test Margin boxes default text alignement
</title> </title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script> <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style> <style>
...@@ -87,26 +87,6 @@ ...@@ -87,26 +87,6 @@
} }
/* Colors */
.pagedjs_margin-top-left-corner { background-color: crimson; }
.pagedjs_margin-top-left { background-color: coral; }
.pagedjs_margin-top-center { background-color: yellow; }
.pagedjs_margin-top-right { background-color: coral; }
.pagedjs_margin-top-right-corner { background-color: crimson; }
.pagedjs_margin-right-top { background-color: cornflowerblue; }
.pagedjs_margin-right-middle { background-color: aquamarine; }
.pagedjs_margin-right-bottom { background-color: cornflowerblue; }
.pagedjs_margin-bottom-left-corner { background-color: crimson; }
.pagedjs_margin-bottom-left { background-color: coral; }
.pagedjs_margin-bottom-center { background-color: yellow; }
.pagedjs_margin-bottom-right { background-color: coral; }
.pagedjs_margin-bottom-right-corner { background-color: crimson; }
.pagedjs_margin-left-top { background-color: cornflowerblue; }
.pagedjs_margin-left-middle { background-color: aquamarine; }
.pagedjs_margin-left-bottom { background-color: cornflowerblue; }
p { p {
line-height: 22px; line-height: 22px;
} }
......
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Fichier test
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
border: 1px solid black;
@top-left{
content: "top-left";
background-color: coral;
}
@top-center{
/* content: "top-center"; */
/* background-color: yellow; */
}
@top-right{
content: "top-right";
background-color: crimson;
}
@left-top{
content: "left-top";
background-color: aquamarine;
}
@left-middle{
content: "left-middle";
background-color: cornflowerblue;
}
@left-bottom{
content: "left-bottom";
background-color: green;
}
}
p {
line-height: 22px;
}
.pagedjs_margin-top-left-corner,
/* .pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right, */
.pagedjs_margin-top-right-corner,
.pagedjs_margin-right-top,
.pagedjs_margin-right-middle,
.pagedjs_margin-right-bottom,
.pagedjs_margin-bottom-left-corner,
.pagedjs_margin-bottom-left,
.pagedjs_margin-bottom-center,
.pagedjs_margin-bottom-right,
.pagedjs_margin-bottom-right-corner
/* .pagedjs_margin-left-top,
.pagedjs_margin-left-middle,
.pagedjs_margin-left-bottom */ {
box-shadow: 0 0 0 1px #bfbfbf;
}
/* .pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right { width: 50%; flex-grow: 0; } */
.pagedjs_margin-top-center { width: 0; flex-grow: 0; }
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<title> <title>
Fichier test Margin boxes style: border, background-color
</title> </title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script> <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style> <style>
:root{ :root{
font-size: 18px; font-size: 18px;
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<title> <title>
Fichier test Margin boxes text-align
</title> </title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script> <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style> <style>
...@@ -20,67 +20,83 @@ ...@@ -20,67 +20,83 @@
@top-left-corner{ @top-left-corner{
content: "A"; content: "A";
text-align: right; text-align: right;
background-color: crimson;
} }
@top-left{ @top-left{
content: "top-left"; content: "top-left";
text-align: right; text-align: right;
background-color: coral;
} }
@top-center{ @top-center{
content: "top-left"; content: "top-left";
text-align: right; text-align: right;
background-color: yellow;
} }
@top-right{ @top-right{
content: "top-left"; content: "top-left";
text-align: right; text-align: right;
background-color: coral;
} }
@top-right-corner{ @top-right-corner{
content: "B"; content: "B";
text-align: right; text-align: right;
background-color: crimson;
} }
@right-top{ @right-top{
content: "right-top"; content: "right-top";
text-align: right; text-align: right;
background-color: cornflowerblue;
} }
@right-middle{ @right-middle{
content: "right-middle"; content: "right-middle";
text-align: right; text-align: right;
background-color: aquamarine;
} }
@right-bottom{ @right-bottom{
content: "right-bottom"; content: "right-bottom";
text-align: right; text-align: right;
background-color: cornflowerblue;
} }
@bottom-right-corner{ @bottom-right-corner{
content: "C"; content: "C";
text-align: center; text-align: center;
background-color: crimson;
} }
@bottom-left{ @bottom-left{
content: "bottom-left"; content: "bottom-left";
text-align: center; text-align: center;
background-color: coral;
} }
@bottom-center{ @bottom-center{
content: "bottom-left"; content: "bottom-left";
text-align: center; text-align: center;
background-color: yellow;
} }
@bottom-right{ @bottom-right{
content: "bottom-left"; content: "bottom-left";
text-align: center; text-align: center;
background-color: coral;
} }
@bottom-left-corner{ @bottom-left-corner{
content: "D"; content: "D";
text-align: center; text-align: center;
background-color: crimson;
} }
@left-top{ @left-top{
content: "left-top"; content: "left-top";
text-align: center; text-align: center;
background-color: cornflowerblue;
} }
@left-middle{ @left-middle{
content: "left-middle"; content: "left-middle";
text-align: center; text-align: center;
background-color: aquamarine;
} }
@left-bottom{ @left-bottom{
content: "left-bottom"; content: "left-bottom";
text-align: center; text-align: center;
background-color: cornflowerblue;
} }
} }
...@@ -90,23 +106,6 @@ ...@@ -90,23 +106,6 @@
} }
.pagedjs_margin-top-left-corner { background-color: crimson; }
.pagedjs_margin-top-left { background-color: coral; }
.pagedjs_margin-top-center { background-color: yellow; }
.pagedjs_margin-top-right { background-color: coral; }
.pagedjs_margin-top-right-corner { background-color: crimson; }
.pagedjs_margin-right-top { background-color: cornflowerblue; }
.pagedjs_margin-right-middle { background-color: aquamarine; }
.pagedjs_margin-right-bottom { background-color: cornflowerblue; }
.pagedjs_margin-bottom-left-corner { background-color: crimson; }
.pagedjs_margin-bottom-left { background-color: coral; }
.pagedjs_margin-bottom-center { background-color: yellow; }
.pagedjs_margin-bottom-right { background-color: coral; }
.pagedjs_margin-bottom-right-corner { background-color: crimson; }
.pagedjs_margin-left-top { background-color: cornflowerblue; }
.pagedjs_margin-left-middle { background-color: aquamarine; }
.pagedjs_margin-left-bottom { background-color: cornflowerblue; }
</style> </style>
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<title> <title>
Fichier test Margin boxes vertical align
</title> </title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script> <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style> <style>
...@@ -20,67 +20,83 @@ ...@@ -20,67 +20,83 @@
@top-left-corner{ @top-left-corner{
content: "A"; content: "A";
vertical-align: top; vertical-align: top;
background-color: crimson;
} }
@top-left{ @top-left{
content: "top-left"; content: "top-left";
vertical-align: top; vertical-align: top;
background-color: coral;
} }
@top-center{ @top-center{
content: "top-left"; content: "top-left";
vertical-align: top; vertical-align: top;
background-color: yellow;
} }
@top-right{ @top-right{
content: "top-left"; content: "top-left";
vertical-align: top; vertical-align: top;
background-color: coral;
} }
@top-right-corner{ @top-right-corner{
content: "B"; content: "B";
vertical-align: center; vertical-align: top;
background-color: crimson;
} }
@right-top{ @right-top{
content: "right-top"; content: "right-top";
vertical-align: center; vertical-align: center;
background-color: cornflowerblue;
} }
@right-middle{ @right-middle{
content: "right-middle"; content: "right-middle";
vertical-align: center; vertical-align: center;
background-color: aquamarine;
} }
@right-bottom{ @right-bottom{
content: "right-bottom"; content: "right-bottom";
vertical-align: center; vertical-align: center;
background-color: cornflowerblue;
} }
@bottom-right-corner{ @bottom-right-corner{
content: "C"; content: "C";
vertical-align: bottom; vertical-align: bottom;
background-color: crimson;
} }
@bottom-left{ @bottom-left{
content: "bottom-left"; content: "bottom-left";
vertical-align: bottom; vertical-align: bottom;
background-color: coral;
} }
@bottom-center{ @bottom-center{
content: "bottom-left"; content: "bottom-left";
vertical-align: bottom; vertical-align: bottom;
background-color: yellow;
} }
@bottom-right{ @bottom-right{
content: "bottom-left"; content: "bottom-left";
vertical-align: bottom; vertical-align: bottom;
background-color: coral;
} }
@bottom-left-corner{ @bottom-left-corner{
content: "D"; content: "D";
vertical-align: center; vertical-align: bottom;
background-color: crimson;
} }
@left-top{ @left-top{
content: "left-top"; content: "left-top";
vertical-align: center; vertical-align: center;
background-color: cornflowerblue;
} }
@left-middle{ @left-middle{
content: "left-middle"; content: "left-middle";
vertical-align: center; vertical-align: center;
background-color: aquamarine;
} }
@left-bottom{ @left-bottom{
content: "left-bottom"; content: "left-bottom";
vertical-align: center; vertical-align: center;
background-color: cornflowerblue;
} }
} }
...@@ -90,63 +106,9 @@ ...@@ -90,63 +106,9 @@
} }
.pagedjs_margin-top-left-corner {
background-color: crimson;
}
.pagedjs_margin-top-left {
background-color: coral;
}
.pagedjs_margin-top-center {
background-color: yellow;
}
.pagedjs_margin-top-right {
background-color: coral;
}
.pagedjs_margin-top-right-corner {
background-color: crimson;
}
.pagedjs_margin-right-top {
background-color: cornflowerblue;
}
.pagedjs_margin-right-middle {
background-color: aquamarine;
}
.pagedjs_margin-right-bottom {
background-color: cornflowerblue;
}
.pagedjs_margin-bottom-left-corner {
background-color: crimson;
}
.pagedjs_margin-bottom-left {
background-color: coral;
}
.pagedjs_margin-bottom-center {
background-color: yellow;
}
.pagedjs_margin-bottom-right {
background-color: coral;
}
.pagedjs_margin-bottom-right-corner {
background-color: crimson;
}
.pagedjs_margin-left-top {
background-color: cornflowerblue;
}
.pagedjs_margin-left-middle {
background-color: aquamarine;
}
.pagedjs_margin-left-bottom {
background-color: cornflowerblue;
}
</style> </style>
</head> </head>
<body> <body>
......