Questions tagged [css-paged-media]

CSS Paged Media describes the page model that partitions a flow into pages. It defines the page model and paged media, adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation, enables page numbering and running headers/footers. Use this tag for questions related CSS Paged Media questions, as described on the W3C page.

CSS3 Paged Media describes how:

  • page breaks are created and avoided;
  • the page properties such as size, orientation, margins, border, and padding are specified;
  • headers and footers are established within the page margins;
  • content such as page counters are placed in the headers and footers;
  • and orphans and widows can be controlled.

This module defines a page model that specifies how a document is formatted within a rectangular area, called the page box, that has finite width and height.

Although CSS3 does not specify how user agents transfer page boxes to sheets, it does include certain mechanisms for telling user agents about the intended page sheet size and orientation. In the general case, CSS3 assumes that one page box will be transferred to one surface of similar size.

References:

77 questions
58
votes
8 answers

How to do page numbering in header/footer htmls with wkhtmltopdf?

I'm developing an electronic invoicing system, and one of our features is generating PDFs of the invoices, and mailing them. We have multiple templates for invoices, and will create more later, so we decided to use HTML templates, generate HTML…
Tamás Barta
  • 1,472
  • 1
  • 17
  • 23
49
votes
3 answers

Creating page headers and footers using CSS for print

I'm creating a PDF using Flying Saucer (which dumps out CSS/HTML to iText to a PDF) and I'm trying to use CSS3 to apply an image header and footer to each page. I'd essentially like to put this div in the top left of each page:
Naftuli Kay
  • 75,812
  • 80
  • 244
  • 374
43
votes
5 answers

Browser Support for CSS Page Numbers

So I am aware of this option: Page numbers with CSS/HTML. It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome,…
David Fritsch
  • 3,641
  • 2
  • 14
  • 25
20
votes
4 answers

header and footer in each page in print mode with css

I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report header in each page but it didn't work for me.I try opera,IE9,Firefox,Google…
Masoumeh Karvar
  • 705
  • 1
  • 12
  • 27
17
votes
1 answer

Orphan CSS: How avoid headers (h1, h2...) on bottom page?

I have a large HTML document with headers (h1, h2, h3...) and paragraphs. When I print the document, I want that, automatically, headers at bottom of document go to next page: How can I do? I use "orphans: 3" CSS with paragraphs and works with "p"…
Manz
  • 897
  • 12
  • 24
15
votes
1 answer

Change document flow on page break to fill space

When printing (or, in general, displaying document on paged media), is it possible to reflow document elements so that when some element (eg. image) is shifted to next page because it doesn't fit in available space on actual page, elements following…
FurloSK
  • 411
  • 2
  • 14
12
votes
10 answers

CSS floats: how to keep the float near the text it belongs to?

I've got a procedure that consists of steps. Some steps are accompanied by an image.

  1. Step 1

    Hobbes
    • 1,742
    • 2
    • 14
    • 30
8
votes
0 answers

Controlling page and column breaks using paged.js

I have a 2 column layout that is destined for print. h2–5 are within the column and h1s span both columns. I'm using Paged.js for pagination. These two pages show acceptable layouts: But If there's a situation where a heading is at the bottom of a…
Ben
  • 8,686
  • 3
  • 25
  • 54
6
votes
1 answer

How to setup counters for target-counters

In paged media, the CSS property target-counters can be used to include multiple counters. The spec gives the following example (simplified): a::after { content: "see section " target-counters(attr(href, url), section, ".") } that should output…
phihag
  • 245,801
  • 63
  • 407
  • 443
6
votes
1 answer

Has the paged media module been abandoned?

I've followed the steps in this article to arrange my page for printing. However, only a couple of things seem to actually work. I can't get selectors such as @top-center to work at all in Chrome, Firefox or Opera, even though caniuse says it should…
Shawn Beachy
  • 870
  • 1
  • 12
  • 23
6
votes
2 answers

CSS paged media :last page selector

I need to know if I can modify content on the last page with the :last selector. I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page. But I can't find it in the documentation and it…
Niel
  • 1,487
  • 17
  • 37
5
votes
1 answer

When printing tables in Google Chrome, content overlaps header

I'm having problems with Google Chrome when printing a table with HTML code within it. I need to create a document with headers and, to accomplish that, I'm using a table with a thead element, so the browser will replicate it for every page on the…
Luiz Paulo
  • 371
  • 5
  • 14
5
votes
2 answers

css3 page media not working in any browser

Hello I have used CSS3 page media module to print html content to PDF directly from browser but I am not getting any browser to work it on. My working is below.