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.

Filter by
Sorted by
Tagged with
0 votes
1 answer
27 views

Why is @page :first {...} working strange?

I have several Dita Topics that are combined into one map. The map should get a cover image. I have inserted this using css (as shown in the code). Unfortunately, this is not only displayed on the ...
MrsHappiness's user avatar
0 votes
0 answers
15 views

How to apply @page css role to only one component in react project

I'm using Tailwind with React and I have a React component with a very long table that will be printed over multiple pages, I'm looping over an API response and displaying that table. I need to add a ...
Ruby's user avatar
  • 2,309
0 votes
0 answers
54 views

CSS paged media - impossible to style elements on the first page differently

we have a different space and margins on the first page (as opposed ro all others) and so we need to style some items in the contnet differently if they appear on the first page. The content is user ...
Hurda's user avatar
  • 4,645
0 votes
0 answers
130 views

Using CSS Paged media, I want to create one type of header for first page and a different type for the rest of the pages

I have an HTML which defines the textual content of a letter. I need to use CSS Paged Media and PagedJS Polyfill to define one type of header for the first page and another for the rest of the pages. ...
Narayanan's user avatar
  • 3,806
0 votes
0 answers
143 views

PagedJS aligning text on all pages to the same baseline grid

This post is specifically about Paged.js and paged media. I downloaded the Paged JS book_avanced-interface template that simulates pages on your screen to help during the creation of a web to print ...
delyodobrev's user avatar
0 votes
0 answers
120 views

Pagination HTML Page 1 of 10 in 2023

Creating dynamic HTML quotes that are being converted to PDF via RestPack.. Almost everything is perfect except being able to paginate upon printing(PDF) all the other css solutions seemed to have ...
Jason Miller's user avatar
0 votes
1 answer
105 views

HTML: Keeping h1 and h2 together

I am using Oxygen XML Editor’s built in DITA XML to HTML with CSS transformation to create a paged-media output. In each chapter, I want to start each section on a new page. To do that I added a css ...
PJPorter's user avatar
0 votes
0 answers
39 views

Alter div padding or margins only when element falls at top of page

I'm writing a book. My CSS styles for vertical spacing of various elements (chapter, section, subsection, etc.) work fine, except when the section, subsection, etc., element falls at the top of the ...
Kevin G's user avatar
-2 votes
1 answer
48 views

How to make the home page of the web page dynamically adjust the page media?

I'm using page media to define the home page of the web page, but it can't be dynamically adjusted, it can only be adjusted before each rendering, which is very inconvenient here is the css code: ....
Bruce Tsai's user avatar
2 votes
1 answer
187 views

Different CSS property values depending on @page selector

I need to display a "tab" on the right side of all :first and :right pages. The tabs must be in the same position on all pages. This is my mock HTML: <?xml version="1.0" ...
Diego Schiavon's user avatar
1 vote
2 answers
150 views

CSS: can I scale an image including its container?

I've got a section of text, with an image in between paragraphs. <p class="bodytext">aslkjfsdlkfj f ldflskl</p> <p class="image"><img src=1.png/></p> &...
Hobbes's user avatar
  • 1,996
2 votes
2 answers
7k views

HTML+CSS A4 page with automatic page breaks

