Skip to content

GitLab

T
tools.html2print
Commit 4f8473db authored by alexandre's avatar alexandre
Browse files
Options

more changes

parent 910c32fb
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 215 deletions
TODO.txt
View file @ 4f8473db
......@@ -13,6 +13,7 @@
- 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?
- several flows/stories
- http://www.bramstein.com/projects/typeset/ et http://jsfiddle.net/p8omquam/
=================
| TO M E R G E |
......
canvas.less
View file @ 4f8473db
// FIXME: à quoi ça sert? → à ne pas avoir de page blanche entre chaque page
#pages {
position: absolute;
top: 0;
/*z-index: -1000;*/
width: 100%;
#story {
display: none;
}
.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;
@media all {
html {
background-color: white;
}
// 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: @paper-width;
height: @paper-height;
counter-increment: page-counter;
/*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;*/
/* 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;
/* 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;
}
/* Crop marks */
padding: @crop;
}
.page {
width: 100%;
height: 100%;
position: relative;
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
html.spread {
.paper {
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread .paper {
float: left;
&:nth-child(odd) {
margin-left: -@crop * 2;
left: -1px;
}
&:first-child {
margin-left: @page-width !important;
}
}
.spread .paper:first-child {
margin-left: @paper-width !important;
}
}
/* Alex */
@media screen {
.page {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
#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;
}
.normal .paper {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
}
.normal .page {
outline: 1px solid magenta;
}
.preview .page {
outline: 1px solid lightgray;
box-shadow: 2px 2px 1px 1px lightgray;
}
}
@media print {
html {
width: @page-width-crop;
width: @paper-width;
}
.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;
}
}
html {
/*width: @page-width-crop;*/
/*position: absolute;*/
background-color: white;
}
body {
/*position: absolute;*/
}
computed.less
View file @ 4f8473db
/* the size of a 2 pages spread */
@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
/* 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 );
debug.less
View file @ 4f8473db
/* __________________________________ 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;
}
.debug .paper:nth-child(even) {
background-color: yellow;
}
.debug .paper:nth-child(odd) {
background-color: cyan;
}
#story {
outline: 1pt solid green;
}
.region-break {
border-top: 1pt dashed blue;
}
.moveable {
outline: 1pt solid yellow;
}
.debug #story {
outline: 1pt solid green;
}
.debug .region-break {
border-top: 1pt dashed blue;
}
.debug .moveable {
outline: 1pt solid yellow;
}
.debug .header {
outline: 1pt solid pink;
}
.debug .body {
outline: 1pt solid purple;
}
.debug .footer {
outline: 1pt solid pink;
}
index.html
View file @ 4f8473db
<!DOCTYPE HTML>
<html lang="en">
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>HTML to Print Boilerplate</title>
......@@ -26,6 +26,7 @@
</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>
......
layout.less
View file @ 4f8473db
......@@ -6,7 +6,7 @@
@footer-text: counter(page-counter);
/* __________________________________ HEADER __________________________________ */
section.header {
.header {
/*position: absolute;*/
/*margin-top: @page-margin-top;*/
top: 0;
......@@ -37,7 +37,7 @@ section.header {
}
/* __________________________________ FOOTER __________________________________ */
section.footer {
.footer {
position: absolute;
bottom: 0;
margin: 0;
......@@ -52,6 +52,7 @@ section.footer {
}
}
/* for spreads only */
.paper {
&:nth-child(odd) .header {
text-align: right;
......
print.js
View file @ 4f8473db
......@@ -6,15 +6,22 @@ var nb_page = 7;
$("#story").load("content.html");
$(window).load(function(){
// ________________________________ PREVIEW __________________________________ //
$("#preview").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("preview normal");
});
// __________________________________ DEBUG __________________________________ //
$("button#debug").click(function(e){
$("#debug").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("debug");
});
// __________________________________ SPREAD __________________________________ //
$("button#spread").click(function(e){
$("#spread").click(function(e){
e.preventDefault();
//$(this).toggleClass("button-active");
//$("html").toggleClass("spread");
......@@ -22,13 +29,13 @@ $(window).load(function(){
$(this).toggleClass("button-active");
$("html").toggleClass("spread");
/* TODO: switch to CSS */
w = parseInt($(".paper:first-child").css("width")) * 2;
$("html").css("width", w + "px");
//[> TODO: switch to CSS <]
//w = parseInt($(".paper:first-child").css("width")) * 2;
//$("html").css("width", w + "px");
});
// __________________________________ HIGH RESOLUTION __________________________________ //
$("button#hi-res").click(function(e){
$("#hi-res").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("export");
......
print.less
View file @ 4f8473db
/* see http://alistapart.com/article/building-books-with-css3 */
@page {
/* Support for `marks` is missing in every single web browser out there*/
size: @page-width-crop @page-height-crop; // format avec cropmarks
size: @paper-width @paper-height; // format avec cropmarks
margin: 0;
}
......
type.less
View file @ 4f8473db
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; }
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%; }
img {
max-width: 100%;
}
ui.less
View file @ 4f8473db
/* __________________________________ INTERFACE CLASSES __________________________________ */
@media print {
.button,
#interface {
display: none;
@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 {
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 {
.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;
}
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;
.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;
div#toc {
display: inline-block;
a {
text-decoration: none;
position: static;
}
ul#toc-pages {
padding: 0.5em 0;
display: none;
background-color: black;
position: absolute;
right: 0;
bottom: 2em;
height: 200pt;
width: 80pt;
overflow: auto;
#toc {
display: inline-block;
a {
padding: 0 1em;
color: white;
#toc-pages {
padding: 0.5em 0;
display: none;
background-color: black;
position: absolute;
right: 0;
bottom: 2em;
height: 200pt;
width: 80pt;
overflow: auto;
&:hover {
background-color: white;
color: black;
a {
padding: 0 1em;
color: white;
&:hover {
background-color: white;
color: black;
}
}
}
button {
width: 80pt;
}
}
button {
width: 80pt;
}
}
}
@media print {
#interface {
display: none;
}
}
variables.less
View file @ 4f8473db
/* ______________________________ USER DEFINED VARIABLES ______________________________ */
/* the geometry of the page */
@page-width: 148.5mm;
@page-height: 210mm;
@crop-length: 7mm; // @crop-size
@crop-bleed: 5mm; // @bleed
/*@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;
......
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