I would want show the page number at the bottom of my printable document. I found a source and follow an stackoverflow answer here but it does not help.
My current CSS to achieve this desire is like this:
body {
text-align: justify;
}
/* class to break into new page */
.pagebreak { page-break-before: always; }
#media print {
body {
font-size: 18px;
}
#bottom-right {
content: "ទំព័រទី " counter(page) " នៃ " counter(pages);
}
However, when I test print document, it does not show my page number at all.
What was wrong to my css? How can I do to achieve this result?
Thanks.
Edited
After I spent sometimes searched through this, I know of most major browser not support this #bottom-right. Any thought of it?
As of 12/3/2015, the margin boxes like #bottom-center don't appear to
be supported by the major browsers, as shown here. If you search for
"#bottom-center" you'll see a whole lot of red "not supported" boxes.
When you search the web it sounds like they should work but in reality
they're not supported yet. Some elements of paged media work great,
like page-break-after, but not the margin boxes. Source
However, there seems to be a solutions that works in Firefox.
Related
I've read through every SO question and article I can find on the topic and have tried every suggestion, but nothing has made any difference. I just need to print webpages like this one on mlb.com without cutting things in half at the page breaks. It might seem trivial but it's for someone who has been wrongfully imprisoned and can't do anything but sit and read for the next few years (and is a huge baseball fan), so any help would really be appreciated and make a difference.
I've tried many variations of the following, which I inserted at the bottom of the webpage's body (I also tried the bottom of its head) using Chrome's (and Firefox's) developer tools:
<style type="text/css">
#media print {
.view-header, .action, .pitches-exist {
break-inside: avoid !important;
break-before: auto !important;
overflow: visible !important;
float: none !important;
display: block !important;
position: static !important;
}
}
</style>
But when I tell the browser to save/print a PDF, things are still cut off at the bottom of every page like this:
Is there any good solution to this or will I need to try to find some hack that involves changing the absolute positions or margins of elements? Of course, that wouldn't be ideal, especially since I'm not a web developer. Thanks in advance for any help you can give.
Notes:
Please don't share any ideas that you haven't tested yourself and found to work on this particular webpage.
I'd prefer a solution that works in Chrome but would gladly settle for one that works in another browser.
indeed you add a bigger paper size in System printer setting
I've been turning the web upside down for the past hour or so but can't seem to find the solution for my rendering problem.
I'm using Rotativa (1.6.4) as the PDF creation library which was capable to reproduce the HTML I threw at it with almost 100% accuracy. Why almost; because it seems that charts I'm converting to PDF cause problems when chart doesn't fit the page and it should be transferred to the next page. Check the screenshot for more details.
As can be seen from the screenshot one chart is overlapping which happens for, to me, unknown reason.
I tried adding suggested page breakers but without any help:
.page-breaker {
display: block;
clear: both;
page-break-after: always;
}
Wrappers around charts have the following CSS rules:
.chartContainer {
float: left;
clear: both;
width: 100%;
height: 350px;
margin: 20px auto;
page-break-before: always;
page-break-after: always;
}
Not only does the PDF generated by Rotativa render incorrectly, the same thing goes for print preview in Chrome. So, the problem obviously is somewhere between page breaks and CSS - but the solution is still out there.
Any help would be appreciated.
Forget about adding page-break-before or page-break-after. The solution is to add page-break-inside: avoid !important rule. Rule should be added to the container/wrapper of the elements that could get broken in page break.
Whatever i've tried, it was not working. I found that page css contains
body{ display: -webkit-box; }
when I comment this line, page-break-* starts to work.
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
Is there any way to force Chrome to always print without headers and margins? Chrome keeps forgetting and it really messes up my cash register program (if the header is there, it tries to print the entire page, which is a lot of white space). If you have any CSS, Chrome settings, even hard-coded editing of Chrome itself: anything that can fix this would be appreciated.
If you want to change this via your website, you can try using css media queries to hide or rearrange elements for printing.
#media print {
/* All your print styles go here */
margin: 0;
#header, #footer, #nav {
display: none !important;
}
}
I had the same issue. I wanted to override the print options so that the browser's headers and footers did not display.
Putting #page {margin: 5mm;} into my CSS file worked perfectly. In fact if you use #page {margin: 0} the Headers and Footers option is not even displayed on the Print Preview (in Chrome, I have not yet tested other browsers.
I'm doing some styling for a printable brochure on my client's site, which could potentially contain long unordered lists of information.
My issue is when printing in Firefox the entire <UL> will break on to a new page instead of it's children <li>'s splitting, which means it doesn't flow with other content on the page.
I've found the CSS property page-break-inside is only supported in Opera and IE8, does anyone know of an alternative to this property or another method that I can use to prevent the entire list breaking on to a new page.
Cheers!
UPDATE [23.11.2011]:
I was able to use a work around on my issue, as the printed document is generated in response to a user's selection so this page is only ever going to be print I (very reluctantly) pushed semantics aside and removed the UL and replaced LI's with DIVs, which break correctly. The question still stands though, for anyone with a similar issue but using the same HTML for print & screen.
I will reproduce the problem I was having and post the necessary HTML & CSS as soon as I can.
Consider programmatically removing the UL tags for the print version. You should be able to get the LI elements to display the same with some styling.
JavaScript or even jQuery can handle this easily enough but I bet you could take care of this server side instead.
I know it's not technically valid HTML but sometimes you have to bend the rules when HTML/CSS doesn't offer you flexibility.
Credit goes to david walsh blog
#media screen {
.page-break { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
#media print {
.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
For slightly better browser support you could use this:
ul li {
page-break-after: avoid;
}
ul li:first-child {
page-break-after: auto;
}
Should work in IE7 too. But won't work in Firefox. Browsers just suck when it comes to printing.