README.md 5.47 KB
Newer Older
1
2
3
HTML 2 print
============

alexandre's avatar
bump  
alexandre committed
4
This little tool is a boilerplate, a minimal example to start a print project
svilayphiou's avatar
svilayphiou committed
5
using HTML, less/CSS and Javascript/Jquery to design it.  
svilayphiou's avatar
svilayphiou committed
6

7
### Why use html to make printed matters?
svilayphiou's avatar
svilayphiou committed
8

svilayphiou's avatar
svilayphiou committed
9
The most exciting reason to use HTML/CSS is the fact that you can go back
alexandre's avatar
bump  
alexandre committed
10
11
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
svilayphiou's avatar
svilayphiou committed
12
13
14
15
16
17
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.
svilayphiou's avatar
svilayphiou committed
18

19
### Why use this instead of libraries such as the PHP library tcpdf which transforms html to a PDF for print?
svilayphiou's avatar
svilayphiou committed
20
21
22
23
24

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?
svilayphiou's avatar
svilayphiou committed
25
26
27
28

Features
--------

svilayphiou's avatar
svilayphiou committed
29
30
- Crop marks made with CSS gradients
- Pagination in pure CSS
svilayphiou's avatar
svilayphiou committed
31
32
- Mixing flowable content and absolute positioned content
- Image fitting in frame
svilayphiou's avatar
svilayphiou committed
33
34
- View as spread, and possibly as flatplan, and possibly building imposition
  plans
svilayphiou's avatar
svilayphiou committed
35
36
- Preflight packages is built-in: use the "Save Complete Webpage" function of
  your browser
svilayphiou's avatar
svilayphiou committed
37
38
39
40
41
42
43

PDFutils
--------
See the repository PDFutils <<http://osp.kitchen/tools/PDFutils/>> for
pre-press tools such as:

- PDF conversion from RGB to CMYK via Ghostscript
svilayphiou's avatar
svilayphiou committed
44
- Check color separation
svilayphiou's avatar
svilayphiou committed
45
46
47


* * *
svilayphiou's avatar
svilayphiou committed
48

49
50
51
52
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.
svilayphiou's avatar
svilayphiou committed
53
That is all you need to get started. Refer to the "Development" section to get your environment up and running.
54

55
56
#### 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.
57
 
58
59
#### 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.
60

61
62
#### 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.
63

64
#### /assets
svilayphiou's avatar
svilayphiou committed
65
66
67
68
69
70
71
72
73
74

- `/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! 



75

svilayphiou's avatar
svilayphiou committed
76

77
How to?
svilayphiou's avatar
svilayphiou committed
78
79
---

svilayphiou's avatar
svilayphiou committed
80
81
Example is based on an A5 format.

svilayphiou's avatar
svilayphiou committed
82
83
### Less

svilayphiou's avatar
svilayphiou committed
84
> «Less is a CSS pre-processor, meaning that it extends the CSS language, adding
svilayphiou's avatar
svilayphiou committed
85
86
87
features that allow variables, mixins, functions and many other techniques
that allow you to make CSS that is more maintainable, themable and
extendable.»
svilayphiou's avatar
svilayphiou committed
88
> <footer>— <http://lesscss.org/></footer>
svilayphiou's avatar
svilayphiou committed
89

90
We use Less to harness the power of variables to easily change page dimensions, crop marks & sizes generally.
91
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.
svilayphiou's avatar
svilayphiou committed
92
93
94
95
96


### Javascript/Jquery

We use them in order to:
97
98
99
- add a running title
- add crop marks
- paginate
svilayphiou's avatar
svilayphiou committed
100

101

svilayphiou's avatar
svilayphiou committed
102
103
104
105
106
### Print

To make a PDF, just open the webpage in the browser, print the page within the browser, and
choose «Print to file».

107
108
Currently, and idealy, Chromium version 33 seems the best version to use. We investigate to document this question more deeply.

svilayphiou's avatar
svilayphiou committed
109
110
111
112
113
114
115
116
117
118
119
In Chrome, you can have a print preview within the browser, which can save
some time as the system print dialogue is not optimal (you need to change the
filename everytime otherwise it doesn't export the PDF; if not A4, you have to
change the paper format every time). On Linux, you can use chromium by adding
an option; type in a terminal:

    chromium --enable-print-preview

If you have the error «pdf viewer is not available», you need to install
chromium-libpdf (tested on Arch Linux).

pierreh's avatar
pierreh committed
120
121
122
On some install, you need
    chromium-browser --enable-print-preview

svilayphiou's avatar
svilayphiou committed
123
124
125
126
127
128
129
130

First launch
------------

### Experimental Webkit features

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
alexandre's avatar
bump  
alexandre committed
131
webkit-based browser and activate the «experimental web platform features».
svilayphiou's avatar
svilayphiou committed
132
133
134
135
To do so, you can visit the URL:

    chrome://flags/#enable-experimental-web-platform-features

pierreh's avatar
pierreh committed
136
137
138
139
And search in the long list for «experimental web platform features» to enable.
(or the equivalent in the language of your browser)


svilayphiou's avatar
svilayphiou committed
140
141
142
143
144
Development
-----------

### Local micro-server

alexandre's avatar
bump  
alexandre committed
145
146
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.
svilayphiou's avatar
svilayphiou committed
147
148
149
150
151
152
153
154
155
To do so:

- Open a terminal.
- Run those sommands:

    cd /path/to/this/directory/
    python -m SimpleHTTPServer

- Visit the URL "http://localhost:8000/"!
svilayphiou's avatar
svilayphiou committed
156

alexandre's avatar
alexandre committed
157
158
159
160
161
Resources
---------

- <http://alistapart.com/article/building-books-with-css3>

alexandre's avatar
bump  
alexandre committed
162
163

vim: ft=markdown :