Commit c5380765 authored by julien's avatar julien

cross mark and trim

parent 76659db4
.paged-marks > div {
/* the offset is the location is the space between the crop mark and the page */
--offset: 2.11mm;
position: absolute;
background: transparent;
content: " ";
width: calc(var(--bleed) + 1px);
height: calc(var(--bleed) + 1px);
}
.paged_crop-tlv {
top: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
height: 10px;
}
.paged_crop-tlh {
left: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trv {
top: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
bottom: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
}
.paged_crop-blh {
left: calc(var(--offset) * -1);
bottom: 0;
border-top: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
bottom: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
bottom: 0;
right: calc(var(--offset) * -1);
border-top: 1px solid var(--cropmark-color);
}
\ No newline at end of file
.paged-marks > div {
/* the offset is the location is the space between the crop mark and the page */
--offset: 2.11mm;
position: absolute;
background: transparent;
content: " ";
width: calc(var(--bleed) + 1px);
height: calc(var(--bleed) + 1px);
}
.paged_crop-tlv {
top: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
height: 10px;
}
.paged_crop-tlh {
left: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trv {
top: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
bottom: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
}
.paged_crop-blh {
left: calc(var(--offset) * -1);
bottom: 0;
border-top: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
bottom: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
bottom: 0;
right: calc(var(--offset) * -1);
border-top: 1px solid var(--cropmark-color);
}
\ No newline at end of file
This diff is collapsed.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32.537px" height="32.537px" viewBox="0.104 0.104 32.537 32.537" enable-background="new 0.104 0.104 32.537 32.537"
xml:space="preserve">
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M24.508,16.373
c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373z"/>
<path fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path d="M24.508,16.373c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="8.239" y1="16.373" x2="24.508" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="8.239" x2="16.373" y2="24.508"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32.537px" height="32.537px" viewBox="0.104 0.104 32.537 32.537" enable-background="new 0.104 0.104 32.537 32.537"
xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M24.508,16.373
c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373z"/>
<path fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path d="M24.508,16.373c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="8.239" y1="16.373" x2="24.508" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="8.239" x2="16.373" y2="24.508"/>
</svg>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-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"> -->
<style>
/* size can take calc in chromium */
:root {
}
@page {
size: calc(100mm + 1in) 400mm;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
</body>
</html>
\ No newline at end of file
......@@ -18,17 +18,32 @@
<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">
<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-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>
......@@ -103,7 +118,7 @@
</div>
</div>
</div>
<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="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="pagedjs_margin pagedjs_margin-top-left-corner">
<div class="pagedjs_margin-content"></div>
......
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta lang="en-US">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/interface.css" rel="stylesheet">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/main.css" rel="stylesheet">
</head>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<body>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
</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