Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
tools.html2print
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
osp
tools.html2print
Commits
4f8473db
Commit
4f8473db
authored
Feb 15, 2015
by
alexandre
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
more changes
parent
910c32fb
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
245 additions
and
215 deletions
+245
-215
TODO.txt
TODO.txt
+1
-0
canvas.less
canvas.less
+94
-96
computed.less
computed.less
+8
-3
debug.less
debug.less
+23
-32
index.html
index.html
+2
-1
layout.less
layout.less
+3
-2
print.js
print.js
+13
-6
print.less
print.less
+1
-1
type.less
type.less
+25
-6
ui.less
ui.less
+63
-64
variables.less
variables.less
+12
-4
No files found.
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: @pa
ge-width-crop @page-height-crop
; // format avec cropmarks
size: @pa
per-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;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment