|
|
| (15 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| ==CSS==
| | See: [[CSS Print]] |
| | |
| Cascading Style Sheets
| |
| | |
| <syntaxhighlight lang="css">
| |
| body{
| |
| background-color: pink;
| |
| color: green;
| |
| margin: 100px;
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| ===CSS1, CSS2.1, CSS3===
| |
| | |
| [[File:Screenshot from 2023-10-03 15-11-04.png|600px]]
| |
| | |
| <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===
| |
| | |
| <blockquote>
| |
| 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.
| |
| </blockquote>
| |
| | |
| https://www.w3.org/TR/css-page-3/ (published version)
| |
| | |
| https://drafts.csswg.org/css-page/#blank-pseudo (current draft)
| |
| | |
| ===Not [yet] supported atm===
| |
| | |
| Most of the Paged Media properties are not supported by modern browsers 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 without using these properties!
| |
| | |
| 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/.
| |
| | |
| ===page rules===
| |
| | |
| * <code>@page</code>
| |
| ** <code>size</code>
| |
| ** <code>margin</code>
| |
| ** <code>bleed</code> (not [yet] supported atm)
| |
| ** <code>marks</code> (not [yet] supported atm)
| |
| | |
| <syntaxhighlight lang="css">
| |
| @page{
| |
| size: A4 portrait;
| |
| margin: 20mm 30mm;
| |
| bleed: 3mm;
| |
| marks: crop;
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| https://developer.mozilla.org/en-US/docs/Web/CSS/@page
| |
| | |
| 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: "My file."
| |
| }
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| https://developer.mozilla.org/en-US/docs/Web/CSS/@page#margin_at-rules
| |
| | |
| | |
| [[File:Margin-boxes.png|200px]]
| |
| | |
| <small>@page margin at-rules boxes, [https://pagedjs.org/images/margin-boxes.png image from Paged.js].</small>
| |
| | |
| ===page breaks===
| |
| | |
| * <code>break-before</code>
| |
| * <code>break-after</code>
| |
| | |
| <syntaxhighlight lang="css">
| |
| h1 {
| |
| break-before: always;
| |
| }
| |
| section {
| |
| break-after: left;
| |
| }
| |
| </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{
| |
| content: string(myTitle);
| |
| }
| |
| }
| |
| h1{
| |
| position: running(myTitle);
| |
| }
| |
| </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="chapter-1">Chapter 1. The beginning</h1>
| |
| | |
| <p>Some text that refer to the <a class="link" href="#chapter-1">chapter</a>.</p>
| |
| </syntaxhighlight>
| |
| | |
| <syntaxhighlight lang="css">
| |
| .link::after {
| |
| content: "(see " target-text(attr(href url)) ")";
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| https://www.w3.org/TR/css-gcpm-3/#target-counter + https://pagedjs.org/documentation/-cross-references/#target-counter()
| |
| | |
| https://www.w3.org/TR/css-gcpm-3/#target-text + https://pagedjs.org/documentation/-cross-references/#target-text()
| |
| | |
| ==See also==
| |
| | |
| * [[Paged Media CSS examples]]
| |
| | |
| [[Category:Cookbook]]
| |
| [[Category:PagedMedia]]
| |
XPUB & Lens-Based wiki