Skip to content

P
pagedjs
Commit 0284465c authored by Fred Chasen's avatar Fred Chasen
Browse files
Options

Merge branch 'page-border' into 'master' 

Basic support for correct borders on the page

See merge request !107
parents 8ba330c5 03fff076
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 100 deletions
specs/page-border/page-border.html 0 → 100644
View file @ 0284465c
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>example for the page borders and background-origin feature</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: letter;
margin: 1.2in;
padding: 1em;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
}
section {
break-before: page;
}
.part-one {
page: partOne;
}
.part-two {
page: partTwo;
}
@page partOne {
border-top: 10px solid orange;
/* padding-top: 3em; */
padding: 2em 4em;
margin: 3em;
border: 2px solid red;
background: yellow;
/* the default */
background-origin: border-box;
background-repeat: no-repeat;
}
@page partTwo {
border: 3px solid red;
border-top: 10px solid orange;
border-bottom: 5px solid green;
background: purple;
background-origin: content-box;
}
</style>
</head>
<body>
<section class="part-one">
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section class="part-two">
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
</body>
</html>
\ No newline at end of file
src/modules/paged-media/atpage.js
View file @ 0284465c
This diff is collapsed.
src/polisher/base.js
View file @ 0284465c
......@@ -16,6 +16,10 @@ export default `
--pagedjs-padding-right: 0mm;
--pagedjs-padding-bottom: 0mm;
--pagedjs-padding-left: 0mm;
--pagedjs-border-top: 0mm;
--pagedjs-border-right: 0mm;
--pagedjs-border-bottom: 0mm;
--pagedjs-border-left: 0mm;
--pagedjs-bleed-top: 0mm;
--pagedjs-bleed-right: 0mm;
--pagedjs-bleed-bottom: 0mm;
......@@ -359,8 +363,11 @@ export default `
grid-row: page;
width: 100%;
height: 100%;
padding: var(--pagedjs-padding-top) var(--pagedjs-padding-right) var(--pagedjs-padding-bottom) var(--pagedjs-padding-left)
padding: var(--pagedjs-padding-top) var(--pagedjs-padding-right) var(--pagedjs-padding-bottom) var(--pagedjs-padding-left);
border-top: var(--pagedjs-border-top);
border-right: var(--pagedjs-border-right);
border-bottom: var(--pagedjs-border-bottom);
border-left: var(--pagedjs-border-left);
}
.pagedjs_pagebox > .pagedjs_area > .pagedjs_page_content {
......
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