I would like to print a HTML+CSS document to A4 paper. My simplified code is here: <html> <head> <style id="style_A4" media="print"> @page { size: ...
z32a7ul's user avatar
  • 3,695
0 votes
1 answer
488 views

Can I use CSS to override table cell widths?

I've got an HTML where the width of table cells is defined in mm (in the @style attribute). This is designed to fit on an A4 page (210 mm page width). I'm using CSS Paged Media. <?xml version="...
Hobbes's user avatar
  • 1,996
0 votes
1 answer
768 views

PagedJS overwrites CSS

I need to use Paged.js in combination with a custom CSS for tables. Paged.js constantly overwrites my style. I even added !important to all properties but Paged.js still overwrites them. Can I prevent ...
Tobias Wälde's user avatar
2 votes
1 answer
2k views

CSS paged media total number of pages minus cover pages

With converting HTML to PDF using paged-media CSS, I need to place the total number of pages excluding the cover pages (front and back) in the page footer. The below CSS is fine for counting all pages....
Aaron's user avatar
  • 95
3 votes
0 answers
7k views

Convert XML file to PDF using XSLT and CSS (with free software license)

I'm trying to convert XML report into PDF using XSLT and CSS. This PDF should include specific page numbering in the footer and e.g. page break after a particular table. From what I found this can be ...
bienieck's user avatar
0 votes
1 answer
529 views

@page margins cause fixed-position headers & footers to be hidden when printing

Trying to combine the use of CSS @page margins with fixed-position headers & footers. The problem so far is that @page margins do not allow fixed position elements to display beyond those margins. ...
WhatsYourFunction's user avatar
1 vote
1 answer
644 views

CSS Variables: how can I set a variable to a value that's present in the HTML?

In CSS Paged Media, there's a useful function called string-set which allows you to define a string once and use it everywhere: body { string-set: warningTextVar attr(data-var-TxtWarning);} .warning:...
Hobbes's user avatar
  • 1,996
9 votes
1 answer
3k views

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 ...
Ben's user avatar
  • 12.7k
0 votes
0 answers
56 views

How to make @page size work on small sizes

When using @page size, I can't make it display in preview to low sizes. For example, I have this @page size values: @media print { @page { size: 2.5in 4in; size: landscape; ...
g_b's user avatar
  • 11.9k
0 votes
1 answer
58 views

Does Antenna House 6.6 support HTML DOM classList toggling?

I have recently begun reading through the DITA 1.3 specification pdf (around 1300 pages). To save on eye strain I've set Adobe Reader to a dark theme. It seems simple, but some of the people I write ...
Aaron's user avatar
  • 95
1 vote
0 answers
227 views

CSS @print rules not breaking pages automatically on dynamic lengthy content

I'm trying to print a div which can be very lengthy after adding dynamic content inside, & I have currently declared CSS @print query properties to print only this div in my html on a A4 length ...
Hasintha Abeykoon's user avatar
0 votes
1 answer
280 views

Combining @page with other selectors

I have a CSS that contains elements that should appear conditionally. For most elements, this is easy: I have an attribute attached to the body element, and I can use that in the CSS: body[data-...
Hobbes's user avatar
  • 1,996
2 votes
5 answers
726 views

How to finetune the position of a list bullet/number

I've made a list in HTML: <ol class="listnumber"> <li class="listnumber"> <p class="listnumber">list number</p> </li> </ol> When I render this ...
Hobbes's user avatar
  • 1,996
0 votes
1 answer
180 views

With CSS Paged Media, is it possible to "stick" or absolutely position block elements to the top or bottom of a page?

In the CSS spec for paged media, is there a way to "stick" a block element to the top or bottom of a printed page, and have the text flow around it? I have some image blocks inline with other HTML (...
Deane's user avatar
  • 8,371
2 votes
0 answers
103 views

CSS @page margins not working on print preview or the physical printed pages

I'm experimenting with @page styles and trying to make them work, but I'm unable to do so even in the simplest use case. I have a simple HTML page with some paragraphs: <div id="content"> <...
GeForce RTX 4090's user avatar
0 votes
1 answer
159 views

How can I debug a CSS Paged Media template?

I'm working on a CSS Paged Media template, and I'm running into some issues with Paged Media-specific CSS items (e.g. @page): I've got a rule that applies a background-image on the last page of the ...
Hobbes's user avatar
  • 1,996
5 votes
1 answer
4k views

Running footer "element(footer)" in paged media appear only in last page

I am working on a paged css with running footers inside the margin boxes. Everything worked almost as expected until I was asked by the graphic designer to make a part of the footer bold and I could ...
Lila's user avatar
  • 539
5 votes
1 answer
4k views

HTML+CSS page breaks cutting text characters in half (@media print)

After switching to nested ordered lists, each having one or more li with a div, I get horrible page-breaks that cut the text in half. I wouldn't mind if the content had a page-break, but having it ...
Alberto's user avatar
  • 575
1 vote
1 answer
562 views

How can I make HTML table footer take available space on each page when printing on multiple pages?

I like to print a very long table on multiple pages. On each page I have a fixed header, multiple entries in body section with random heights, and a footer. Random entries should not break across ...
Hamed's user avatar
  • 1,361
-1 votes
3 answers
571 views

CSS: is there a way to insert the content of an attribute as text in my output?

Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1. Is there a way to display an object/text that only exists as an attribute? ...
Hobbes's user avatar
  • 1,996
0 votes
1 answer
1k views

To break html table row to next line to convert to pdf

I want to convert an HTML table into pdf to take a print. But while converting into pdf table row goes beyond the page so I want to break the table row to next line. Is there any HTML table attribute ...
Sravan kunnummal.'s user avatar
12 votes
10 answers
2k views

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. <p class="imagefloatright"><img src="step 1.png"/></p> <ol> <li> ...
Hobbes's user avatar
  • 1,996
2 votes
2 answers
5k views

Get Print Page width/height using Javascript on Chrome

I want to print an HTML page and get a bit more control on the print layout I get so I started by setting @page to a specific size (A4 portrait in my case) and now I need to check if some dynamic ...
AlfaTeK's user avatar
  • 7,547
0 votes
1 answer
100 views

Negative indents don't work?

I'm using CSS Paged Media to create a PDF. Most of my content is aligned normally, but I have a few paragraphs I want to give a negative indent: they should start 2.5 mm to the left of everything else....
Hobbes's user avatar
  • 1,996
0 votes
1 answer
616 views

How to structure pdf header(top-left and top-right) with complex html and styles with PDFRreactor?

I am using PDFReactor to generate pdfs. What is the best way to structure top of pdf using @top-left and @top-right with complex html tags like <a> tag instead of simple raw text like @top-right{...
saeed asalisaf's user avatar
1 vote
1 answer
1k views

Changing CSS running element counter style after few pages

I am generating PDF document using FlyingSaucer with page numbers in running header. What I am trying to achieve is to be able to change style of counter applied to running element used for header. ...
Krokiet's user avatar
  • 131
1 vote
1 answer
256 views

reference base64 data in multiple content properties

Instead of having the same base64 data multiple times, is there a way to define it once and reference it in multiple content properties? div#my_id1 { content: url(data:image/png;base64,...); } ...
Dill's user avatar
  • 1,943
2 votes
1 answer
54 views

How do I style Paged media elements

Neither google nor the @Page documentation nor this link has any info on this. I have the following code to show page numbers in a footer on the right of the page of the pdf I generate from html : @...
happybuddha's user avatar
  • 1,269
0 votes
2 answers
888 views

Style last element on every printed page differently

I have a list of elements (arbitrary length). However, when user is printing it, I want to change the style of the last element on every page. So far I tried using @page {.el:last-child...} but that ...
ierdna's user avatar
  • 5,863
8 votes
1 answer
1k views

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, ...
shawnseanshaun's user avatar
1 vote
2 answers
2k views

Selecting the last element on page (paged media)

I want to select the last element on a printed page. For example, given this HTML (assuming the printed page has a height of 100px): <!-- other content before --> <div id="TheThing"> &...
DJL's user avatar
  • 2,060
6 votes
1 answer
5k views

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 ...
Luiz Paulo's user avatar
0 votes
3 answers
371 views

Start first page with `:right` css page rules?

I have defined @page :left and :right margins like this: @page :left { margin-left: 0.75in; margin-right: 0.25in; } @page :right { margin-right: 0.75in; margin-left: 0.25in; } When I print ...
ErikR's user avatar
  • 51.6k
-2 votes
3 answers
5k views

Javascript print multiple divs on different pages

I need to print on A4 paper with each <div> starting on different pages <div id="1"> //content </div> <div id="2"> //content </div> <div id="3"...
Gigi's user avatar
  • 375
3 votes
1 answer
873 views

Using custom properties with @page rules

I'm trying to use css custom properties together with @page rules, but it does not seem to work. It kind of make sense since css variables cascade and the :root selector and the @page rule don't have ...
user1415785's user avatar
0 votes
0 answers
270 views

Printing page uses wrong media query breakpoint

I'm working on a 'print preview' page where we're rendering a separate HTML document so the user can then print it. I'm running into an issue where printing to 8.5 x 11, it's taking on media query ...
DA.'s user avatar
  • 40.1k
1 vote
1 answer
2k views

How does vertical text work for table cells in the paged media module?

I work with the Antenna House Formatter tool (v6.3) in order to render PDF files out of html documents with attached css3 (paged media module). I want to rotate the text in a table cell by 90° ...
garlicDoge's user avatar
5 votes
2 answers
13k views

Print site logo just on first page (@media print )

I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just ...
Mile Mijatović's user avatar
0 votes
0 answers
1k views

While printing a div using window.print(), the margins in @page{ } are not getting applied

HTML: <input type="button" onclick="printDiv('Invoice')" value="print a div!"/> <div id="Invoice"> <!-- Some Content--> </div> CSS: <head><style type="text/css" ...
Mayur Bhandari's user avatar