Commit b7097add authored by svilayphiou's avatar svilayphiou
Browse files

gros merge avec design de la page d'Alex + la restructuration Alex et Colm

parents bc513257 1bc58f98
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.
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?
## Why using html to make printed matters?
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.
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. This back-and-forth
between hand and code manipulations is new to print production.
The second strong reason why we set this up is that because the design is made
with code/text, it means we can use collaborative text editors such as
Etherpad to design with several people at the same time.
## 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?
Features
--------
- Crop marks made in Javascript
- Pagination in CSS
- Crop marks made with CSS gradients
- Pagination in pure CSS
- Mixing flowable content and absolute positioned content
- Image fitting in frame
- View as spread (quite buggy still, see TODO)
- View as spread, and possibly as flatplan, and possibly building imposition
plans
- Preflight packages is built-in: use the "Save Complete Webpage" function of
your browser
- PDF conversion from RGB to CMYK
PDFutils
--------
See the repository PDFutils <<http://osp.kitchen/tools/PDFutils/>> for
pre-press tools such as:
- PDF conversion from RGB to CMYK via Ghostscript
- Check color separation
* * *
Anatomy of this repo
--------------------
The folder tries to present you with the minimum files at first: a couple of html files, a stylesheet, assets folder and this readme.
That is all you need to get started. Refer to the "Development" section to get your environment up and running.
#### • content.html
This is where you place your marked up content. The main index file contains all the lib calls and interface elements so clearing the content to this specific folder helps ease of use.
#### • main.less
The main stylesheet. In fact, it only reroutes to other `.less` partial files. It pulls different stylesheets which have different functions. This structure is up to you, but in our experience, fragmenting into several small stylesheets really helps the authoring experience.
#### • index.html
This is where it all happens. We pull toghether all the requirements, all the library elements, the content, and the stylesheets. This is the file you'll be looking at when you run your development environment.
#### • /assets
- `/lib/` → all that we need for interface elements, less processing, resetting browser attitudes, etc→
- `/js/` → interface element actions & attitudes, as well as general variable settings, namely, the amount of pages for your document.
- `/css/` → .less partials
#### • /iceberg/
Snapshots of the project, for OSP website previews!
How
---
......@@ -42,13 +82,14 @@ Example is based on an A5 format.
### Less
«Less is a CSS pre-processor, meaning that it extends the CSS language, adding
> «Less is a CSS pre-processor, meaning that it extends the CSS language, adding
features that allow variables, mixins, functions and many other techniques
that allow you to make CSS that is more maintainable, themable and
extendable.»
— http://lesscss.org/
> <footer><http://lesscss.org/></footer>
We use Less to easily change page dimensions, crop marks size.
We use Less to harness the power of variables to easily change page dimensions, crop marks size.
It is also generally a good idea to use a CSS preprocessor for your authoring experience. We use Less, but any of the SASS SCSS would work too.
### Javascript/Jquery
......@@ -88,7 +129,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 +143,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.
......@@ -114,24 +155,10 @@ To do so:
- Visit the URL "http://localhost:8000/"!
Resources
---------
- <http://alistapart.com/article/building-books-with-css3>
Needed files
------------
- lib directory
- 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
curl http://osp.kitchen:9999/p/variable_publication/export/txt >| content.html
- print.js
- print.less
### others :
- check : to test/compare
- 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 :
=============
| T O D O |
=============
- crop marks: higher page format
- add margins around pages on screen-only + background color
- choice to give a page number or to calculate it automatically
- Table of contents (Internal links works with anchors; use Jquery to make a
table of content / or use a jquery plugin to do so?)
- spot colors export in different PDFs with export class
- put objects on spreads (as a jquery plugin, it would duplicate the object on
the next page with an offset of "width and margin-left")
- css columns → doesn't print as columns, we have to do css regions instead.
can we make a javascript to do so? as it is much shorter to write it in css?
=================
| TO M E R G E |
=================
- moveable images inside pages
===============
| D E B U G |
===============
- when printing with .spread, javascript to remove the .spread class
- zooming in and out changes layout preview
==============================
| D O C U M E N T A T I O N |
==============================
- draw a schema to show the links between files
- produce pdf / images to show examples of the features list
- add links to jobs we did with the tool
- links to Balsamine interview http://osp.constantvzw.org:9999/p/balsa-docu
- add some testimonials as in Prince http://www.princexml.com/ ?
/**
* Computation
*/
/* the size of a 2 pages spread */
@spread: @page-width * 2;
/* the extra space around the page */
@crop: @crop-size + @bleed; // TODO: find a more appropriate name
/* geometry of the print sheet */
@paper-width: @page-width + ( @crop * 2 );
@paper-height: @page-height + ( @crop * 2 );
/**
* Definition of the page
*/
@page {
/* Support for `marks` is missing in every single web browser out there*/
size: @paper-width @paper-height; // format avec cropmarks
margin: 0;
}
/**
* Canvas
*/
@media all {
html {
background-color: white;
}
.paper {
width: @page-width;
height: @page-height;
/* Crop marks */
padding: @crop;
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;
}
.page {
width: @page-width;
height: @page-height;
position: relative;
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread .paper {
float: left;
}
.spread .paper:first-child {
margin-left: @paper-width - @crop !important;
}
.spread .paper:nth-child(odd) {
padding-left: 0;
}
.spread .paper:nth-child(even) {
padding-right: 0;
}
}
@media screen {
#pages {
width: @paper-width;
height: @paper-height;
margin-left: auto;
margin-right: auto;
}
.spread #pages {
width: @paper-width * 2;
height: @paper-height * 2;
}
.paper {
/* centrer la page à l'écran */
background-color: white;
margin-top: 1em;
margin-bottom: 1em;
}
.page {
text-rendering: optimizeLegibility;
}
.normal .paper {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
}
.normal .page {
outline: 1px solid gold;
}
.preview .page {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
}
.debug #story {
outline: 1pt solid green;
}
}
@media print {
html {
width: @paper-width;
}
body {
/* Allows printing of background colors */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.paper {
/* Crop marks */
background-image:
linear-gradient(90deg, red 0, red 100%),
linear-gradient(0deg, red 0, red 100%),
linear-gradient(90deg, red 0, red 100%),
linear-gradient(0deg, red 0, red 100%),
linear-gradient(90deg, red 0, red 100%),
linear-gradient(0deg, red 0, red 100%),
linear-gradient(90deg, red 0, red 100%),
linear-gradient(0deg, red 0, red 100%),
;
background-size:
@crop-size 2px,
2px @crop-size,
@crop-size 2px,
2px @crop-size,
@crop-size 2px,
2px @crop-size,
@crop-size 2px,
2px @crop-size
;
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;
}
}
/**
* UI
*/
@media screen {
.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;
}
.button: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;
}
#interface {
font-family: sans-serif;
text-transform: uppercase;
font-size: 10pt !important;
line-height: 14pt;
letter-spacing: 1pt;
position: fixed;
bottom: 10pt;
right: 10pt;
}
#interface a {
text-decoration: none;
position: static;
}
#toc {
display: inline-block;
}
#toc-pages {
padding: 0.5em 0;
display: none;
background-color: black;
position: absolute;
right: 0;
bottom: 2em;
height: 200pt;
width: 80pt;
overflow: auto;
}
#toc-pages a {
padding: 0 1em;
color: white;
}
#toc-pages a:hover {
background-color: white;
color: black;
}
#toc-pages button {
width: 80pt;
}
}
@media print {
#interface {
display: none;
}
}
/**
* Helpers
*/
.region-break {
/* Apply this class to an element to put it on a new region.
* Hint:
* You can also use an empty <div class="page-break"></div>
* if you want to put manual page breaks without attaching it to an HTML element
*/
-webkit-region-break-before: always;
}
.debug .region-break {
border-top: 1pt dashed blue;
}
/* __________________________________ LOCAL SETTINGS __________________________________ */
@header-height: 10mm;
@header-text: " A Romance of Many Dimensions";
@footer-height: 10mm;
@footer-text: counter(page-counter);
.header,
.body,
.footer {
box-sizing: border-box;
}
/* __________________________________ HEADER __________________________________ */
.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: myStory;
-adobe-flow-from: myStory;
position: absolute;
}
#my-story {
-webkit-flow-into: myStory;
-adobe-flow-into: myStory;
}
/* __________________________________ FOOTER __________________________________ */
.footer {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
height: @footer-height;
text-align: center;
&:after {
content: @footer-text;
}
}
/* for spreads only */
.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;
}
}
body {
text-rendering: optimizeLegibility;
font-size: 85%;
line-height: 1.5;
}
h1,
h2,
h3 {
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 2em;
padding: 1.45833em 0;
}
h2 {
font-size: 1.5em;
padding: 1.25em 0;
}
h3 {
font-size: 1.16667em;
padding: 1.51786em 0;
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* Avoids headings to be cut or to be orphans.
* But it doesn't seem to work
* if the element after has a page-break-inside avoid. It tries its best! */
-webkit-region-break-inside: avoid;
-webkit-region-break-after: avoid;
}
/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
* HERE NO PARAGRAPH WILL BE CUT,
* BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
/*-webkit-region-break-inside: avoid;*/
}
* {
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
}
.debug .header {
outline: 1pt solid pink;
}
.debug .body {
outline: 1pt solid purple;
}
.debug .footer {
outline: 1pt solid pink;
}
/* __________________________________ 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%;
}
/* the geometry of the page */
@page-width: 148mm;
@page-height: 210mm;
/*@page-width: 420.944881995pt;*/
/*@page-height: 595.2755907pt;*/
/*@page-height: 595pt;*/
/* the sizeof the crop marks*/
@crop-size: 7mm;
/*@crop-size: 19.84251969pt;*/
/* the size of bleed */
@bleed: 5mm;
/*@bleed: 14.17322835pt;*/
// FIXME: make a case for single page layouts
@page-margin-inside: 20mm;
@page-margin-outside: 10mm;
@page-margin-top: 10mm;
@page-margin-bottom: 15mm;
p{
font-family: 'Lora', serif;
text-indent: 15px;
}
blockquote{
margin-top: 15px;
margin-bottom: 15px;
font-size: 1.25em;
font-style: italic;
}
// Choose the number of pages of the document
var nb_page = 7;
// Loads main content into <section id="container">
$("section#container").load("content.html");
$(function() {
// ________________________________ PREVIEW __________________________________ //
$("#preview").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("preview normal");
});
$(window).load(function(){
// __________________________________ DEBUG __________________________________ //
$("button#debug").click(function(e){
$("#debug").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").