Commit a2022b7b authored by gijs's avatar gijs

Merge branch 'devel' of gitlab.constantvzw.org:osp/tools.html2print into devel

parents a748378e dc620797
# Html2print Core Options
### Using html2print with OSPKit
This browser is meant to be used with the project html2print available here: http://osp.kitchen/tools/html2print/.
The aim is to lay out printed documents within a web browser.
We built our own webkit browser in order to have a faster browser and good typography (weirdly, the bearings and kernings can be weird in certain webkit browsers).
You can clone/download OSPKit here : http://gitlab.constantvzw.org/osp/tools.ospkit
### Typographic extentions for html2print
tools.html5lib_typogrify : A usefull set of filters to correct common typographical mistakes. You can clone your version here :
git@gitlab.constantvzw.org:osp/tools.html5lib_typogrify.git
Hyphen : A french dictionnary of hyphen rules and positions. You can download it here :
http://www.dicollecte.org/download/fr/hyph-fr-v3.0.zip
### Working with markdown files
Why working with markdow files ?
There can be many reasons but the main one is that Markdown files are quite easy to write and to understand. (For instance, if you're working on the design and someone else, non familliar with html, is focusing on the content. This can be a solution) Plus, Mardown synthax can be easily translated into html files.
You don't have to change your directory. Just put your md files into 'content'.
In order to generate the md files into html, you need to modify the shortcuts and recipies of the 'makefile' following the code below. Here, we're using Pandoc to make the convertion.
Then, run the command 'make' and 'make serve' as seen before.
#############
# Variables #
#############
# Finds content files
MARKDOWN_FILES = $(shell find content -type f -name '*.md' | sort)
# Computes the destination name of individual markdown files
HTML_FILES = $(patsubst content/%.md, build/html/%.html, $(MARKDOWN_FILES))
# Finds layout files
LAYOUT_FILES = $(shell find layout -type f -name '*.html')
#############
# Shortcuts #
#############
# use `make` or `make all` to generate everything we need
all: story json
# use `make story` to convert all the markdown files
story: build/html/story.html
# use `make json` to generate a json list of layouts (use in HTML2print interface)
json: build/js/src.json
############
# Recipies #
############
# converts from markdown to html individual files
build/html/%.html : content/%.md
mkdir -p $(@D)
# pandoc -f markdown -t html -o $@ $<
python2 bin/md2html.py $< | \
python2 bin/microtypo.py - $@
# concatenate individual html files into one big html file
build/html/story.html : $(HTML_FILES)
cat $^ > $@
# generates a json list of layouts (used in HTML2print interface)
build/js/src.json : $(LAYOUT_FILES)
mkdir -p $(@D)
python2 bin/makejson.py --outfile $@ $^
# deletes the build directory
.PHONY: serve
serve:
python2 bin/serveit.py
# deletes the build directory
.PHONY: clean
clean:
Quick start
===========
Html2print Core
===============
<!---
## Structure of this README.md :
1. Description
2. Goals and means
3. Selection of projects made with html2print
4. Specificities of this version
5. Organisation of the directory
6. First launch
7. Compatibility
8. Options
* Using html2print with OSPKit
* Potential extentions for html2print
* Working with markdown files
9. Html2print Fork
10. Authors and contact
11. Crédits
12. Licence
--->
### Description :
Html2print is a tool. A boilerplate to create print design using only html and css.
### Goals and means :
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.
### Selection of projects made with html2print :
The Riddle of the Real City
By Wim Nijenhuis, Design by OSP.
This 411 pages project was realized using html2print method. The content was first synthaxed by the author in Markdown then translated into html with Pandoc. It contain 3 distincts 'Book', each using a different layout and containing a lot of illustrations. This project is a good proof that html2print can be use, not only for small, but also more complex editorial projects.
![the riddle_p.174.175](http://osp.kitchen/visual/osp.work.the-riddle/8865ed6e840f0c9e6aecc67f3541988e2668413d/width..1000/cover.png)
![the riddle_p.218.219](http://osp.kitchen/visual/osp.work.the-riddle/62aa8fb416366deaf08510911a9df3ddb14188c3/width..1000/the-riddle-218-219.png)
<!---
+ Médor ?
--->
### Specificities of this version :
This is a minimal version of the tool html2print. This package contain only what's essential to make html2print work and very few designs. It implies that the user has to built (or personalize) his own tool around the core of html2print. We've added some exemples in the layout file so you could have a plimpse of the possibilities that html2print as to offer.
Differencies from the previous versions :
* No depedencies are required here : no need to create a virtual environnement (no python dependencies) and we also got rid of Less files (because css files can now handle the same properties).
* There is a makefile that compile the different actions (as shortcuts) used to generate the content into html layout (it also contain a recipie to convert markdown files --see below for more details : Working with markdow files)
### Organisation and description of the directory :
├── agpl-3.0.txt (licence)
├── bin (programmes/utilitary)
│ ├── makejson.py (generate a file json. Used to go to one file to another)
│ ├── makejson-py3.py (idem with python 3. To merge)
│ ├── serveit.py (mini server, python 2)
│ └── serveit-py3.py (mini server, python 3, To merge)
├── content (File dedicated to receive content. optionnal, you can built your own directory)
│ └── sample-story.html (sample of content)
├── css (css used by html2print)
│ ├── gui.css (graphic interface styles)
│ ├── html2print.css (core of html2print: make sure that the screen and the print remain the same)
│ └── main.css (currently not in use. To be remove)
├── index.html (graphic interface)
├── js
│ ├── docs.js (script that...)
│ ├── gui.js (script to control the actions on the grpahic interface, link to the file index.html)
│ └── stories.js (script to load external html content. link to all files in the layout folder)
├── layout (folder containing files generated with html files in 'content' and styles in css)
│ └── sample (one folder per layout)
│ ├── index.html
│ └── styles.css
├── makefile (file that compile the different shortcuts used to generate the layout)
├── README.md
└── vendors (external code)
├── css-regions-polyfill-custom-medor.js (supporting 'regions css' for non-webkit based browser)
└── modernizr-custom.js (detect the need for supporting - or not- the 'region css')
### First launch :
(Supposing you already added content and modified/added styles sheets — or not !)
Go into the html2print folder :
cd Desktop/tool.html2print
Then enter the command (below). It will run the shortcuts present in the makefile generating the files in 'content' into 'layout' :
This is a boilerplate for any HTML2print project.
make
Licence
-------
Now, you'll create a local server to make a preview of your project, enter :
This file is part of HTML2print.
make serve
HTML2print is free software: you can redistribute it and/or modify it under the
terms of the GNU Affero General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option) any
later version.
Then, visit the url :
HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU Affero General Public License for more
details.
http://localhost:8000
You should have received a copy of the GNU Affero General Public License along
with HTML2print. If not, see <http://www.gnu.org/licenses/>.
### Compatibility :
You can visualize html2print with webkit based browser such as:
* Epiphany
* Safari
* Qt Webkit
Pre-requisites
--------------
You can also use OSPKit which is the browser we built (see below 'Html2print Core Options')
Generate the content
### Html2print Core Options :
We propose some options to add to the core of html2print. These are not required to make html2print work but proved to be usefull in some cases :
make
* Using html2print with OSPKit
* Typographic extentions for html2print
* Working with markdown files
To read more about these options, see the 'Options.md'.
### Html2print Fork :
(List to come...)
Feel free to make a fork on your own !
### Authors / contacts :
Open Source Publishing
http://osp.kitchen/
Using HTML2print
----------------
OSP makes graphic design using only free and open source software—pieces of software that invite their users to take part in their elaboration. Through a collaborative practice, we work on workshops, commissioned or self-commissioned projects, searching to redefine our playground, digging for a more intimate relation with the tools.
Starts the serveur
### Crédits :
We'd love to have a glimpse of your projects using Html2print !
make serve
### Licence :
HTML2print is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option) any later version.
HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with HTML2print. If not, see http://www.gnu.org/licenses/.
Visit the URL:
http://localhost:8000
......@@ -33,7 +33,8 @@
/* the geometry of the page */
--page-width: 148.5mm;
--page-height: 210mm;
}
/* loads the core less file */
/* loads the core file */
@import "html2print.css";
......@@ -6,6 +6,7 @@
<title>Sample document</title>
<script src="../../vendors/modernizr-custom.js"></script>
<link rel="stylesheet" href="../../css/html2print.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
......
@import '../../../css/main.css';
#flow-main {
-webkit-flow-into: flow-main;
flow-into: flow-main;
......@@ -10,4 +7,3 @@
-webkit-flow-from: flow-main;
flow-from: flow-main;
}
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