Commit 2429ca8b authored by julien's avatar julien
Browse files

experimenting with spread and outer+inner margins for the bleeds

parent 2852de91
......@@ -7,23 +7,40 @@
--margin-bottom: 2cm;
--margin-left: 2cm;
--page-count: 0;
/* bleed and cropmarks */
/* amount of bleed */
--bleed: 5mm;
--bleed-outer: 5mm;
--bleed-top: 5mm;
--bleed-bottom: 5mm;
--bleed-inner: 5mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
--offset: 2.11mm;
/* cropmarks lengh */
--crop-length: 4mm;
/* trim size */
--trim: 15mm;
--trim-inner: 15mm;
--trim-outer: 15mm;
--trim-top: 15mm;
--trim-bottom: 15mm;
/* if we want to have inner and outer margin */
--margin-inner: 2cm;
--margin-outer: 2cm;
}
/* correct calculation for the @page */
/* @page width = width + bleed + bledd + trim + trim */
/* @page height = height + bleed + bledd + trim + trim */
/* @page width = width + bleed-inner + bleed-outer + trim-inner + trim-outter */
/* @page height = height + bleed-top + bleed-bottom + trim-top + trim-bottom */
@page {
......@@ -36,10 +53,24 @@
overflow: hidden;
position: relative;
display: grid;
width: calc(var(--width) + var(--bleed) + var(--bleed) + var(--trim) + var(--trim));
height: calc(var(--height) + var(--bleed) + var(--bleed) + var(--trim) + var(--trim));
grid-template-columns: [trim-left] var(--trim) [bleed-left] var(--bleed) [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right) [bleed-right] var(--bleed) [trim-right] var(--trim);
grid-template-rows: [trim-top] var(--trim) [bleed-top] var(--bleed) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed) [trim-bottom] var(--trim);
width: calc(var(--width) + var(--bleed-inner) + var(--bleed-outer) + var(--trim-inner) + var(--trim-outer));
height: calc(var(--height) + var(--bleed-top) + var(--bleed-bottom) + var(--trim-top) + var(--trim-bottom));
}
.pagedjs_right_page {
overflow: hidden;
grid-template-columns: [trim-left] var(--trim-inner) [bleed-left] var(--bleed-inner) [left] var(--margin-inner) [center] calc(var(--width) - var(--margin-inner) - var(--margin-outer)) [right] var(--margin-outer) [bleed-right] var(--bleed-outer) [trim-right] var(--trim-outer);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
}
.pagedjs_left_page {
overflow: hidden;
grid-template-columns: [trim-left] var(--trim-outer) [bleed-left] var(--bleed-outer) [left] var(--margin-outer) [center] calc(var(--width) - var(--margin-outer) - var(--margin-inner)) [right] var(--margin-inner) [bleed-right] var(--bleed-inner) [trim-right] var(--trim-inner);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
}
.pagedjs_page * {
......@@ -349,74 +380,77 @@ img {
position: absolute;
background: transparent;
content: " ";
border-right: 1px solid var(--cropmark-color);
z-index: 500000000;
}
.paged_crop-tlv {
left: calc(var(--bleed) + var(--trim));
top: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
.pagedjs_right_page .paged_crop-tlv {
left: calc(var(--bleed-inner) + var(--trim-inner));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
height: var(--crop-length);
width: 1px;
}
.paged_crop-trv {
right: calc(var(--bleed) + var(--trim));
top: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
.pagedjs_right_page .paged_crop-trv {
right: calc(var(--bleed-outer) + var(--trim-outer));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-tlh {
left: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
top: calc(var(--bleed) + var(--trim));
.pagedjs_right_page .paged_crop-tlh {
left: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
top: calc(var(--bleed) + var(--trim));
.pagedjs_right_page .paged_crop-trh {
right: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
left: calc(var(--bleed) + var(--trim));
bottom: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
.pagedjs_right_page .paged_crop-blv {
left: calc(var(--bleed-inner) + var(--trim-inner));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
height: var(--crop-length);
width: 1px;
}
.paged_crop-blh {
left: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed) + var(--trim));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
right: calc(var(--bleed) + var(--trim));
bottom: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
.pagedjs_right_page .paged_crop-brv {
right: calc(var(--bleed-outer) + var(--trim-outer));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
right: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed) + var(--trim));
.pagedjs_right_page .paged_crop-blh {
left: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-brh {
right: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
......@@ -437,39 +471,138 @@ img {
.paged-marks-cross div {
position: absolute;
display: block;
z-index: 60000000000000000000;
/* background: black; */
}
.paged_cross-top {
background: green;
width: calc( var(--width) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
height: calc(var(--trim) + var(--bleed));
/* cross */
.pagedjs_right_page .paged_cross-top {
width: calc( var(--width) + var(--bleed-inner) + var(--bleed-outer) + (var(--trim-inner) + var(--trim-outer)));
height: calc(var(--trim-top) + var(--bleed-top));
left:0;
top: 0;
}
.pagedjs_right_page .paged_cross-bottom {
width: calc( var(--width) + var(--bleed-inner) + var(--bleed-outer) + (var(--trim-inner) + var(--trim-outer)));
height: calc(var(--trim-bottom) + var(--bleed-bottom));
left:0;
bottom: 0;
.paged_cross-bottom {
background: red;
width: calc( var(--width) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
height: calc(var(--trim) + var(--bleed));
}
.pagedjs_right_page .paged_cross-left {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
width: calc(var(--trim-outer) + var(--bleed-outer));
left:0;
bottom: 0;
}
.pagedjs_right_page .paged_cross-right {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
right: 0;
width: calc(var(--trim-inner) + var(--bleed-inner));
}
.paged_cross-right {
background: yellow;
height: calc( var(--height) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
width: calc(var(--trim) + var(--bleed));
/* leftpage crop marks */
.pagedjs_left_page .paged_crop-tlv {
left: calc(var(--bleed-outer) + var(--trim-outer));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
height: var(--crop-length);
width: 1px;
}
.pagedjs_left_page .paged_crop-trv {
right: calc(var(--bleed-inner) + var(--trim-inner));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-tlh {
left: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-trh {
right: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-blv {
left: calc(var(--bleed-outer) + var(--trim-outer));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
height: var(--crop-length);
width: 1px;
}
.pagedjs_left_page .paged_crop-brv {
right: calc(var(--bleed-inner) + var(--trim-inner));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-blh {
left: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-brh {
right: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
/* cross */
.pagedjs_left_page .paged_cross-top {
width: calc( var(--width) + var(--bleed-outer) + var(--bleed-inner) + (var(--trim-outer) + var(--trim-inner)));
height: calc(var(--trim-top) + var(--bleed-top));
left:0;
bottom: 0;
top: 0;
}
.pagedjs_left_page .paged_cross-bottom {
width: calc( var(--width) + var(--bleed-outer) + var(--bleed-inner) + (var(--trim-outer) + var(--trim-inner)));
height: calc(var(--trim-bottom) + var(--bleed-bottom));
left:0;
bottom: 0;
.paged_cross-left {
background: orange;
height: calc( var(--height) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
}
.pagedjs_left_page .paged_cross-left {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
width: calc(var(--trim-inner) + var(--bleed-inner));
left:0;
bottom: 0;
}
.pagedjs_left_page .paged_cross-right {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
right: 0;
width: calc(var(--trim) + var(--bleed));
width: calc(var(--trim-outer) + var(--bleed-outer));
}
:root {
/* color for the interface */
--color-background: white;
--color-marginBox: red;
--color-pageBox: transparent;
--color-paper: white;
--color-baseline: cyan;
--margin-interface: 300px;
/* list variables */
--font-size: 12px;
--font-lineHeight: 16px;
/* test bleed */
/* --bleed: 0in; */
/* color for the interface */
--color-background: white;
--color-marginBox: red;
/* --color-pageBox: grey; */
--color-paper: white;
--color-baseline: cyan;
--margin-interface: 20px;
/* list variables */
--font-size: 12px;
--font-lineHeight: 16px;
/* test bleed */
/* --bleed: 0in; */
}
@media print {
--color-marginBox: transparent;
--color-marginBox: transparent;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: var(--maring-interface);
}
.pagedjs_first_page {
margin-left: var(--width);
}
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment for recto/verso book.
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
max-width: calc((var(--width) + var(--trim-inner) + var(--trim-outer) + var(--bleed-inner) + var(--bleed-outer)) * 2 + 20px);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 2em;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: var(--margin-interface);
}
.pagedjs_first_page {
margin-left: calc((var(--width) + var(--trim-inner) + var(--trim-outer) + var(--bleed-inner) + var(--bleed-outer)));
}
.pagedjs_page {
width: calc(var(--width) + var(--bleed-inner) + var(--bleed-outer) + var(--trim-inner) + var(--trim-outer));
height: calc(var(--height) + var(--bleed-top) + var(--bleed-bottom) + var(--trim-top) + var(--trim-bottom));
}
/* show the margin-box */
.pagedjs_margin-content {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* for recto/verso book.
--------------------------------------------------- */
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
/*comment this for recto/verso */
.pagedjs_pages {
--bleed-inner: 0px;
--trim-inner: 0px;
--trim-outer: 0px;
--trim-top: 0px;
--trim-bottom: 0px;
}
.paged-marks-cross {
display: none;
}
/* uncomment this */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}*/
}
/* to see margins */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-left,
.pagedjs_margin-right,
.pagedjs_margin-top {
background: rgba(0,0,0,0);
.pagedjs_margin-top-left-corner-holder, .pagedjs_margin-top-right-corner-holder, .pagedjs_margin-bottom-left-corner-holder, .pagedjs_margin-bottom-right-corner-holder, .pagedjs_margin-bottom, .pagedjs_margin-left, .pagedjs_margin-right, .pagedjs_margin-top {
background: rgba(0, 0, 0, 0);
}
.pagedjs_page {
background: rgba(0,0,0,0);
.pagedjs_page {
background: rgba(0, 0, 0, 0);
}
.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
background: repeating-linear-gradient(transparent 0, transparent 50%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: repeating-linear-gradient(transparent 0, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
background-size: 100% 36px;
}
}
\ No newline at end of file
img {
/* fullsize-image */
position: absolute;
top: -94px;
left: -94px;
top: calc((var(--bleed-top) + var(--margin-top)) * -1);
left: calc((var(--bleed-inner) + var(--margin-inner)) * -1);
right: calc((var(--bleed-outer) + var(--margin-outer)) * -1);
bottom: calc((var(--bleed-bottom) + var(--margin-bottom)) * -1);
z-index: -1;
width: calc(var(--width) + var(--bleed) + var(--bleed));
height: calc(var(--width) + var(--bleed) + var(--bleed));
object-fit: cover;
opacity: 0.4;
}
\ No newline at end of file
......@@ -6,8 +6,8 @@
<meta lang="en-US">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/interface.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/bleeds.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<style>
/* html {
......@@ -128,6 +128,7 @@
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover">
<img src="https://source.unsplash.com/random" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
......@@ -136,8 +137,7 @@
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
-->
</section>
</div>
</div>
......@@ -245,7 +245,121 @@
</div>
</div>
</div>
<div class="pagedjs_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
<div class="paged-marks-crop">
<div class="paged_crop-tlv"></div>
<div class="paged_crop-tlh"></div>
<div class="paged_crop-blv"></div>
<div class="paged_crop-blh"></div>
<div class="paged_crop-trv"></div>
<div class="paged_crop-trh"></div>
<div class="paged_crop-brv"></div>
<div class="paged_crop-brh"></div>
</div>
<div class="paged-marks-cross">
<div class="paged_cross-top">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-bottom">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-left">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-right">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
</div>
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-top-center">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-top-right">