Commit dff731fe authored by svilayphiou's avatar svilayphiou

Put further documentation in "Documentation.md".

Added example cases:
- 2 columns layout
- offset pagination
- 1 layout per page
- master pages
parent 37da3850
Advanced documentation
======================
To know basic information and how to first start the project, please read the README.md.
Collaborative design
--------------------
Because everything is text-based, you can work on the HTML and/or on the CSS files from an Etherpad, a collaborative text editor. To do so, open a pad, go to Export options and copy the link of the "plain text" export button. Then paste the url in `setup/setup.js` in from of `var content = `.
Region-breaks
-------------
Built into html2print.less is a little class `.region-break` that you can apply to an element to put it on a new region.
<h1 class="region-break">My Title</h1>
Hint:
You can also use an empty `<div class="region-break"></div>`
if you want to put manual page breaks without attaching it to an HTML element
other properties available to you with CSS regions:
-webkit-region-break-after:
-webkit-region-break-before:
-webkit-region-break-inside:
with assignable values of: `always;` or `avoid;`
Pagination
----------
Applying a 'counter-reset: page-counter -3;'
then hiding the footer with visibility:none on pages where one would not want the counter to display.
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
......@@ -34,13 +34,6 @@ Features
- Preflight packages is built-in: use the "Save Complete Webpage" function of
your browser
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
* * *
......@@ -61,6 +54,20 @@ To do so:
- Go to <http://localhost:8000/> !
### Print
To make a PDF, print the page within the browser, and choose «Print to file».
Important: choose the right page format (only Chromium's print preview can take the format specified by the CSS).
In order to know your paper format (with the crop marks), inspect one ".paper" element with you web inspector, and look at its dimensions in mm.
Tested browsers:
- [Midori](http://midori-browser.org/)
- Arora
- Safari > 7.0
- Chromium from versions 29 to 33
Anatomy of this repo
--------------------
......@@ -87,9 +94,23 @@ This is where it all comes together. We pull together all the requirements, all
- `/js/` → interface element actions & attitudes, as well as general variable settings, namely, the amount of pages for your document.
- `/css/` → .less partials
#### /examples/
Concrete examples from which you can copy/paste specific features like:
- 2columns.html: multi-column layout
- pagination_region-breaks.html: Page-breaks examples + pagination starting at page 3
- one-layout-per-page.html: when page number set to 0, then you can specify each page structure individually
- master-pages.html: Applying different master pages
- draggable and resizeable elements (to come)
#### • /iceberg/
Snapshots of the project, for OSP website previews!
How to?
---
......@@ -108,25 +129,15 @@ It is also generally a good idea to use a CSS preprocessor for your authoring ex
### Javascript/Jquery
We use them in order to:
- add a running title
- add crop marks
- paginate
We use them for the interface actions like:
- zoom
- jump to a page
- view as spread
- toggle hi- and lo-res images
### Print
To make a PDF, just open the webpage in the browser, print the page within the browser, and
choose «Print to file».
Currently, and idealy, Chromium version 33 seems the best version to use. Chrome does a handy print preview when 'exporting'. We investigate to document this question more deeply.
Tested browsers:
- [Midori](http://midori-browser.org/)
- Arora
- Safari > 7.0
- Chrome from versions 29 to 33
For Chrome only
---------------
For Chrome only (from version 29 to 33)
---------------------------------------
### Experimental Webkit features
......@@ -140,27 +151,7 @@ To do so, you can visit the URL:
And search in the long list for «experimental web platform features» to enable.
(or the equivalent in the language of your browser)
About region-break
------------------
Built into html2print.less is a little class that you can apply 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
other values available to you with CSS regions:
-webkit-region-break-after:
-webkit-region-break-before:
-webkit-region-break-inside:
with assignable values of: always; or avoid;
Pagination
----------
applying a 'counter-reset: page-counter -3;'
then hiding the footer with visibility:none on pages where one would not want the counter to display.
Resources
---------
......
......@@ -13,6 +13,8 @@
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/* It is named column50 because it's 50% wide but you can't use the % sign in a class name */
/* We recommend adding new classes for other column width so that you can reuse them later on. */
.column50 {
width: 50%;
height: 100%;
......
This diff is collapsed.
<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>HTML2print</title>
<link rel="stylesheet" href="/main.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
<style type="text/css" media="all">
.body {
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
.intro {
width: 100%;
height: 4em;
margin-bottom: 1.5em;
}
.column33 {
width: 33%;
height: 100%;
padding: 0 0.5em;
float: left;
box-sizing: border-box;
}
.column50 {
width: 50%;
height: 100%;
padding: 0 0.5em;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div id="page-1" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body recipient">
</section>
<section class="footer">
</section>
</div>
</div>
<div id="page-2" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body">
<div class="intro recipient"> </div>
<div class="column50 recipient"> </div>
<div class="column50 recipient"> </div>
</section>
<section class="footer">
</section>
</div>
</div>
<div id="page-3" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body">
<div class="column33 recipient"> </div>
<div class="column33 recipient"> </div>
<div class="column33 recipient"> </div>
</section>
<section class="footer">
</section>
</div>
</div>
<div id="master-page" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body">
<div class="intro recipient"> </div>
<div class="column50 recipient"> </div>
<div class="column50 recipient"> </div>
</section>
<section class="footer">
</section>
</div>
</div>
</div>
<div id="interface">
<button id="preview" class="button">Preview</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 class="dropdown">
<button id="zoom" class="button">Zoom</button>
<ul id="zoom-list">
<li><a href="#" title="25">25&thinsp;%</a></li>
<li><a href="#" title="33">33&thinsp;%</a></li>
<li><a href="#" title="50">50&thinsp;%</a></li>
<li><a href="#" title="75">75&thinsp;%</a></li>
<li><a href="#" title="100">100&thinsp;%</a></li>
<li><a href="#" title="150">150&thinsp;%</a></li>
<li><a href="#" title="200">200&thinsp;%</a></li>
<li><a href="#" title="300">300&thinsp;%</a></li>
</ul>
</div>
<div id="toc">
<button id="goto" class="button" href="#">Go&nbsp;to</button>
<ul id="toc-pages"></ul>
</div>
</div>
<div id="stories">
<article id="my-story">
<h1>Flatland <br> A Romance of Many Dimensions</h1>
<div class="region-break"> </div>
<h2>Concerning the Inhabitants of Flatland</h2>
<p>THE GREATEST length or breadth of a full grown inhabitant of
Flatland may be estimated at about eleven of your inches. Twelve
inches may be regarded as a maximum.
</p>
<p>Our Women are Straight Lines.
</p>
<p>Our Soldiers and Lowest Class of Workmen are Triangles with two
equal sides, each about eleven inches long, and a base or third side
so short (often not exceeding half an inch) that they form at their
vertices a very sharp and formidable angle. Indeed when their bases
are of the most degraded type (not more than the eighth part of an
inch in size), they can hardly be distinguished from Straight lines or
Women; so extremely pointed are their vertices. With us, as with you,
these Triangles are distinguished from others by being called
Isosceles; and by this name I shall refer to them in the following
pages.
</p>
<p>Our Middle Class consists of Equilateral or Equal-Sided Triangles.
</p>
<p>Our Professional Men and Gentlemen are Squares (to which class I
myself belong) and Five-Sided Figures or Pentagons.
</p>
<p>Next above these come the Nobility, of whom there are several
degrees, beginning at Six-Sided Figures, or Hexagons, and from thence
rising in the number of their sides till they receive the honourable
title of Polygonal, or many-Sided. Finally when the number of the
sides becomes so numerous, and the sides themselve so small, that the
figure cannot be distinguished from a circle, he is included in the
Circular or Priestly order; and this is the highest class of all.
</p>
<p>It is a Law of Nature with us that a male child shall have one
more side than his father, so that each generation shall rise (as a
rule) one step in the scale of development and nobility. <blockquote>Thus the son
of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so
on.</blockquote>
</p>
<p>But this rule applies not always to the Tradesman, and still less
often to the Soldiers, and to the Workmen; who indeed can hardly be
said to deserve the name of human Figures, since they have not all
their sides equal. With them therefore the Law of Nature does not
hold; and the son of an Isosceles (i.e. a Triangle with two sides
equal) remains Isosceles still. Nevertheless, all hope is not such
out, even from the Isosceles, that his posterity may ultimately rise
above his degraded condition. For, after a long series of military
successes, or diligent and skillful labours, it is generally found
that the more intelligent among the Artisan and Soldier classes
manifest a slight increase of their third side or base, and a
shrinkage of the two other sides. Intermarriages (arranged by the
Priests) between the sons and daughters of these more intellectual
members of the lower classes generally result in an offspring
approximating still more to the type of the Equal-Sided Triangle.
</p>
<p>Rarely--in proportion to the vast numbers of Isosceles
births--is a genuine and certifiable
Equal-Sided Triangle produced from
Isosceles parents. Such a birth requires, as its
antecedents, not only a series of carefully arranged intermarriages,
but also a long-continued exercise of frugality and self-control on
the part of the would-be ancestors of the coming Equilateral, and a
patient, systematic, and continuous development of the Isosceles
intellect through many generations.
</p>
<p>The birth
of a True Equilateral Triangle from Isosceles parents is
the subject of rejoicing in our country for many furlongs round.
After a strict examination conducted by the Sanitary and Social Board,
the infant, if certified as Regular, is with solemn ceremonial
admitted into the class of Equilaterals. He is then immediately taken
from his proud yet sorrowing parents and adopted by some childless
Equilateral, who is bound by oath never to permit the child henceforth
to enter his former home or so much as to look upon his relations
again, for fear lest the freshly developed organism may, by force of
unconscious imitation, fall back again into his hereditary level.
</p>
</article>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="assets/lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="assets/lib/jquery.min.js"></script>
<script type="text/javascript" src="setup/setup.js"></script>
<script type="text/javascript" src="assets/js/html2print.js"></script>
<script type="text/javascript" charset="utf-8">
// This cancels the automatic cloning of the pages, allowing for a specifi structure for each page.
var nb_page = 0;
</script>
</body>
</html>
This diff is collapsed.
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