In CSS, with:
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
I can have page numbers displayed at the top of every page when the page is printed. This works great. But now, how can I make it so the page number starts with 2 instead of 1? Can I do that by modifying the CSS rule above?
If you are using Flying Saucer (which was my case), use the following CSS:
table { -fs-table-paginate: paginate; }
It works like a charm. And Flying Saucer rocks :). Really highly recommended.
Try:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
using page 1 will reset the starting point of the counter. You can use any integer to start counting from. The default is 0.
After playing with Flying Saucer a bit, I guess there's no way to do this with CSS (or it's a very complicated one), as "page"/"pages" seem to be internal CSS variables. Perhaps it gets better with CSS 3, there seems to be a calc() function, so counter(calc(page+1)) could perhaps work...
But there is another way to get the PDF starting with page 2. You can add a blank first page to the PDF by adding this line to the xhtml file:
<h1 style="page-break-before:always"></h1>
Then you can either print only pages 2-... of the PDF when using a printer or remove the first page from the PDF with some PDF editor.
Have you seen the CSS documentation about counters? see here It seems to me that you can call the counter-reset. By default counters are set to 0. If in your Body tag you did a "content-reset: page 1;" then it should force the first page to start at 2 instead of 1.
Posting this for someone else viewing this page. You can also look into another stackoverflow post provided below. This has worked for me.
flying saucer - page count with css
.seq-start{
-fs-page-sequence: start;
}
Don't know if this works, but why don't you try counter(page+1)?
Related
I'm using modified by my team PHP tool for converting HTML to PDF. My task is to add number of pages in bottom corner. I never know how many pages I'll have, I don't know after which part I may get a page break.
I can't use Javascript.
I was thinking about using CSS counter, but I have no idea if it's good way, how can I check if page had a break...
Try this :
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
From This Post
How can I display the "$" sign through CSS Content:" " I've tried all kinds of different codes. Putting just
div.example {Content:"$1000";}
displays on the site like "00".
Trying to do this before resorting to Javascript.
.dollar:before {
content: '$';
}
You can use the following code for displaying the dollar sign in the CSS content property
div.example { content: "\0024"; }
There isn't quite enough HTML to go on, but to take a shot:
The CSS property content is to be used with ::before and ::afterand when i put a $ inside my content declaration, everything works...
See JSfiddle here
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
This is the only way i found to display the page numbers as 'Page 5 of 10' for example. However it does not seem to be working. I tried it in a simple HTML page but it didn't work.
I want to display the page number any where in the page using plain html/css.
Did anyone succeed to make it work? If so, I appreciate your support.
You quote a (by and large correct) CSS snippet to create PDF- and print output ("paged media") from HTML input, but you say: "it does not seem to be working".
Then, two sentences further down, you say: "I want to display the page number any where in the page".
First, point two.
There is no way to put the page numbers into the HTML website itself. This feature is only for paged media, such as PDF or print output created from the HTML.
So, it's only for PDF or print output. But even there: there's also no way to put the page numbers on the PDF or print page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page.
Second, point one.
Now for putting the page number info into these spots where they are possible...
Since you do not elaborate what exactly does not work with your setup, let me give you a rundown:
Create a file my.css and put the following content into it (it's not the minimum required by your question, but adds a few more goodies for you to experiment with).
Also, at first I'll explain how to use it with PrinceXML.
#page { size: A4 landscape;
background: gray;
border: solid 1pt blue;
padding: 9pt;
margin: 18pt 18pt 18pt 18pt;
font-family: "Helvetica Narrow";
#top-left {
content: 'PrivateCopy';
color: red;
font-style: bolditalic;
}
#top {
content: string(doctitle);
}
#bottom-left {
content: 'My Super-Duper Manual';
font-style: bold;
}
#top-right {
content: "Page " counter(page) " of " counter(pages);
font-style: bold;
}
#bottom {
content: string(paratitle);
}
}
Save the file somewhere on your disk.
Now call the PrinceXML commandline and use -s my.css to apply the style sheet:
prince \
--verbose \
--javascript \
--style=/path/to/my.css \
http://stackoverflow.com/questions/12061835/css-page-counter \
--output=my-css-page-counter-question.pdf
(Obviously, you need to adapt your path to the my.css stylesheet file. But then...) Voila!, your Stackoverflow question in a PDF...
Of course you can extend my.css with many more features. And of course, you can use it for any conversion of HTML files, even local ones mixed with remote ones:
prince \
--verbose \
--javascript \
-s /path/to/my.css \
/home/nada.adly/Documents/title.html \
/home/nada.adly/Documents/chapter_1.html \
/home/nada.adly/Documents/chapter_2.html \
http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
http://stackoverflow.com/questions/tagged/css \
-o random.pdf
Now for using CSS aside from and without PrinceXML, and for direct print output. (Of course you can always print the PDF generated by PrinceXML -- but maybe you don't want to use Prince at all?)
Again, you are not clear about the scope of your question:
Do you as a browser user want to get these page numbers into any website printout you may do?
Or do you as a webmaster responsible for a website want to make sure that these page numbers get in into the printouts your website visitors do from your content?
I'll not elaborate any of these two points here (since I may be completely missing your point), but...
...you should google for 'User Style Sheets' and for 'print.css' to find out where exactly to store this CSS code (because user style sheet locations are different from browser to browser);
...the CSS code is the same for any one of the two purposes (webmaster's style sheet or user style sheet).
This works only when HTML page is printed.
Try to print or save your HTML page as .xps . You will see the page numbers.
If you are using Prince, all will work fine and you can safely rely on the newest CSS3 standards which will allow you to produce print-quality PDFs.
If you are not using prince, you are out of luck. There are multiple options for working around, but none of the really do the job.
#page { anything }
is close to useless in the browser world when it comes to pagination. It seems fine for some margins in some browsers.
Another problem is the missing implementation of margin-box like "#top-right". None of the browser I tested even heard of them :-) Again, Prince knows them all.
Chrome doesn't use the whole #page approach and has a checkbox in the chrome-print dialog, which allows you to embed very crude pagination ("1/2"). It is not configurable in any way and completely ignores any page number related css.
Firefox is a much better candidate, at least there is a vaild workaround, but the problem here is, that the counters(pages) is always zero. So if you want to show the amount of total pages, this approach leads nowhere.
For browsers, it will utlimately boil down to the used HTML/CSS rendering engine. All libraries, stand-alone solutions and embedded browser rely on the underlying renderer and if the feature is not or badly support, the framework can'T do anything about it (like awesomoium, cefsharp etc.).
If you are printing using a browser, not many browsers (as of December 2013) support all of the CSS Paged Media specification. On the whole, you are usually pretty sure of getting page-breaks supported, but headers and footers don't work in any browser I have tested.
However, if I print using PrinceXML, it works fine:
"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf
I get all my headers and footers, page numbers, dynamic content.
You'll find that more and more browsers / rendering engines will add full support as the specification matures.
I'm working on a site for one of my in-laws, who insisted on using Joomla so that he could update the content himself in the future. That being said, one of the things that I developed for him was a character generator for a game that he and his brothers created. That is working fine. The issue is that they want a way to print the final sheets off when finished, and to do so without all of the menus, banners, etc. I was told that the simplest way to handle that was to pass ?tmpl=component in the URL to strip everything out, which is also working.
The problem that I am running into is that the CSS in the Joomla template is causing the tables to behave in a way that I cannot figure out how to correct. The page consists of nested tables, with widths defined in terms of % (currently), but it seems that the specifically defined widths are being ignored in favor of the widths hugging the largest cell. To see what I'm talking about:
The trouble page: http://www.basementgames.com/tools/character-generator.html?s=36&tmpl=component
What the page should look like: http://www.basementgames.com/char_gen.php?s=36
This is the exact same code in both places, with the first being inside Joomla, and thus subject to the CSS of the template. I don't know much about CSS, and I'm driving myself crazy trying to figure out what to override to make the first example look like the second. Any thoughts?
You can run this script on the page and it will remove the offending print.css file on page load:
<script>
if (window.location.href.indexOf('/character-generator.html') > 0 &&
window.location.href.indexOf('tmpl=component') > 0) {
(function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('/print.css') > 0) {
links[i].href = '';
}
}
})();
}
</script>
http://jfcoder.com/test/character-generator.html?tmpl=component
Note, it only runs on the character-generator.html page with a tmpl=component in the query string. It also has to run after the link elements, as well, so it should be inserted into the body tag or at the very bottom of the head tag. Since you have MooTools available, you could also use DOMReady().
I have an HTML report, with each print page contained by a <div class="page">. The page class is defined as
width: 180mm;
height: 250mm;
page-break-after: always;
background-position: centre top;
background-image: url(Images/MainBanner.png);
background-repeat: no-repeat;
padding-top: 30mm;
After making a few changes to my report content, when I call abcPDF to convert the report to PDF, suddenly I'm getting a blank page inserted after every real report page. I don't want to roll back the changes I've just made to remove this problem, so I'm hoping someone may know why the extra pages are being inserted.
I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page. So I used the following code to eliminate the last page:
MyDoc.Delete(MyDoc.Page);
This however lead to a different kind of a problem. On development server, which has IE 8 I get an extra blank page and on production where I have IE6, I get no extra blank page. So I have emailed the support team at websupergoo to show me a way to look for a blank page. The idea is to iterate through a pdf and identify all blank pages and delete them using above logic.
And I second Jakkwylde's opinion. Websupergoo folks are extremely helpful and prompt in responding. I had another problem getting ABCpdf to work under 64 bit and had spent almost a day trying to figure it out. They provided me multiple scenarios which I could try out. Their support was right on the money and I got my app up and running in minutes.
protected void RemoveBlankPages(Doc pdf)
{
for (int i = pdf.PageCount; i > 0; i--)
{
pdf.PageNumber = i;
//get the pdf content
string textContent = pdf.GetText("Text");
//delete the page if it is blank
if (string.IsNullOrEmpty(textContent))
pdf.Delete(pdf.Page);
}
}
I've found abcPDF to be strange and unpredictable. That being said, what may be happening is that the combination of the page size and page-break-after may be the culprit. Reduce your page height and/or remove the page break.
One thing worth revisiting is the validity of your HTML markup if you are using the AddImageUrl method. Instances where the rendered PDF is not as expected can result from bad markup, busted tags, etc.
For what it's worth, WebSuperGoo has excellent support and respond great when you encounter anomalies. Often they can advise a work around or provide alternatives to your implementation if you send them your source code.
Kush is correct in that "I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page."
If a div has "page-break-after:always" IE will literally always start a new page, and if nothing is added it will just print blank. Firefox does not.
abcpdf uses IE8s rendering engine, and as such makes a blank page. For purposes of the OP, just using an explicit height should solve the problem, and the engine will insert the page breaks for you.
I am trying to solve a similar issue, where I can't set the height explicitly because sometimes the content may take 2 pages. (Each page corresponds to a person, and each person should start on a new page when printed). I emailed abcpdf as well to see if they have a hack fix to detect the empty page, but was curious if anyone knows how to fix the underlying problem and css hack IE8 so as to make it not print the final page if empty. I'm guessing it's not possible, but wanted to make sure I'm not missing something obvious.
The AddImageURL() method of ABCPDF is loosely bind method which doesn't render html tightly within required area which causes new blank page.
try to use AddImageHTML() method to convert your desired HTML into PDF..
Doc theDoc = new Doc();
theDoc.Page = theDoc.AddPage();
int theID = 0;
theDoc.SetInfo(0, "CheckBgImages", "1");
theDoc.SetInfo(0, "RenderDelay", "5000");
theDoc.HtmlOptions.Engine = EngineType.MSHtml;
theID = theDoc.AddImageHtml(HTML);
while (true)
{
if (!theDoc.Chainable(theID))
break;
theDoc.Page = theDoc.AddPage();
theID = theDoc.AddImageToChain(theID);
}
for (int i = 0; i <= theDoc.PageCount; i++)
{
theDoc.PageNumber = i;
theDoc.Flatten();
}
theDoc.Save(HttpContext.Current.Server.MapPath(Path));
theDoc.Clear();
It will always give accurate results.
To avoid page breaking in the last page, I did something like this and it worked.
I made sure that the last page didn't have the page-break-after: always, this can be done with any templating or front-end framework like angularJS, but for this example I use blade templating (but any php will do...)
#if ($last_page)
<div class='footer last-page'>
#else
<div class='footer'>
and then I have this in my style sheet
.footer {
page-break-after:always;
}
.last-page {
page-break-after:avoid;
}
We had the same issue in production environment only but not in test environment. We only had page-brek-after used at multiple places in the html.
Fix for first issue: I spotted the issue by removing the page-brek-after attributes one by one and this finally gave me the DIV section where page break was causing by some of it's element.
I fixed the height of each elements inside the DIV and this finally fixed my issue without removing the page-break-after attribute.
Fix for similar issue: If you have a custom hard coded footer, make sure to check by increasing/decresing it's height and margine.
I had this same thing happen with html to pdf where abcpdf was adding a blank page with nothing but a footer on it before the rest of the content (as page 1). This would occur when my content included a table surrounded by a div where the div height was height:auto followed by a page-break-before: always. It only happened when the table data contained "", string.Empty, or a single line of text. If the table data contained 2 lines or more of text, the issue did not present.
I solved it by adding a min-hight: 1in style to the div that had height: auto.