I have css for print as simple as this:
#page {
#top-left {
content: "TOP SECRET";
color: red
}
#bottom-center {
content: counter(page);
font-style: italic
}
}
But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?
EDIT: #page is supported by none ref
However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.
You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/
This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.
It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli
Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, #page won't work in a browser, nor (as far as I know) was it intended to.
Related
Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.
Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.
Chrome
f and i is combined multiple times
Edge
IE11
In this case I was looking for a way to turn it off.
As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:
font-feature-settings: "liga" 0;
This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:
font-variant-ligatures: none;
These two properties does the exact same thing, however, the latter one is recommended one.
MDN:
Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.
In particular, this CSS property shouldn't be used to enable small caps.
I encountered a similar problem and was directed here by Google.
I never want ligatures on any webpage.
(When I print a webpage to PDF and use the text-to-speech engine on my PDF reader, it skips speaking the ligatures.)
Here is one solution that works for me:
Open the webpage on Chrome/linux (may work on other desktop OSes too).
Install the StyleBot extension of Google Chrome. Then, in its options, click "styles" and then "edit global stylesheet". Enter the following (based on the answer of #AwesomeGuy).
body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
Click "enable global stylesheet". Voila, Chrome never seems to render ligatures again (it renders the characters separately).
Also, when I ask Chrome to print web pages to PDFs, characters are rendered separately.
Add this as a bookmark and click once when printing.
javascript: void(function () {
var css = `
* {
font-variant-ligatures: none!important;
font-feature-settings: "liga" 0!important;
}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
/*This is required for IE8 and below.*/
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
/*It is not necessary to set a delay.*/
setTimeout(function () {
window.print();
}, 2000);
})()
Adding Javascript Applets to Chrome’s Bookmarks
https://clicknathan.com/2010/07/12/how-to-add-javascript-applets-to-as-google-chrome-bookmarks/
Open a New Tab in Chrome. Command+T on a Mac, Ctrl+T on a Windows.
Google Toolbar as seen in Chrome's New TabRight click on the Bookmarks Toolbar. It’s a gray colored box like the one pictured here.
Select “Add Page” from the contextual menu that appears.
Give the Bookmark a name. You could Google “Baby Names” if you can’t come up with one. I like Shepherd or Samson or even Samsonite if you have aspirations of a career in luggage design, sales or airport security.
Paste the Javascript applet into the URL field.
Save that son of a gun and you’re on your way to finishing this tutorial!
Does anyone know of a tool out there that previews #page CSS rules? Failing that, is there something out there that I could use to print a document with full support for these rules?
http://www.w3.org/TR/CSS2/page.html
Opera comes closest. It supports everything except for the left/right page breaks (treats them as always) but still requires you to print to something to see them (can't see a live print preview).
Displaying Print preview
In Opera 12.16 (and all version prior to it, but unfortuntely not in Opera 16+), you can press Control + Shift + P to display Print preview, which will use print CSS media to display the page. If, for any reason, this shortcut does not work for you, you need to add it to keyboard shortcuts:
Open Opera Preferences (Control + F12)
Switch to Advanced tab → Shortcuts
Click Edit… button on the right side of Keyboard Setup part
Click New
Fill in "p ctrl shift" in first column (Input context and shortcuts) and "Print preview" in second (Actions)
OK, OK, refresh the page and try it now ;-)
Using #page CSS rules
… should be simple, everything works just fine in Opera (again, only 12.16-). Just remember to put #page CSS rules in #media print section of stylesheet, like this:
#media print {
#page {
margin: 0.7cm 0.85cm;
}
#page :first {
margin-top: 5cm;
}
#page :left {
margin-right: 2.5cm;
}
#page :right {
margin-left: 2.5cm;
}
}
I'm using these few rules to style my documents for better printing (notice extra margin on inner sides of pages, leaving space for binding). Hope it helps!
Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari
#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 have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.