Web-to-print-with-pagedjs - Revision history

Arjensuijker at 15:02, 24 November 2023

2023-11-24T15:02:00Z

← Older revision		Revision as of 15:02, 24 November 2023
Line 1:		Line 1:

	=== Printing from HTML & CSS ===		== Printing from HTML & CSS ==
	Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:		Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

Line 10:		Line 10:
	This technology is still rather niche, so many applications for it are relatively underexplored.		This technology is still rather niche, so many applications for it are relatively underexplored.

	=== Why Paged.js? ===		== Why Paged.js? ==
	For decades, CSS has included possibilities for designing printed publications. Unfortunately, browsers have stopped adhering to these standards for print CSS. This means that you can design a beautiful books in your CSS, but when you print it directly in the browser (like you are supposed to do) it will miss a lot of features that make a book a book. There are many initiatives out there that fix this issue in different ways. One way is to send the file to a server and make a pdf from it there, but this can get rather complicated. Paged.js solves it by using JavaScript to interpret you CSS and force the brower to interpret it correctly when printing. For many designers, this is the simplest solution.		For decades, CSS has included possibilities for designing printed publications. Unfortunately, browsers have stopped adhering to these standards for print CSS. This means that you can design a beautiful books in your CSS, but when you print it directly in the browser (like you are supposed to do) it will miss a lot of features that make a book a book. There are many initiatives out there that fix this issue in different ways. One way is to send the file to a server and make a pdf from it there, but this can get rather complicated. Paged.js solves it by using JavaScript to interpret you CSS and force the brower to interpret it correctly when printing. For many designers, this is the simplest solution.

	=== How to get started ~~ith~~ the Paged.js polyfill ===		== How to get started with the Paged.js polyfill ==
	The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the '''head''' of your HTML document like this:		The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the '''head''' of your HTML document like this:

Line 20:		Line 20:
	After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.		After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.

	=== Writing print CSS ===		== Writing print CSS ==
	The documentation of print CSS is excellent on Paged.js, so I won't repeat it here. Please follow their instructions [https://pagedjs.org/documentation/5-web-design-for-print/#the-%40media-print-query here] and enjoy!		The documentation of print CSS is excellent on Paged.js, so I won't repeat it here. Please follow their instructions [https://pagedjs.org/documentation/5-web-design-for-print/#the-%40media-print-query here] and enjoy!

	=== Example CSS ===		== Example CSS ==
	Here is an example of a css file that uses many different print properties.		Here is an example of a css file that uses many different print properties.

Arjensuijker at 07:13, 10 October 2023

2023-10-10T07:13:34Z

← Older revision		Revision as of 07:13, 10 October 2023
Line 14:		Line 14:

	=== How to get started ith the Paged.js polyfill ===		=== How to get started ith the Paged.js polyfill ===
	The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the head of your HTML document like this:		The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the '''head''' of your HTML document like this:

	<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>		<code><script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script></code>

	After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.		After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.

Arjensuijker at 14:03, 6 October 2023

2023-10-06T14:03:11Z

← Older revision		Revision as of 14:03, 6 October 2023
Line 3:		Line 3:
	Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:		Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

	* Better hybrid publishing workflow You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate ~~onj~~ without having the trouble of sending around multiple versions etc.		* Better hybrid publishing workflow
	* Customized printed publications Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.		**You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate on without having the trouble of sending around multiple versions etc.
			* Customized printed publications
			**Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.

	This technology is still rather niche, so many applications for it are relatively underexplored.		This technology is still rather niche, so many applications for it are relatively underexplored.

Arjensuijker: gd

2023-10-06T14:02:36Z

← Older revision		Revision as of 14:02, 6 October 2023
Line 3:		Line 3:
	Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:		Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

	* Better hybrid publishing workflow You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate onj without having the trouble of sending around multiple versions etc.		* Better hybrid publishing workflow You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate onj without having the trouble of sending around multiple versions etc.
	* Customized printed publications Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.		* Customized printed publications Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.

	This technology is still rather niche, so many applications for it are relatively underexplored.		This technology is still rather niche, so many applications for it are relatively underexplored.

Arjensuijker: improved formatting

2023-10-06T14:01:57Z

improved formatting

New page

=== Printing from HTML & CSS ===
Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

* Better hybrid publishing workflow You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate onj without having the trouble of sending around multiple versions etc.
* Customized printed publications Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.

This technology is still rather niche, so many applications for it are relatively underexplored.

=== Why Paged.js? ===
For decades, CSS has included possibilities for designing printed publications. Unfortunately, browsers have stopped adhering to these standards for print CSS. This means that you can design a beautiful books in your CSS, but when you print it directly in the browser (like you are supposed to do) it will miss a lot of features that make a book a book. There are many initiatives out there that fix this issue in different ways. One way is to send the file to a server and make a pdf from it there, but this can get rather complicated. Paged.js solves it by using JavaScript to interpret you CSS and force the brower to interpret it correctly when printing. For many designers, this is the simplest solution.

=== How to get started ith the Paged.js polyfill ===
The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the head of your HTML document like this:

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.

=== Writing print CSS ===
The documentation of print CSS is excellent on Paged.js, so I won't repeat it here. Please follow their instructions [https://pagedjs.org/documentation/5-web-design-for-print/#the-%40media-print-query here] and enjoy!

=== Example CSS ===
Here is an example of a css file that uses many different print properties.

<syntaxhighlight lang="css">
body {
background: red;
font-size: 35px;
}

@media print {
@page {
size: A5;
margin: 5mm 10mm;
bleed: 6mm;
marks: crop;
/* background-image: url('SILVER-HOLOGRAM-scaled.jpg'); */

@top-right {
content: "My beautiful book";
font-size: 15px;
color: brown;
}

@bottom-right {
content: "page "counter(page);
}

@bottom-center {
content: string(title);
}
}

@page chapterpage {

@bottom-right {
content: "";
}

}

@page: first {
@top-right {
content: "";
}

@bottom-right {
content: "";
}

@bottom-center {
content: "";
}

background-image:url('SILVER-HOLOGRAM-scaled.jpg');

}

@page: right {
margin-right: 20mm
}

@page: left {
margin-left: 20mm
}

body {
background: white;
}

h2 {
break-before: right;
string-set: title content(text);
page: chapterpage;
}

h1 {
break-after: page;
}

.page-break {
break-before: page;
}

}
</syntaxhighlight>