diff --git a/page-selector/blank-page/blank-page.html b/page-selector/blank-page/blank-page.html
index 5f2329a54fc331febbf7e0231e5320a2d87272fb..e8c398f2f174cdb77714d7c3a8110ca66f11c141 100644
--- a/page-selector/blank-page/blank-page.html
+++ b/page-selector/blank-page/blank-page.html
@@ -7,13 +7,11 @@
@page:nth(n)
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
@@ -22,6 +20,10 @@
@bottom-center { content: "running title"}
}
+
+ /* @page blank --------------------------------------- */
+
+
@page:blank {
background-color: yellow;
@bottom-left { content: none; }
@@ -29,19 +31,55 @@
}
- section {
- break-before: right;
- }
+ /* -------------------------------------------------- */
- p {
- line-height: 22px;
- }
+
+ :root { font-size: 18px; }
+
+ section { break-before: right; }
+
+ p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-bottom: 10mm;
+ flex: none;
+ }
+
+ .pagedjs_pages {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ transform-origin: 0 0;
+ margin: 0 auto;
+ }
+
+ .pagedjs_pages>.section {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .pagedjs_first_page {
+ margin-left: 50%;
+ }
+
+ }
+
</style>
diff --git a/page-selector/first-page/first-page.html b/page-selector/first-page/first-page.html
index df2669eedb7bf2a095263d78bfa019630dee639d..5ae87a8b0ddd3dda14d53c6ee8a0e46537acef34 100644
--- a/page-selector/first-page/first-page.html
+++ b/page-selector/first-page/first-page.html
@@ -7,13 +7,11 @@
@page:first
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
@@ -23,6 +21,10 @@
}
}
+
+
+ /* @page:first --------------------------------------- */
+
@page :first{
background-color: yellow;
@bottom-center{
@@ -30,22 +32,36 @@
}
}
+ /* -------------------------------------------------- */
- section {
- break-before: page;
- page-break-before: always;
- }
- p {
- line-height: 22px;
- }
+
+
+ :root { font-size: 18px; }
+
+ section { break-before: page; }
+
+ p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-top: 10mm;
+ margin-left: 10mm;
+ }
+
+ }
+
</style>
diff --git a/page-selector/page-group/blank-of-page-group/blank-of-page-group.html b/page-selector/page-group/blank-of-page-group/blank-of-page-group.html
index d423a6986ce6f3c0d5d798ad289ab33b6eaec588..f5956a63ac8f3ffefbfa522d789bc2a13959f5b8 100644
--- a/page-selector/page-group/blank-of-page-group/blank-of-page-group.html
+++ b/page-selector/page-group/blank-of-page-group/blank-of-page-group.html
@@ -7,17 +7,14 @@
Fichier test
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
- /* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
@@ -26,6 +23,9 @@
}
}
+ /* page blank of page group --------------------------------------- */
+
+
.chapter {
page: chapter;
}
@@ -41,20 +41,55 @@
}
}
- section {
- break-before: right;
- page-break-before: right;
- }
+ /* page blank of page group --------------------------------------- */
- p {
- line-height: 22px;
- }
+
+ :root { font-size: 18px; }
+
+ section { break-before: right; }
+
+ p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-bottom: 10mm;
+ flex: none;
+ }
+
+ .pagedjs_pages {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ transform-origin: 0 0;
+ margin: 0 auto;
+ }
+
+ .pagedjs_pages>.section {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .pagedjs_first_page {
+ margin-left: 50%;
+ }
+
+ }
+
</style>
diff --git a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-correct.pdf b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-correct.pdf
deleted file mode 100644
index 2651a5dd0808043ef81bfc3cb45701ba99dd64bd..0000000000000000000000000000000000000000
Binary files a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-correct.pdf and /dev/null differ
diff --git a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-wrong.pdf b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-wrong.pdf
deleted file mode 100644
index c4e5f85ac72799f8a4f0a9f3ed7d05936e3a37dc..0000000000000000000000000000000000000000
Binary files a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group-wrong.pdf and /dev/null differ
diff --git a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.html b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.html
index a8096f6e85fb5d62383a9ea64a92f21a006807f6..5391dc15c84e046ad7efab9da5a604b48cae8d1b 100644
--- a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.html
+++ b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.html
@@ -7,13 +7,10 @@
First page of page group
</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;
- }
@page {
@@ -32,6 +29,8 @@
}
}
+ /* first page of page group --------------------------------------- */
+
@page chapter :first {
margin: 20mm 20mm;
background-color: yellow;
@@ -46,23 +45,61 @@
.chapter {
page: chapter;
- prince-page-group: start; /* for Prince*/
break-before: page;
break-after: page;
- page-break-before: always;
- page-break-after: always;
}
+
+ /* first page of page group --------------------------------------- */
+
- p {
- line-height: 22px;
- }
+ :root { font-size: 18px; }
+
+ section { break-before: right; }
- h1 {
+ p { line-height: 22px; }
+
+ h1{
font-size: 24px;
margin-top: 0;
}
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-bottom: 10mm;
+ flex: none;
+ }
+
+ .pagedjs_pages {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ transform-origin: 0 0;
+ margin: 0 auto;
+ }
+
+ .pagedjs_pages>.section {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .pagedjs_first_page {
+ margin-left: 50%;
+ }
+
+ }
+
+
</style>
diff --git a/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.pdf b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..66b31f5777951a52ef648224e4f37b151f021192
Binary files /dev/null and b/page-selector/page-group/first-page-of-page-group/first-page-of-page-group.pdf differ
diff --git a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-correct.pdf b/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-correct.pdf
deleted file mode 100644
index ec6a8620013d07fd099ba5c8c7f10c8cd224d329..0000000000000000000000000000000000000000
Binary files a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-correct.pdf and /dev/null differ
diff --git a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-wrong.pdf b/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-wrong.pdf
index d30f0b64bf9f459952b1edce7c415f1bb3709894..136b9b392856e1e46d5e8c6d9e66bf50351b8a70 100644
Binary files a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-wrong.pdf and b/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group-wrong.pdf differ
diff --git a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group.html b/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group.html
index ce3154fab966388b8b14f752f22e92b32474f8ec..3e3b7fa5c72999921cf6dea7ddd4f6551aa91e74 100644
--- a/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group.html
+++ b/page-selector/page-group/nth(n)-page-of-page-group/nth(n)-page-of-page-group.html
@@ -7,15 +7,11 @@
nth(n) page of page group
</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;
- }
-
-
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
@@ -25,6 +21,10 @@
}
}
+
+ /* nth page of page group --------------------------------------- */
+
+
@page chapter {
margin: 20mm 20mm;
@bottom-center {
@@ -32,7 +32,7 @@
}
}
- @page chapter:nth(2) {
+ @page chapter :nth(2) {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center {
@@ -42,21 +42,43 @@
.chapter {
page: chapter;
- prince-page-group: start; /* for Prince*/
break-before: page;
break-after: page;
- page-break-before: always;
- page-break-after: always;
}
+ /* nth page of page group --------------------------------------- */
- p {
- line-height: 22px;
- }
+
+
+ :root { font-size: 18px; }
+
+ section { break-before: page; }
+
+ p { line-height: 22px; }
h1 {
font-size: 24px;
margin-top: 0;
+ text-transform: uppercase;
+ }
+
+ h2,
+ h3 {
+ font-size: 20px;
+ margin-top: 0;
+ }
+
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-top: 10mm;
+ margin-left: 10mm;
+ }
+
}
</style>
diff --git a/page-selector/page-group/spread-of-page-group/spread-of-page-group.html b/page-selector/page-group/spread-of-page-group/spread-of-page-group.html
index b145ca762628028bcf897b85ac936bf9cbdea8e0..3e4d05bbb4c06acfee742a9c95eda86f87addf28 100644
--- a/page-selector/page-group/spread-of-page-group/spread-of-page-group.html
+++ b/page-selector/page-group/spread-of-page-group/spread-of-page-group.html
@@ -7,13 +7,11 @@
Fichier test
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
@@ -23,6 +21,9 @@
}
}
+
+ /* spread of page group --------------------------------------- */
+
.chapter {
page: chapter;
}
@@ -46,14 +47,14 @@
}
}
- section {
- break-before: page;
- page-break-before: always;
- }
+ /* spread of page group --------------------------------------- */
- p {
- line-height: 22px;
- }
+
+ :root { font-size: 18px; }
+
+ section { break-before: right; }
+
+ p { line-height: 22px; }
h1{
font-size: 24px;
@@ -62,48 +63,38 @@
@media screen {
- body {
- background-color: whitesmoke;
- }
-
+ body { background-color: whitesmoke; }
- .page {
- background-color: #fdfdfd;
- margin-bottom: calc(var(--margin) / 2);
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-bottom: 10mm;
flex: none;
- border: solid 1px black;
- margin-bottom: 20px;
- }
-
- .pages {
- width: calc(var(--width) * 2);
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- transform-origin: 0 0;
- margin: 0px auto;
- }
-
- .pages > .section {
- width: calc(var(--width) * 2);
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- }
+ }
- #controls {
- margin: 20px 0;
- text-align: center;
- }
+ .pagedjs_pages {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ transform-origin: 0 0;
+ margin: 0 auto;
+ }
- .first_page {
- margin-left: 50%;
- }
+ .pagedjs_pages>.section {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
}
+ .pagedjs_first_page {
+ margin-left: 50%;
+ }
+ }
</style>
diff --git a/page-selector/page-group/spread-of-page-group/spread-of-page-group.pdf b/page-selector/page-group/spread-of-page-group/spread-of-page-group.pdf
index 2d07c255396d299a9327f544e09ce8e44b3c59aa..fb9a92a975c32a91695842c4e99db3a8ce30e95e 100644
Binary files a/page-selector/page-group/spread-of-page-group/spread-of-page-group.pdf and b/page-selector/page-group/spread-of-page-group/spread-of-page-group.pdf differ
diff --git a/page-selector/page-nth/page-nth.html b/page-selector/page-nth/page-nth.html
index 5a74bb43cf732882f9d5a3d4c581e2e51c6cb100..5912d93353efd92bb55778d8a3aa24f6e37b19b0 100644
--- a/page-selector/page-nth/page-nth.html
+++ b/page-selector/page-nth/page-nth.html
@@ -7,45 +7,55 @@
@page:nth(n)
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
- /* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
+ /* @page:nth(n) --------------------------------------- */
+
@page:nth(3) {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center{
content: "3rd page of the document"
- }
-
+ }
}
- section {
- break-before: page;
- page-break-before: always;
- }
+ /* ------------------------------------------------------ */
+
+ :root { font-size: 18px; }
+
+ section { break-before: page; }
- p {
- line-height: 22px;
- }
+ p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
+ @media screen {
+
+ body { background-color: whitesmoke; }
+
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-top: 10mm;
+ margin-left: 10mm;
+ }
+
+ }
+
</style>
diff --git a/page-selector/page-spread/page-spread.html b/page-selector/page-spread/page-spread.html
index bde2b4cf212b2973ca408c4b7e009867671bb923..cdd4ef4a84d9b75f909910a21cac82543a0d6e6e 100644
--- a/page-selector/page-spread/page-spread.html
+++ b/page-selector/page-spread/page-spread.html
@@ -7,29 +7,28 @@
@page:left and @page:right
</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;
- }
+
@page {
size: 6in 8in;
margin: 20mm 20mm;
- /* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
+
+ /* @page spread --------------------------------------- */
+
@page:left {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center{
content: "left"
}
-
}
@page:right {
@@ -37,65 +36,60 @@
background-color: red;
@bottom-center{
content: "right"
- }
-
+ }
}
- section {
- break-before: page;
- page-break-before: always;
- }
- p {
- line-height: 22px;
- }
+ /* ----------------------------------------------------- */
- h1{
- font-size: 24px;
- margin-top: 0;
- }
- /* interface */
+
+ :root { font-size: 18px; }
+
+ section { break-before: right; }
- @media screen {
+ p { line-height: 22px; }
-body {
- background-color: whitesmoke;
-}
+ h1{
+ font-size: 24px;
+ margin-top: 0;
+ }
+ @media screen {
-.pagedjs_page {
- margin-bottom: calc(var(--margin) / 2);
- flex: none;
- border: 1px solid black;
-}
+ body { background-color: whitesmoke; }
-.pagedjs_pages {
- width: calc(var(--width) * 2);
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- transform-origin: 0 0;
- margin: 0 auto;
-}
+ .pagedjs_page {
+ background-color: white;
+ box-shadow: 0 0 0 1px #bfbfbf;
+ margin-bottom: 10mm;
+ flex: none;
+ }
-.pagedjs_pages>.section {
- width: calc(var(--width) * 2);
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
-}
+ .pagedjs_pages {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ transform-origin: 0 0;
+ margin: 0 auto;
+ }
-.pagedjs_first_page {
- margin-left: 50%;
-}
-}
+ .pagedjs_pages>.section {
+ width: calc(var(--width) * 2);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+ .pagedjs_first_page {
+ margin-left: 50%;
+ }
-
+ }
</style>