Commit a52e8ed1 authored by Julie Blanc's avatar Julie Blanc

add link to script + generate correct PDF

parent 17b0067b
......@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Fichier test
Margin boxes default text alignement
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
......@@ -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 {
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 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Fichier test
Margin boxes style: border, background-color
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
......
......@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Fichier test
Margin boxes text-align
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
......@@ -20,67 +20,83 @@
@top-left-corner{
content: "A";
text-align: right;
background-color: crimson;
}
@top-left{
content: "top-left";
text-align: right;
background-color: coral;
}
@top-center{
content: "top-left";
text-align: right;
background-color: yellow;
}
@top-right{
content: "top-left";
text-align: right;
background-color: coral;
}
@top-right-corner{
content: "B";
text-align: right;
background-color: crimson;
}
@right-top{
content: "right-top";
text-align: right;
background-color: cornflowerblue;
}
@right-middle{
content: "right-middle";
text-align: right;
background-color: aquamarine;
}
@right-bottom{
content: "right-bottom";
text-align: right;
background-color: cornflowerblue;
}
@bottom-right-corner{
content: "C";
text-align: center;
background-color: crimson;
}
@bottom-left{
content: "bottom-left";
text-align: center;
background-color: coral;
}
@bottom-center{
content: "bottom-left";
text-align: center;
background-color: yellow;
}
@bottom-right{
content: "bottom-left";
text-align: center;
background-color: coral;
}
@bottom-left-corner{
content: "D";
text-align: center;
background-color: crimson;
}
@left-top{
content: "left-top";
text-align: center;
background-color: cornflowerblue;
}
@left-middle{
content: "left-middle";
text-align: center;
background-color: aquamarine;
}
@left-bottom{
content: "left-bottom";
text-align: center;
background-color: cornflowerblue;
}
}
......@@ -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>
......
......@@ -4,10 +4,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Fichier test
Margin boxes vertical align
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
......@@ -20,67 +20,83 @@
@top-left-corner{
content: "A";
vertical-align: top;
background-color: crimson;
}
@top-left{
content: "top-left";
vertical-align: top;
background-color: coral;
}
@top-center{
content: "top-left";
vertical-align: top;
background-color: yellow;
}
@top-right{
content: "top-left";
vertical-align: top;
background-color: coral;
}
@top-right-corner{
content: "B";
vertical-align: center;
vertical-align: top;
background-color: crimson;
}
@right-top{
content: "right-top";
vertical-align: center;
background-color: cornflowerblue;
}
@right-middle{
content: "right-middle";
vertical-align: center;
background-color: aquamarine;
}
@right-bottom{
content: "right-bottom";
vertical-align: center;
background-color: cornflowerblue;
}
@bottom-right-corner{
content: "C";
vertical-align: bottom;
background-color: crimson;
}
@bottom-left{
content: "bottom-left";
vertical-align: bottom;
background-color: coral;
}
@bottom-center{
content: "bottom-left";
vertical-align: bottom;
background-color: yellow;
}
@bottom-right{
content: "bottom-left";
vertical-align: bottom;
background-color: coral;
}
@bottom-left-corner{
content: "D";
vertical-align: center;
vertical-align: bottom;
background-color: crimson;
}
@left-top{
content: "left-top";
vertical-align: center;
background-color: cornflowerblue;
}
@left-middle{
content: "left-middle";
vertical-align: center;
background-color: aquamarine;
}
@left-bottom{
content: "left-bottom";
vertical-align: center;
background-color: cornflowerblue;
}
}
......@@ -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>
</head>
<body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment