Paged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative and it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet. Until we have formal accessible documentation for paged.js, here is a list of links for those who would like to start using paged.js: You can also find below the features we are supporting right now. This text is an extract from the Editoria book. Page rules The page rules must be set up in the @print media query. @media print{ } Size The size of the pages in a book can be defined by either width and height (in inches or millimeters) or a paper size such as A5 or Letter. It must be the same for all the pages in the book and will be inferred only from the root @page. @page { size: A5; } # or @page { size: 140mm 200mm; } Margins The margin command defines the top, bottom, left, and right areas around the page’s content. @page { margin: 1in 2in .5in 2in; } Names Single pages or groups can be named, for instance as “cover” or “backmatter.” Named pages can have their own, more specific, styles and margins, and even different styles from the main rule. @page backmatter { margin: 20mm 30mm; background: yellow; } In HTML, these page groups are defined by adding the page name to a CSS selector. section.backmatter { page: backmatter; } Page selectors Blank pages The blank selector styles pages that have no content, e.g., pages automatically added to make sure a new chapter begins on the desired left or right page. @page :blank { @top-left { content: none; } } First page and nth page There are selectors for styling the first page or a specific page, targeted by its number (named n in the specification). @page :first { background: yellow; } @page :nth(5) { margin: 2in; } Left and right or recto and verso Typically, pages across a spread (a pair of pages) have symmetrical margins and are centered on the gutter. If, however, the inner margin needs to be larger or smaller, the selector to style left and right pages can make that change. @page :left { margin-right: 2in; } @page :right { margin-left: 2in; } Margin boxes The margins of a page are divided into sixteen named boxes, each with its own border, padding, and content area. They’re set within the @page query. A box is named based on its position: for example, @top-left, @bottom-right-corner, or @left-middle (see all rules). By default, the size is determined by the page area. Margin boxes are typically used to display running headers, running footers, page numbers, and other content more likely to be found in a book than on a website. The content of the box is governed by CSS properties.   To select these margin boxes and add content to them, use the following example: @page { @top-center { content: “Moby-Dick”; } } Generated content CSS counters css-counter is a CSS property that lets you count elements within your content. For example, you might want to add a number before each figure caption. To do so, you would reset the counter for the <body> , increment it any time a caption appears in the content, and display that number in a ::before pseudo-element. body { counter-reset: figureNumber; } figcaption { …

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply