Skip to content

E
experiments
Commit d5f62064 authored by julien's avatar julien
Browse files
Options

bleeds and cropmarks, chromium printing bug

parent c5380765
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 55 deletions
bleeds/css/bleeds.css
View file @ d5f62064
:root {
--width: 210mm;
--height: 297mm;
--margin-top: 1.5cm;
--margin-right: 1cm;
--margin-bottom: 3cm;
--width: 100mm;
/* --height: 168mm; */
--height: 140mm;
--margin-top: 2cm;
--margin-right: 2cm;
--margin-bottom: 2cm;
--margin-left: 2cm;
--page-count: 0;
/* bleed and cropmarks */
/* amount of bleed */
--bleed: 3mm;
--bleed: 1mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
--offset: 2.11mm;
/* cropmarks lengh */
--crop-length: 3in;
/* override cropmarks */
--bleed: 6mm;
--cropmark-color: white;
--offset: 3mm;
--crop-length: 5mm;
--trim: 5mm;
/* --cross-color: black; */
}
--crop-length: 4mm;
/* trim size */
--trim: 15mm;
}
@page {
size: 210mm 297mm;
margin: 0;
size: 100mm 140mm;
/* margin: 0; */
}
.pagedjs_page {
box-sizing: border-box;
overflow: hidden;
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);
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);
}
......@@ -309,6 +307,7 @@ img {
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
min-width: 100%;
......@@ -322,15 +321,17 @@ img {
transform: none !important;
height: 100% !important;
min-height: 100%;
max-height: 100%;
max-height: 100%;
overflow: visible;
margin: 0;
padding: 0;
}
.pagedjs_page {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100% !important;
min-height: 100%;
height: 100% !important;
page-break-after: always;
break-after: page;
}
......@@ -340,7 +341,7 @@ img {
/* crop marks are added to the page content as it wouldn't */
.paged-marks-crop>div {
.paged-marks-crop > div {
/* the offset is the location is the space between the crop mark and the page */
position: absolute;
background: transparent;
......@@ -427,7 +428,7 @@ img {
background: url(../img/Common_Registration_MarkClean.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 25px;
background-size: 20px;
}
.paged-marks-cross div {
......@@ -439,7 +440,7 @@ img {
.paged_cross-top {
background: green;
width: calc( var(--width) + (var(--bleed) * 2) + (var(--trim) * 2));
width: calc( var(--width) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
height: calc(var(--trim) + var(--bleed));
left:0;
top: 0;
......@@ -447,7 +448,7 @@ img {
.paged_cross-bottom {
background: red;
width: calc( var(--width) + (var(--bleed) * 2) + (var(--trim) * 2));
width: calc( var(--width) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
height: calc(var(--trim) + var(--bleed));
left:0;
bottom: 0;
......@@ -456,16 +457,15 @@ img {
.paged_cross-right {
background: yellow;
height: calc( var(--height) + (var(--bleed) * 2) + (var(--trim) * 2));
height: calc( var(--height) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
width: calc(var(--trim) + var(--bleed));
left:0;
bottom: 0;
}
.paged_cross-left {
background: orange;
height: calc( var(--height) + (var(--bleed) * 2) + (var(--trim) * 2));
height: calc( var(--height) + var(--bleed) + var(--bleed) + (var(--trim) + var(--trim)));
right: 0;
width: calc(var(--trim) + var(--bleed));
......
bleeds/css/interface.css
View file @ d5f62064
......@@ -87,11 +87,11 @@
.pagedjs_margin-left,
.pagedjs_margin-right,
.pagedjs_margin-top {
background: lightgray;
background: rgba(0,0,0,0.2);
}
.pagedjs_page {
background: gray;
background: rgba(0,0,0,0.2);
}
.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
......
bleeds/css/main.css
View file @ d5f62064
/*
@page {
size: 150mm 210mm;
margin: 2cm 1.8cm 4cm 3cm;
......@@ -8,7 +8,7 @@
.page {
--bleed: 6mm;
}
} */
/* :root {
......
bleeds/js/bleeds.js deleted 100644 → 0
View file @ c5380765
const pageHeight = window.getComputedStyle(document.body).getPropertyValue('--height');
const pagedWidth = window.getComputedStyle(document.body).getPropertyValue('--width');
const pagedBleed = window.getComputedStyle(document.body).getPropertyValue('--bleed');
const pagedPages = document.querySelectorAll('.pagedjs_page');
pagedPages.forEach(page => {
// get the properties for the margin for the page
const pagedMarginTop = window.getComputedStyle(page).getPropertyValue('--margin-top');
page.style.setProperty('--margin-top', 'calc var(--margin-top) + var(--bleed) + var(--bleed));')
const pagedMarginBottom = window.getComputedStyle(page).getPropertyValue('--margin-bottom');
const pagedMarginLeft = window.getComputedStyle(page).getPropertyValue('--margin-left');
const pagedMarginRight = window.getComputedStyle(page).getPropertyValue('--margin-right');
})
bleeds/static.html
View file @ d5f62064
......@@ -8,14 +8,26 @@
<link href="css/interface.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/bleeds.css" rel="stylesheet">
</head>
<style>
html {
font-size: 12px;
line-height: 16px;
}
p {
margin-top: 4px;
line-height: 18px;
}
</style>
</head>
<!-- <script src="js/paged.polyfill.js"></script> -->
<body>
<div class="pagedjs_pages">
<div class="pagedjs_page pagedjs_first_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
<div class="paged-marks-crop">
......@@ -113,13 +125,49 @@
<div class="pagedjs_page_content" style="column-width: 250px; column-gap: calc(var(--margin-right) + var(--margin-left));">
<div>
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover"> </section>
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover">
<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>
<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>
</section>
</div>
</div>
</div>
</div>
<div class="pagedjs_page pagedjs_left_page pagedjs_named_page pagedjs_cover_page" data-page-number="1">
<div class="pagedjs_margin-top-left-corner-holder">
<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>
......@@ -187,8 +235,11 @@
<div class="pagedjs_page_content" style="column-width: 250px; column-gap: calc(var(--margin-right) + var(--margin-left));">
<div>
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover"> </section>
</div>
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover">
<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>
</div>
</div>
......
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