adding cropmarks and bleeds
So, i've been working on implementing a static option for cropmarks and bleed.
the css rules that we can use:
- bleed: to define the amound of bleed;
- marks (only
crops
suported right now);
I would argue that using --paged-cropmarks-length
, --paged-cropmarks-color
and --paged-cropmaks-offest
could also be useful.
The way it works:
- change in the based.js: the bleed is now part of the grid for pagedjs_page:
width: calc(var(--width) + var(--bleed) + var(--bleed));
height: calc(var(--height) + var(--bleed) + var(--bleed));
grid-template-columns: [bleed-left] var(--bleed) [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right) [bleed-left] var(--bleed);
grid-template-rows: [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);
and those new variables are the following:
/* bleed and cropmarks */
/* amount of bleed */
--bleed: 20mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
--offset: 2.11mm;
/* cropmarks lengh */
--crop-length: 3in;
In the HTML, we now have a new first child for each page:
<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">
<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>
<!-- rest of the content for the page -->
this css to set the position of the marks and bleeds:
.paged-marks>div {
/* the offset is the location is the space between the crop mark and the page */
position: absolute;
background: transparent;
content: " ";
}
.paged_crop-tlv {
left: calc(var(--bleed));
top: calc(var(--bleed) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
height: var(--crop-length);
width: 1px;
}
.paged_crop-trv {
right: calc(var(--bleed));
top: calc(var(--bleed) - 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(--offset) - var(--crop-length));
top: calc(var(--bleed));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--bleed) - var(--offset) - var(--crop-length));
top: calc(var(--bleed));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
left: calc(var(--bleed));
bottom: calc(var(--bleed) - 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(--offset) - var(--crop-length));
bottom: calc(var(--bleed));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
right: calc(var(--bleed));
bottom: calc(var(--bleed) - 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(--offset) - var(--crop-length));
bottom: calc(var(--bleed));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
Also, good news, chrome is now able to print page even when the size
property in the declaration is made of calc.:
@page {
size: calc(3mm + 6in + 3mm) calc(3mm + 9in + 3mm)
}
So we could rebuild the size without having to fight with the units.