Commit 1eb8516a authored by svilayphiou's avatar svilayphiou

Start of the boilerplate in a TGV, back to its roots.

Nota: less CSS does not work in Chrome on local files.
parents
HTML 2 print
============
This little tool is a boilerplate, a minimal example to start a print project using HTML, less/CSS and Javascript/Jquery to design it.
<!DOCTYPE HTML>
<html class="debug">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML to Print Boilerplate</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" href="print.less" type="text/less" media="all" charset="utf-8">
</head>
<body>
<!-- PRINT MARKS -->
<div id="print-marks">
<div id="master-page" class="preview-page">
<img src="page-height.png" />
<div class="crop-top-left">
<div class="crop-right" style="top: 0; right: 0;"></div>
<div class="crop-bottom" style="bottom: 0cm; left: 0;"></div>
</div>
<div class="crop-top-right">
<div class="crop-left" style="top: 0; left: 0;"></div>
<div class="crop-bottom" style="bottom: 0; right: 0;"></div>
</div>
<div class="crop-bottom-right">
<div class="crop-left" style="left: 0; bottom: 0;"></div>
<div class="crop-top" style="right: 0cm; top: 0;"></div>
</div>
<div class="crop-bottom-left">
<div class="crop-right" style="bottom: 0cm; right: 0;"></div>
<div class="crop-top" style="left: 0cm; top: 0"></div>
</div>
<div class="folio">
</div>
</div>
</div>
<div id="content">
<p>
splinter fields is an initiative of brussels based organizations active within the fields of technological and media arts (constant, foam, nadine and okno) to foster collaborative, agile and flexible learning. the programme of workshops, study-groups and field-tests is open to artists, designers, technologists and other generalists curious to explore tools and mindware for experiments in contemporary culture and daily life.
</p>
<p>
undertype was originally built as an educationnal platform to make apparent the processes that a typesetting engine may go through. it was purposely rudimentary and bare. for todays purpose, pierre built a version that allows for copying and pasting functions. we may take these abilities for granted, but they didn't necessarely fit in the original idea of the program. undertype imitates a linotype machine as is sets slugs of text line by line and one by one. reenacting digitally what these machines did with masters and hot lead.
</p>
<p>
the imagined workflow will be to use both laidout and undertype: undertype will be the tool to set the text in sections. this combination came about as laidout does not enable text setting functions. outputted pdf files from undertype will be rasterised and imported into laidout as images (the idea from the beggining is to print the flyers on a risograph machine) then images, logos, etc will be laidout in laidout.
</p>
<img style="width: 100%;" src="collaborative-plotting.png" />
<p>
splinter fields is an initiative of brussels based organizations active within the fields of technological and media arts (constant, foam, nadine and okno) to foster collaborative, agile and flexible learning. the programme of workshops, study-groups and field-tests is open to artists, designers, technologists and other generalists curious to explore tools and mindware for experiments in contemporary culture and daily life.
</p>
<p>
undertype was originally built as an educationnal platform to make apparent the processes that a typesetting engine may go through. it was purposely rudimentary and bare. for todays purpose, pierre built a version that allows for copying and pasting functions. we may take these abilities for granted, but they didn't necessarely fit in the original idea of the program. undertype imitates a linotype machine as is sets slugs of text line by line and one by one. reenacting digitally what these machines did with masters and hot lead.
</p>
<p>
the imagined workflow will be to use both laidout and undertype: undertype will be the tool to set the text in sections. this combination came about as laidout does not enable text setting functions. outputted pdf files from undertype will be rasterised and imported into laidout as images (the idea from the beggining is to print the flyers on a risograph machine) then images, logos, etc will be laidout in laidout.
</p>
<img style="width: 100%;" src="collaborative-plotting.png" />
<p>
splinter fields is an initiative of brussels based organizations active within the fields of technological and media arts (constant, foam, nadine and okno) to foster collaborative, agile and flexible learning. the programme of workshops, study-groups and field-tests is open to artists, designers, technologists and other generalists curious to explore tools and mindware for experiments in contemporary culture and daily life.
</p>
<p>
undertype was originally built as an educationnal platform to make apparent the processes that a typesetting engine may go through. it was purposely rudimentary and bare. for todays purpose, pierre built a version that allows for copying and pasting functions. we may take these abilities for granted, but they didn't necessarely fit in the original idea of the program. undertype imitates a linotype machine as is sets slugs of text line by line and one by one. reenacting digitally what these machines did with masters and hot lead.
</p>
<p>
the imagined workflow will be to use both laidout and undertype: undertype will be the tool to set the text in sections. this combination came about as laidout does not enable text setting functions. outputted pdf files from undertype will be rasterised and imported into laidout as images (the idea from the beggining is to print the flyers on a risograph machine) then images, logos, etc will be laidout in laidout.
</p>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="less-1.3.0.min.js"></script>
<script type="text/javascript" src="print.js"></script>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
// __________________________________ PRINT MARKS __________________________________ //
doc_height = $("body").height();
page_height = $("#master-page").height();
//page_height = 22;
nb_page = Math.ceil(doc_height/page_height) + 4;
//gutter = parseInt($("#fakepage").css("top")); // = 1cm
for (i = 0; i <= nb_page; i++){
$("#master-page").clone().css({'outline-offset': '-1cm', 'display': 'block'}).attr("id","page"+i).insertBefore($("#master-page"));
// FOLIO
//$("#fakepage-p" + i + " .folio").html("<p>page " + (i+1) + "</p>");
}
/* __________________________________ DEBUG __________________________________ */
html.debug {
outline: 1px solid blue;
}
html.debug body {
outline: 1px solid pink;
}
html.debug div.preview-page {
outline: 1px solid yellowgreen;
}
html.debug div#content {
outline: 1px solid red;
}
/* __________________________________ VARIABLES __________________________________ */
@crop-margin: 10mm;
/* __________________________________ PAGE SETTINGS __________________________________ */
* {
-webkit-print-color-adjust: exact; /* Allows printing of background colors */
box-sizing: border-box;
}
@page {
//size:148,50mm 210mm; // format coupé A5
size:168,50mm 230mm; // format A5 avec cropmarks
margin: 5mm;
}
html {
//width: 870.55px;
width: 148.5mm;
}
body {
}
/* __________________________________ PRINT MARKS __________________________________ */
div#print-marks {
position: absolute;
top: 0;
z-index: 1000;
width: 100%;
}
div.preview-page {
//position: absolute;
position: relative;
height: 1220px;
width: 926px;
z-index: -10;
}
/* __________________________________ CROP MARKS __________________________________ */
div.crop-top-left,
div.crop-top-right,
div.crop-bottom-right,
div.crop-bottom-left {
height: 10mm;
width: 10mm;
position: absolute;
/*box-sizing: border-box;*/
}
div.crop-top-left {
left: 0;
top: 0;
}
div.crop-top-right {
right: 0;
top: 0;
}
div.crop-bottom-right {
right: 0;
bottom: 0;
}
div.crop-bottom-left {
left: 0;
bottom: 0;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left {
width: 5mm;
height: 5mm;
position: absolute;
/*box-sizing: border-box;*/
}
div.crop-top {
border-top: 1px solid black;
}
div.crop-right {
border-right: 1px solid black;
}
div.crop-bottom {
border-bottom: 1px solid black;
}
div.crop-left {
border-left: 1px solid black;
}
/* __________________________________ PAGINATION __________________________________ */
div.folio {
position: absolute;
bottom: 20mm;
width: 100%;
text-align: center;
z-index: 1000;
}
/* __________________________________ CONTENT __________________________________ */
div#content {
margin-top: @crop-margin;
width: 100%;
padding-left: @crop-margin + 5mm;
padding-right: 5mm;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
\ 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