CSS Print: Difference between revisions

Latest revision as of 13:36, 3 December 2024

CSS

Cascading Style Sheets

body{
    background-color: pink;
    color: green;
    margin: 100px;
}

CSS1, CSS2.1, CSS3

Screenshot of one of the slides from Julie Blanc, as part of her presentation during the Paged.js workshop in October 2022. http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html#/19

CSS Print modules

CSS Paged Media Module Level 3
CSS Generated Content for Paged Media module
CSS Fragmentation Module Level 3
CSS Page Floats

CSS Paged Media Module

Paged media have many special requirements for the display of document content, which have evolved over the long history of printed books. Running headers and footers function as aids to navigation. Notes may appear at the bottom of the page, as footnotes. The properties of pages themselves may change based on their content or position in the document. Leaders visually connect related content. Cross-references may require generated text. Some paged media formats such as PDF use bookmarks for navigation.
This module defines new properties and values, so that authors may bring these techniques to paged media.

https://www.w3.org/TR/css-page-3/ (published working draft version)

https://drafts.csswg.org/css-page/ (current latest draft)

CSS Print Community Group

For a couple of years (2020-2023), a group of people formed a W3C community group to provide feedback to the CSS Print specs. Unfortunately this group is closed since Dec 2023.

This was their web page and blog: https://www.w3.org/community/cssprint/

Working with a NOT YET standard

Modern browsers (no CSS Print support yet)

A few of the CSS Print properties are supported by modern (aka up-to-date) browsers, but not many unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.

You can check if a CSS property is supported by a specific browser at: https://caniuse.com/

It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.

Paged.js and Weasyprint (already support CSS Print!)

If you nevertheless do want to use these properties, you can use Paged.js, a Javascript library also known as a polyfill, that aims to fill the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

Or you can use Weasyprint, who also supports most of the CSS Paged Media properties described on this page. In the Weasyprint documentation here you can read which properties are supported and which ones not.

CSS Print examples

An important proposal of the CSS Print drafts is to add a @page selector, that you can use to style a web page when it is rendered into pages.

@page{
    size: A4 portrait;
    margin: 20mm 30mm;
    bleed: 3mm;
    marks: crop;
}

More examples of CSS Print selectors and properties can be found here: CSS Print examples

CSS Print documentation

also called referred to as "CSS Paged Media"

supported by Weasyprint + Paged.js: https://www.w3.org/TR/css-page-3/ - all properties currently in the CSS Paged Media Module draft
partially supported: https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media - the properties that are implemented by some browsers
Paged.js: https://pagedjs.org/documentation/ - official project documentation
Weasyprint: https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css - list of supported CSS properties in Weasyprint

Media queries: @media print, @media screen

Kiara's great listing of css-print links:

https://pzwiki.wdka.nl/mediadesign/User:Kiara/Code#CSS-print

CSS Print tools

Layout engines for CSS Print

your browser (based on CSS Paged Media): use CTRL+P/CMD+P
Weasyprint https://doc.courtbouillon.org/weasyprint/stable/
Paged.js https://www.pagedjs.org/
wkhtmltopdf https://wkhtmltopdf.org/
Vivliostyle https://vivliostyle.org/
OSPKit (CSS Regions legacy support!) http://osp.kitchen/tools/ospkit/

Custom workflows made with CSS Print

html2print http://osp.kitchen/tools/html2print/
etherpash https://github.com/chchchchchchch/var.lgm.etherpash
8m-posters (8 March poster generator made by Julien Bidoret) https://prepostprint.org/8m-posters/
PageTypeToPrint https://ateliers.esad-pyrenees.fr/pagetypetoprint/
Padatrad https://gitlab.com/editionsburnaout/padatrad
octomode https://git.vvvvvvaria.org/varia/octomode
ether2html http://osp.kitchen/tools/ether2html/
ethertoff http://osp.kitchen/tools/ethertoff/

Books and publications made with CSS Print workflows

DiVersions (MediaWiki, Paged.js)
Reclaiming Digital Infrastructures (pads, Paged.js)
Machine Research (pads?, PJ Machine)
Mondoteque (MediaWiki, Weasyprint)
The Techno-Galactic Guide to Software Observation (pads, mdsh?)
Volumetric Regimes (MediaWiki, Paged.js)
Data Workers (MediaWiki, asciiWriter)
...

@@ Line 17: / Line 17: @@
 <small>Screenshot of one of the slides from Julie Blanc, as part of her presentation during the Paged.js workshop in October 2022. http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html#/19</small>
-===CSS Paged Media module===
+==CSS Print modules==
+* CSS Paged Media Module Level 3
+* CSS Generated Content for Paged Media module
+* CSS Fragmentation Module Level 3
+* CSS Page Floats
+===CSS Paged Media Module ===
 <blockquote>
@@ Line 25: / Line 32: @@
 </blockquote>
-https://www.w3.org/TR/css-page-3/ (published version)
+https://www.w3.org/TR/css-page-3/ (published working draft version)
+https://drafts.csswg.org/css-page/ (current latest draft)
-https://drafts.csswg.org/css-page/#blank-pseudo (current draft)
+===CSS Print Community Group===
-===Not [yet] supported atm===
+For a couple of years (2020-2023), a group of people formed a W3C community group to provide feedback to the CSS Print specs. Unfortunately this group is closed since Dec 2023.
-====Modern browsers (no support yet)====
+This was their web page and blog: https://www.w3.org/community/cssprint/
-A few of the Paged Media CSS properties are supported by modern (aka up-to-date) browsers, but not many unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.
+===Working with a NOT YET standard===
+====Modern browsers (no CSS Print support yet)====
+A few of the CSS Print properties are supported by modern (aka up-to-date) browsers, but not many unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.
 You can check if a CSS property is supported by a specific browser at: https://caniuse.com/
