CSS print group the techniques and tools to style the content for print media or for screens in print preview mode. With CSS, you can define page breaks, control printable area, style left and right pages differently, etc.
Questions tagged [css-print]
37 questions
10
votes
4 answers
Printing in Chrome is loading preview forever
On my website, printing has stopped work with Google Chrome (version 81 on Linux, if that matters). The print preview window is stuck with showing "Loading preview...".
While doing this, Chrome prints the following message on the…
Bob
- 5,510
- 9
- 48
- 80
9
votes
3 answers
CSS - How to count total number of pages?
I'm trying to show the number of pages on PDF file.
So in the header I put this css:
.page-number:after {
counter-increment: pages;
content: counter(page) " of " counter(pages);
}
Html:
Page
But it returns…
user3242861
- 1,839
- 12
- 48
- 93
6
votes
0 answers
Avoid page-break after specific tr row
First of all, I found no duplicate of this, since the problem is not trying to avoid the break inside a row (this already works well) and I am not allowed to repeat headers on the next page.
Misc. threads that did not help with the problem but are…
Tom
- 1,357
- 2
- 13
- 32
4
votes
2 answers
chrome print layout and more setting missing on my web page
I'm working on a web application and I'm using angular 7, I didn't use any specific css for page, but when I'm going to print a web page, more setting in chrome print is not available and missing as shown in below image:
But in every other page on…
Jalaleddin Hosseini
- 2,142
- 2
- 25
- 28
4
votes
1 answer
CSS print and Flexbox
Hello I would like to create some page using css print.
I looked around and the web I tried some stuff but saddly the alignment is not working.
The Layout I want to produce:
here is my html
....…
Felox
- 503
- 3
- 10
- 23
3
votes
0 answers
CSS - How to create full page background on print but keep content margin?
I am trying to create PDF files from HTML. Now I want to apply a Background on my pages.
But @page {background: blue;} seems to be not supported.
I tried to add the background to the body but this causes other issues. At first, I need to specify…
Luxaaa
- 119
- 1
- 4
3
votes
1 answer
Controlling margins when making a PDF using Playwright
When making a PDF from a headless chrome Playwright session (code below) I get the PDF on the left, whereas if I make it through the save to pdf in chrome, I get the second output.
I have set the margins explicitly and used preferCSSPageSize: true…
Ben
- 12,614
- 4
- 37
- 69
3
votes
0 answers
target-counter not working for css print toc page
I have a web page which I am converting to a PDF, nearly everything is working as I want however for some reason the below:
@media print {
ul.md-nav__list a::after {
content: leader('.') target-counter(attr(href), page);
}
}
Does…
DevWithZachary
- 3,545
- 11
- 49
- 101
3
votes
3 answers
How do I make table border black on bootstrap for print
I want to print my page where there's table in it. When i print it it always change to bootstrap default color. I'm using ctrl+p / cmd+p for printing. I'm using bootstrap 4 and laravel 5.7
i've tried to use !important; still not working
My…
Martin Christopher
- 389
- 1
- 7
- 21
3
votes
3 answers
How can I add headers and footers to every page of html content I'm printing from Mobile Safari?
I'm tasked with printing html out as a report. I need to add headers and footers to every page in the report.
I've been using the technique explained here: https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a…
Karen Zilles
- 7,633
- 3
- 34
- 33
2
votes
0 answers
CSS and different @page for multiple pages
I have a request to style different pages with different sizes (A3, A2 etc.).
Is there a possibility to use different @pages for different pages with different sizes?
I would need something like this:
@page 1{
size: A3 landscape;
…
vished2000
- 164
- 1
- 11
2
votes
1 answer
Prevent page break between thead and tbody when printing
I have some dynamic content, and when printing I found browsers will insert a page break between a tables and the following , resulting in things like this screenshot depending on the preceding dynamic content.
I want it to move the…
Fire Lancer
- 29,364
- 31
- 116
- 182
2
votes
1 answer
Force table title and its first row to be on the same page when printed
is it possible to force table and its first row of content to be on the same page when printing it? This problem arises when there are some other contents preceding the table. The table looks something like the following:
