Commit 11925fbb authored by julien's avatar julien
Browse files

add column break examples

parent 121fcbc4
Pipeline #909 failed with stage
in 1 second
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/css-tree@1.1.3/dist/csstree.min.js"></script>
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root {
--doc-title: "the var works for the running head";
}
@page {
size: A4;
@top-center {
content: env(doc-title);
}
@bottom-center {
content: counter(page);
}
}
@page {
@top-left {
content: var(--doc-title);
}
@top-center {
content: "";
}
}
@page :first {
content: " ";
}
.pagedjs_pages {
width: 100%;
}
.pagedjs_page {
margin: auto;
background-color: #ffffff;
margin: calc(var(--margin) * 4) var(--margin);
box-shadow: 0 0 0 1px #999;
}
body {
background: #eee;
font-size: 0.8em;
}
h2 {
background: #ccc;
margin: 0.8em 0;
column-span: all;
margin-top: 1em;
margin-bottom: 1em;
text-transform: uppercase;
}
.column-break {
color: red;
}
p {
margin: 0;
hyphens: auto;
text-align: justify;
}
p+p {
text-indent: 1em;
}
.column-break {
break-before: column;
}
.three-columns {
column-count: 3;
column-gap: 3ch;
column-rule: 1px solid red;
}
</style>
<script>
class moveBreakBeforeColumn extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
onOverflow(overflow, rendered, bounds) {
if (rendered.querySelectorAll(`[data-break-before="column"]`)) {
rendered.querySelectorAll(`[data-break-before="column"]`).forEach(breakBefore => {
// calcul the break before location. if it’s not on top of the element, add a margin-top accordingly.
let limits = breakBefore.getBoundingClientRect();
let pageLimits = breakBefore.closest('.pagedjs_page_content').getBoundingClientRect();
if (limits.left != pageLimits.left) {
// we divide by 2 because we add line to the previous columns.
breakBefore.style.marginTop = `${limits.bottom / 2 + limits.top / 2}px`;
}
})
}
}
}
Paged.registerHandlers(moveBreakBeforeColumn);
</script>
</head>
<body class="article">
<section class="three-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet. Etiam iaculis rispus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<h2>1 My first title </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet.</p>
<p class="column-break">break before always</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper tempus imperdiet. Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante.</p>
<h2>2 My second title goes margin-bottom box</h2>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<h2>3 My second title goes margin-bottom box</h2>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p class="column-break">break before always</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<h2>4 My second title goes margin-bottom box</h2>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<h2>5 My second title goes margin-bottom box</h2>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p class="column-break">break before always</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
<p>Etiam iaculis risus mi, at lacinia justo pulvinar eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis felis mattis, ornare nibh non, rhoncus ante. Nullam ac nisi est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis consequat diam ut bibendum. Donec eu turpis congue, cursus dui a, convallis mauris.</p>
</section>
</body>
</html>
\ No newline at end of file
......@@ -6,7 +6,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
</head>
<body>
......@@ -20,7 +23,9 @@
<li>how to RTL <a href="examples/rtl.html">right to left</a></li>
<li>how to create an interface to modify image/background-image crop and size <a href="examples/img-to-background-and-Tools.html">image/background-image</a></li>
<li>how to change a map, and get the values to reuse as css <a href="examples/map.html">thanks to leaflet</a></li>
</ul>
<li>how to make column break work in a multicol book <a href="examples/column-break.html">by adding margins on the fly</a></li>
</ul>
</body>
</html>
\ No newline at end of file
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