Commit 910c32fb authored by alexandre's avatar alexandre

bump

parent d1e7a7c4
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.
Why using this instead of libraries such as the PHP library tcpdf which
transforms html to a PDF for 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. Why using this
instead of libraries such as the PHP library tcpdf which transforms html to a
PDF for print?
Because CSS specifications for print are all settled, we are just waiting for browsers vendors to
implement them in browsers. Meanwhile, it's already possible to send to an
offset printer a file generated from a webpage. So why use a third party
engine if you want to print HTML?
Because CSS specifications for print are all settled, we are just waiting for
browsers vendors to implement them in browsers. Meanwhile, it's already
possible to send to an offset printer a file generated from a webpage. So why
use a third party engine if you want to print HTML?
But the most exciting reason to use HTML/CSS is the fact that you
can go back and forth between code and visual manipulation thanks to the
element inspector of browsers. With Javascript on top of it, you can
access every object in the DOM and its properties or do
programmatic manipulations.
But the most exciting reason to use HTML/CSS is the fact that you can go back
and forth between code and visual manipulation thanks to the element inspector
of browsers. With Javascript on top of it, you can access every object in the
DOM and its properties or do programmatic manipulations.
Features
......@@ -88,7 +88,7 @@ First launch
We use CSS regions to make text flow into different divs (just like a print
layout software). As it is not fully implemented yet, you need to use a
webkit-based browser and activate the «experimental web platform features».
webkit-based browser and activate the «experimental web platform features».
To do so, you can visit the URL:
chrome://flags/#enable-experimental-web-platform-features
......@@ -102,8 +102,8 @@ Development
### Local micro-server
You can't use less.js on a local file (URL starting with "file:///").
To bypass this limitation, you can run a simple webserver with python.
You can't use less.js on a local file (URL starting with "file:///").
To bypass this limitation, you can run a simple webserver with python.
To do so:
- Open a terminal.
......@@ -119,13 +119,13 @@ Needed files
------------
- lib directory
- index.html
- index.html
- change title to change pdf name
- section for crops
- sections header, page, footer
- interface : preview to switch between hi and low res, toc to go to a specific page
- container : where jquery will put content.html
- content.html : filled from etherpad with a curl in a terminal like
- container : where jquery will put content.html
- content.html : filled from etherpad with a curl in a terminal like
curl http://osp.kitchen:9999/p/variable_publication/export/txt >| content.html
- print.js
- print.less
......@@ -135,3 +135,6 @@ Needed files
- colorSeparation: utilities to trasform a PDF from RGB to CMYK + an HTML page to preview the color layers
- iceberg : internal use
- img : for test
vim: ft=markdown :
// FIXME: à quoi ça sert? → à ne pas avoir de page blanche entre chaque page
#pages {
position: absolute;
top: 0;
/*z-index: -1000;*/
width: 100%;
}
.paper {
width: @page-width-crop;
height: @page-height-crop;
position: relative;
/*z-index: -10;*/
counter-increment: page-counter;
/* utile ou non? pour éviter qu'un papier soit coupé par le format de la
* page lors de la conversion et l'arrondis des unités */
page-break-inside: avoid;
page-break-after: always;
overflow: hidden;
/*centrer la page à l'écran */
/*TODO: move in @screen*/
margin: 0 auto;
/*TODO: move in @screen*/
/*TODO: couleur du papier (non imprimable)*/
background-color: white;
/*outline: 1px solid lightgray;*/
/*box-shadow: 2px 2px 1px 1px lightgray;*/
/* Crop marks */
padding: @crop;
background-image:
linear-gradient(90deg, red @crop-length, red @crop-bleed, transparent @crop-bleed),
linear-gradient(0deg, transparent @crop-bleed, red @crop-bleed, red @crop-length),
linear-gradient(90deg, transparent @crop-bleed, red @crop-bleed, red @crop-length),
linear-gradient(0deg, transparent @crop-bleed, red @crop-bleed, red @crop-length),
linear-gradient(90deg, transparent @crop-bleed, red @crop-bleed, red @crop-length),
linear-gradient(0deg, red @crop-bleed, red @crop-length, transparent @crop-length),
linear-gradient(90deg, red @crop-length, red @crop-bleed, transparent @crop-bleed),
linear-gradient(0deg, red @crop-bleed, red @crop-length, transparent @crop-length)
;
background-size:
@crop 1px,
1px @crop,
@crop 1px,
1px @crop,
@crop 1px,
1px @crop,
@crop 1px,
1px @crop
;
background-position:
left @crop,
@crop top,
right @crop,
right @crop top,
right bottom @crop,
right @crop bottom,
left bottom @crop,
@crop bottom
;
background-repeat: no-repeat;
}
.page {
width: 100%;
height: 100%;
position: relative;
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
html.spread {
.paper {
float: left;
&:nth-child(odd) {
margin-left: -@crop * 2;
left: -1px;
}
&:first-child {
margin-left: @page-width !important;
}
}
}
/* Alex */
@media screen {
.page {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
}
.paper {
margin-bottom: 1em;
}
}
@media print {
html {
width: @page-width-crop;
}
}
html {
/*width: @page-width-crop;*/
/*position: absolute;*/
background-color: white;
}
body {
/*position: absolute;*/
}
@spread: @page-width * 2;
@crop: @crop-length + @crop-bleed; // Based on Scribus cropmarks with 5mm of bleed -> 7mm of marks + 5mm of bleed
@page-width-crop: @page-width + ( @crop * 2 ); // TODO: @paper-width
@page-height-crop: @page-height + ( @crop * 2 ); // TODO: @paper-height
This diff is collapsed.
HTML to print
=============
This is an example document to test different layout features to design printed
documents with HTML/CSS/Javascript.
[Clone the repository](http://osp.constantvzw.org/tools/html2print/).
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.
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.
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.
Test of image resolution
------------------------
![](img/collaborative-plotting.png){: data-alt-src="img/collaborative-plotting.png" }
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.
I'm a heading and I don't want to be alone. {: .region-break }
--------------------------------------------------------------
[Let's see what's next.](#come-here)
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.
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.
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.
![](img/collaborative-plotting.png)
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.
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.
<div class="region-break"></div>
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.
I'm a heading and I want to be linked. {: .region-break }
---------------------------------------------------------
![](img/collaborative-plotting.png)
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.
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.
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.
![](img/collaborative-plotting.png)
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.
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.
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.
/* __________________________________ DEBUG __________________________________ */
html.debug {
outline: 1pt solid purple;
body {
outline: 1pt solid pink;
}
.page {
outline: 1pt solid blue;
border: 1px solid red;
}
section.header {
outline: 1pt solid pink;
}
section.body {
outline: 1pt solid purple;
}
section.footer {
outline: 1pt solid pink;
}
#story {
outline: 1pt solid green;
}
.region-break {
border-top: 1pt dashed blue;
}
.moveable {
outline: 1pt solid yellow;
}
}
<!DOCTYPE HTML>
<html class="">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>HTML to Print Boilerplate</title>
<link rel="stylesheet" type="text/css" href="lib/reset.css" />
<link rel="stylesheet" href="print.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="main.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
</head>
<body>
......@@ -26,9 +26,9 @@
</div>
<div id="interface">
<button id="debug" class="button" href="#">Debug</button>
<button id="spread" class="button" href="#">Spread</button>
<button id="hi-res" class="button" href="#">Hi-res</button>
<button id="debug" class="button">Debug</button>
<button id="spread" class="button">Spread</button>
<button id="hi-res" class="button">Hi-res</button>
<div id="toc">
<button id="goto" class="button" href="#">Go to</button>
<ul id="toc-pages"></ul>
......
/* __________________________________ LOCAL SETTINGS __________________________________ */
@header-height: 10mm;
@header-text: "HTML to Print Boilerplate";
@footer-height: 10mm;
@footer-text: counter(page-counter);
/* __________________________________ HEADER __________________________________ */
section.header {
/*position: absolute;*/
/*margin-top: @page-margin-top;*/
top: 0;
margin: 0;
padding-top: @page-margin-top;
width: 100%;
height: @header-height;
text-align: left;
&:after {
content: @header-text;
}
}
/* __________________________________ MAIN SECTION __________________________________ */
.body {
height: @page-height - @header-height - @footer-height;
width: @page-width;
/*margin: @crop;*/
margin-bottom: @page-margin-bottom;
padding-top: @page-margin-top + @header-height;
padding-bottom: @page-margin-bottom;
-webkit-flow-from: myFlow;
position: absolute;
}
#story {
-webkit-flow-into: myFlow;
}
/* __________________________________ FOOTER __________________________________ */
section.footer {
position: absolute;
bottom: 0;
margin: 0;
margin-top: @footer-height;
margin-bottom: @page-margin-bottom;
width: 100%;
height: @footer-height;
text-align: center;
&:after {
content: @footer-text;
}
}
.paper {
&:nth-child(odd) .header {
text-align: right;
}
&:nth-child(odd) .header,
&:nth-child(odd) .body,
&:nth-child(odd) .footer {
padding-left: @page-margin-inside;
padding-right: @page-margin-outside;
}
&:nth-child(even) .header,
&:nth-child(even) .body,
&:nth-child(even) .footer {
padding-left: @page-margin-outside;
padding-right: @page-margin-inside;
}
}
@import "variables.less";
@import "computed.less";
@import "debug.less";
@import "canvas.less";
@import "ui.less";
@import "misc.less";
@import "layout.less";
@import "type.less";
@import "print.less";
/* __________________________________ ABSOLUTE POSITIONNED OBJECTS __________________________________ */
/* Adding .moveable class to an object makes it absolutely positionned on the page.
* You can then move it around and resize it.
* Copy its properties (i.e. "top: 22pt; left: 101pt; width: 212pt; height: 244pt;).
* Paste those properties back to the object's "style" attribute.
*/
.moveable {
position: absolute;
float: left;
overflow: hidden;
&:hover {
z-index: 1000;
}
}
.moveable .properties {
display: none;
}
.moveable:hover .properties {
display: block;
}
/* POPELT STYLES */
.noscroll {overflow:hidden;}
.pop-screen {
background:#000;
opacity:0.9;
position:fixed;
left:0; top:0; right:0; bottom:0;
z-index:9994;
display:none;
}
.pop-wrap {position:fixed; left:0;right:0;top:0;bottom:0; z-index:9995; overflow:auto; display:none; }
.pop-container {margin:40pt auto; display:block; width: 50% !important; background:white; position:relative;}
.pop-block {
position:relative;
padding: 1em;
}
.pop-content {padding:20pt; color:#333; word-wrap:break-word; overflow:auto;
outline: 2pt solid black;
margin: 1em;
font-family: monospace;
font-size: 2em;
}
.pop-content h1:first-child, .pop-content h2:first-child, .pop-content p:first-child {margin-top:0;}
.pop-action-block {background:#eee; padding:15pt 20pt; border-top:1pt solid #ccc; text-align:right;}
.pop-title {margin:0; padding:20pt; padding-bottom:0; font-size:26pt; font-weight:bold; line-height:28pt; margin-bottom:0; font-family: sans-serif;}
.pop-btn-close {
position:absolute;
right:0pt; top:0pt;
width:30pt; height:30pt;
font-family:sans-serif;
font-size:28pt;
line-height:31pt;
text-align:center;
cursor:pointer;
&:hover {
color: red;
}
}
/* __________________________________ IMAGES __________________________________ */
/* Use those classes for images to fit width or height of parent elements or both. */
img.fit-height {
height: 100%;
}
img.fit-width {
width: 100%;
}
......@@ -19,10 +19,10 @@ $(window).load(function(){
//$(this).toggleClass("button-active");
//$("html").toggleClass("spread");
$(this).toggleClass("button-active");
$("html").toggleClass("spread");
/* TODO: switch to CSS */
w = parseInt($(".paper:first-child").css("width")) * 2;
$("html").css("width", w + "px");
});
......
This diff is collapsed.
body { font-size:85%; line-height:1.25; }
h1, h2, h3 { margin-top:0; margin-bottom:0; }
h1 { font-size:1.5em; padding:1.45833em 0; }
h2 { font-size:1.33333em; padding:1.25em 0; }
h3 { font-size:1.16667em; padding:1.51786em 0; }
img { max-width: 100%; }
/* __________________________________ INTERFACE CLASSES __________________________________ */
@media print {
.button,
#interface {
display: none;
}
}
.button {
z-index: 1000;
background-color: black;
font-family:sans-serif;
text-transform: uppercase;
font-size: 9pt !important;
letter-spacing: 1pt;
color: white;
margin: 0;
padding: 5pt 7pt;
cursor: pointer;
border: 0;
&:hover {
background-color: white;
color: black;
outline: 1pt solid black;
}
}
.button-active {
background-color: white;
color: black;
outline: 1pt solid black;
}
.lo-res {
outline: 10px solid red;
}
div#interface {
font-family:sans-serif;
text-transform: uppercase;
font-size: 10pt !important;
line-height: 14pt;
letter-spacing: 1pt;
position: fixed;
bottom: 10pt;
right: 10pt;
a {
text-decoration: none;
position: static;
}
div#toc {
display: inline-block;
ul#toc-pages {
padding: 0.5em 0;
display: none;
background-color: black;
position: absolute;
right: 0;
bottom: 2em;
height: 200pt;
width: 80pt;
overflow: auto;
a {
padding: 0 1em;
color: white;
&:hover {
background-color: white;
color: black;
}
}
}
button {
width: 80pt;
}
}
}
/* ______________________________ USER DEFINED VARIABLES ______________________________ */
@page-width: 148.5mm;
@page-height: 210mm;
@crop-length: 7mm; // @crop-size
@crop-bleed: 5mm; // @bleed
// FIXME: make a case for single page layouts
@page-margin-inside: 20mm;
@page-margin-outside: 10mm;
@page-margin-top: 10mm;
@page-margin-bottom: 15mm;
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