@@ Line 39: / Line 52: @@
 It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.
-====Paged.js and Weasyprint (already support)====
+====Paged.js and Weasyprint (already support CSS Print!)====
-If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers.  The project comes with extended documentation: https://pagedjs.org/documentation/.
+If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.
 Or you can use '''Weasyprint''', who also supports most of the CSS Paged Media properties described on this page. In the  Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here] you can read which properties are supported and which ones not.
-===page rules===
+==CSS Print examples==
-* <code>@page</code>
+An important proposal of the CSS Print drafts is to add a @page selector, that you can use to style a web page when it is rendered into pages.
-** <code>size</code>
-** <code>margin</code>
-** <code>bleed</code> (not [yet] supported atm)
-** <code>marks</code> (not [yet] supported atm)
 <syntaxhighlight lang="css">
@@ Line 62: / Line 71: @@
 </syntaxhighlight>
-https://developer.mozilla.org/en-US/docs/Web/CSS/@page
+More examples of CSS Print selectors and properties can be found here: [[CSS Print examples]]
-https://pagedjs.org/documentation/5-web-design-for-print/#crop-and-cross-marks
-=== page selectors ===
-* <code>@page :left</code>, <code>@page :right</code>
-* <code>@page :first</code>
-* <code>@page :blank</code>
-* <code>@page :nth(1)</code> (not [yet] supported atm)
-* <code>@page: groupname</code> + <code>@page groupname</code> (not [yet] supported atm)
-<syntaxhighlight lang="css">
-@page :first{
-    background-color: MediumPurple;
-}
-@page :left{
-    background-color: pink;
-}
-@page :right{
-    background-color: yellow;
-}
-</syntaxhighlight>
-https://developer.mozilla.org/en-US/docs/Web/CSS/@page
-=== @page margin at-rules ===
-* <code>@top-left{}</code> (not [yet] supported atm)
-* <code>@left-bottom{}</code> (not [yet] supported atm)
-* <code>@bottom-center{}</code> (not [yet] supported atm)
-* etc.
-<syntaxhighlight lang="css">
-@page{
-    @bottom-center{
-        background-color: aqua;
-        content: "This is a small note in the bottom margin."
-    }
-}
-</syntaxhighlight>
-https://developer.mozilla.org/en-US/docs/Web/CSS/@page#margin_at-rules
-[[File:Margin-boxes.png|200px]]
+==CSS Print documentation==
-<small>@page margin at-rules boxes, [https://pagedjs.org/images/margin-boxes.png image from Paged.js].</small>
+also called referred to as "CSS Paged Media"
-===page breaks===
+* '''supported by Weasyprint + Paged.js''': https://www.w3.org/TR/css-page-3/ - all properties currently in the CSS Paged Media Module draft
+* '''partially supported''': https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media - the properties that are implemented by some browsers
+* '''Paged.js''': https://pagedjs.org/documentation/ - official project documentation
+* '''Weasyprint''': https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css - list of supported CSS properties in Weasyprint
-* <code>break-before</code>
+Media queries: @media print, @media screen
-* <code>break-after</code>
-<syntaxhighlight lang="css">
+* https://developer.mozilla.org/en-US/docs/Web/CSS/@media
-h1 {
+* https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
-    break-after: always;
-}
-</syntaxhighlight>
-https://devdocs.io/css/break-before
-https://devdocs.io/css/break-after
-=== running headers and footers ===
-* <code>content()</code>, <code>string()</code> - named strings (not [yet] supported atm)
-* <code>running()</code>, <code>element()</code> - running elements (not [yet] supported atm)
-<syntaxhighlight lang="css">
-@page{
-    @top-center{
-        background-color: lavendar;
-        content: string(myTitle);
-    }
-}
-h1{
-    string-set: myTitle content(text);
-}
-</syntaxhighlight>
-https://pagedjs.org/documentation/7-generated-content-in-margin-boxes/#named-string%3A-classical-running-headers%2Ffooters
-===page counters===
-* <code>counter()</code> (not [yet] supported atm)
-<syntaxhighlight lang="css">
-@page{
-    @bottom-center{
-        content: counter(page);
-    }
-}
-</syntaxhighlight>
-https://www.w3.org/TR/css-page-3/#page-based-counters
-=== cross-referencing ===
-* <code>target-counter()</code> (not [yet] supported atm)
-* <code>target-text()</code> (not [yet] supported atm)
-<syntaxhighlight lang="html">
-<h1 id="maintitle">Protocols for an Active Archive (shownotes week 3)</h1>
-<p>Some text that refer to the <a class="link" href="#maintitle">title</a>.</p>
-</syntaxhighlight>
-<syntaxhighlight lang="css">
-.link::after {
-  content: " (which is: " target-text(attr(href url)) ")";
-}
-</syntaxhighlight>
-https://www.w3.org/TR/css-gcpm-3/#target-counter + https://pagedjs.org/documentation/-cross-references/#target-counter()
+Kiara's great listing of css-print links:
-https://www.w3.org/TR/css-gcpm-3/#target-text + https://pagedjs.org/documentation/-cross-references/#target-text()
+* https://pzwiki.wdka.nl/mediadesign/User:Kiara/Code#CSS-print
 ==CSS Print tools==