Skip to content
Snippets Groups Projects
Commit 8921c5b1 authored by Julie's avatar Julie
Browse files

initial margin-boxes properties

parent 3c9ab677
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 405 additions and 0 deletions
margin-boxes/style/margin-boxes-style-correct.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/style/margin-boxes-style-wrong.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/style/margin-boxes-style.html 0 → 100644
+ 113
− 0
View file @ 8921c5b1
<!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;
@top-left-corner{
content: "A";
background-color: crimson;
}
@top-left{
content: "top-left";
background-color: coral;
}
@top-center{
content: "top-left";
background-color: yellow;
}
@top-right{
content: "top-left";
background-color: coral;
}
@top-right-corner{
content: "B";
background-color: crimson;
}
@right-top{
content: "right-top";
border: solid 1px cornflowerblue;
}
@right-middle{
content: "right-middle";
border: solid 1px aquamarine;
}
@right-bottom{
content: "right-bottom";
border: solid 1px cornflowerblue;
}
@bottom-right-corner{
content: "C";
background-color: crimson;
}
@bottom-left{
content: "bottom-left";
background-color: coral;
}
@bottom-center{
content: "bottom-left";
background-color: yellow;
}
@bottom-right{
content: "bottom-left";
background-color: coral;
}
@bottom-left-corner{
content: "D";
background-color: crimson;
}
@left-top{
content: "left-top";
border: solid 1px cornflowerblue;
}
@left-middle{
content: "left-middle";
border: solid 1px aquamarine;
}
@left-bottom{
content: "left-bottom";
border: solid 1px cornflowerblue;
}
}
p {
line-height: 22px;
}
</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
margin-boxes/text-align/margin-boxes-text-align-correct.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/text-align/margin-boxes-text-align-wrong.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/text-align/margin-boxes-text-align.html 0 → 100644
+ 130
− 0
View file @ 8921c5b1
<!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;
@top-left-corner{
content: "A";
text-align: right;
}
@top-left{
content: "top-left";
text-align: right;
}
@top-center{
content: "top-left";
text-align: right;
}
@top-right{
content: "top-left";
text-align: right;
}
@top-right-corner{
content: "B";
text-align: right;
}
@right-top{
content: "right-top";
text-align: right;
}
@right-middle{
content: "right-middle";
text-align: right;
}
@right-bottom{
content: "right-bottom";
text-align: right;
}
@bottom-right-corner{
content: "C";
text-align: center;
}
@bottom-left{
content: "bottom-left";
text-align: center;
}
@bottom-center{
content: "bottom-left";
text-align: center;
}
@bottom-right{
content: "bottom-left";
text-align: center;
}
@bottom-left-corner{
content: "D";
text-align: center;
}
@left-top{
content: "left-top";
text-align: center;
}
@left-middle{
content: "left-middle";
text-align: center;
}
@left-bottom{
content: "left-bottom";
text-align: center;
}
}
p {
line-height: 22px;
}
.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>
<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
margin-boxes/vertical-align/margin-boxes-vertical-align-correct.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/vertical-align/margin-boxes-vertical-align-wrong.pdf 0 → 100644
+ 0
− 0
View file @ 8921c5b1
File added
margin-boxes/vertical-align/margin-boxes-vertical-align.html 0 → 100644
+ 162
− 0
View file @ 8921c5b1
<!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;
@top-left-corner{
content: "A";
vertical-align: top;
}
@top-left{
content: "top-left";
vertical-align: top;
}
@top-center{
content: "top-left";
vertical-align: top;
}
@top-right{
content: "top-left";
vertical-align: top;
}
@top-right-corner{
content: "B";
vertical-align: center;
}
@right-top{
content: "right-top";
vertical-align: center;
}
@right-middle{
content: "right-middle";
vertical-align: center;
}
@right-bottom{
content: "right-bottom";
vertical-align: center;
}
@bottom-right-corner{
content: "C";
vertical-align: bottom;
}
@bottom-left{
content: "bottom-left";
vertical-align: bottom;
}
@bottom-center{
content: "bottom-left";
vertical-align: bottom;
}
@bottom-right{
content: "bottom-left";
vertical-align: bottom;
}
@bottom-left-corner{
content: "D";
vertical-align: center;
}
@left-top{
content: "left-top";
vertical-align: center;
}
@left-middle{
content: "left-middle";
vertical-align: center;
}
@left-bottom{
content: "left-bottom";
vertical-align: center;
}
}
p {
line-height: 22px;
}
.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>
<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
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