|
|
Rank: Newbie
Groups: Member
Joined: 8/13/2014
Posts: 6
|
I have an HTML canvas element. I do not want it broken when printing. So I added a style as follows:
@media print {
canvas {
page-break-inside: avoid;
}
}
But it still breaks. I realize this can happen in some cases such as the canvas not fitting on a page. But this canvas is 150px tall and can easily be printed on a page.
To test this out, I generated an HTML file that will have the issue. I print from Chrome and it works fine. I convert to PDF with page breaks and the breaks appear inside the canvas.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
Our HTML to PDF converter does not use print media. It renders everything exactly the same as on screen. So it always use screen media.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 8/13/2014
Posts: 6
|
Makes sense. I removed the "@media print" and left the following:
canvas {
page-break-inside: avoid;
}
Chrome and IE still print it without a page break. The PDF conversion still does a page break.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
We tested this and it works fine. Note that "page-break-inside: avoid" will have no effect if the canvas is bigger than a page. In that case it will be split regardless.
If the canvas is smaller than a page but there isn't enough room on the current page to fit the entire canvas, then the converter will push it to the next page if you have page-break-inside:avoid, without page-break-inside:avoid the converter will split it in this case.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 8/13/2014
Posts: 6
|
OK, I'll review my code. I must have a problem on my end somewhere.
|
|