I'm creating a TV schedule and it shouldn't have any print problems for at least one standard browser.
I need to put logo and title plus table headers on every page, after days of trying and searching I found out that Chrome wouldn't print table headers and position: fixed elements on every page because of this known bug.
Because of the capabilities such as printing background colors with -webkit-print-color-adjust: exact which I've heavily used and changing page borders with CSS #page property, I've customized my view to use Google Chrome, but now that I see it cannot print headers I'm looking for an alternatives which are:
To forget Chrome and start creating print view for another browser which needs to do tweaks to print background colors and change page margins (I'm afraid it's not possible).
To find a CSS/JS solution to make Google chrome to print table headers on every page.
TL; DR: Do you know any jQuery/JavaScript/etc. code to print table headers on every page in Chrome?
Yep, that's a Webkit/Chrome thing.
It won't print the thead on each page. FF for instance does.
What you could do to achieve something like this is use page-break.
Page break does only work on block elements, so you should style your tr's accordingly.
Like this:
tr{
display:block;
}
Now, you should start copying your thead and put it in at every Xth row with javascript:
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:
#media screen {
tbody .head{
display: none;
}
}
Now before each .head make the page break:
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/
Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.
I have posted a solution here that solves this problem and does not require you to try to preempt the natural page breaks with forced page breaks (a technique which is inherently unreliable and tends to waste paper).
This solution won't work exactly for table headers, but it will allow headers of arbitrary html. I've created a library that allows Chrome to print headers and footers, see this answer.
Related
I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
Its about Print, and Print only.
css:
#page {
size: A4 portrait;
}
#page :first{
size: 210mm 1000mm;
}
As CSS defined, should only first page with 1000mm height and rest pages are 297mm (A4) height.
But in Chrome, from second page, looks like 297mm but all content is gone.
Try it yourself, use Google Chrome, open http://fiddle.jshell.net/T4nnG/1/show/
and try print, see the preview, first page is right, and from second page, size is right, but content gone
You can see more clearly by use "save as PDF", but if you choose a real printer, it will shrink first page, the bugs are same
It may only in Chrome, but I am only use the app for Chrome, so as long as it works in Chrome, I am happy.
Am I done something wrong? Please advice on correct CSS, thanks.
Verified with a lot of trials, so this is the summary of my trials,
While printing the page, there two things happening - Calculation of layout content and actual rendering of the layout with content
#page :first breaks the first part, calculation of the layout in Chrome. The :first properties are used for calculation for other pages even if there are overrides. But Chrome uses the correct values for pasting content in the wrong layout.
For eg: #page :first if size is x, then then the number of pages is calculated based on x, the amount of content in each page is based on x. When it comes to putting in the content, Chrome realizes there is an override and changes the layout to overridden properties, but does not change the calculation of content or pages. Hence the issue. This is very clear if your case is reversed like so,
#page :first{
size: A4 portrait;
}
#page{
size: 210mm 1000mm;
}
You will see that the page heights have been updated but not the content.
Tried with page-break-*, !important rules, but nothing worked.
Tried alternative tools which can be used server side, like
http://www.princexml.com/releases/9.0/ - Not working. Rather breaks further by not calculating content or layout size correctly.
After a bit of searching, found this #page :first { margin: ... } in Chrome bug? Similar to your problem. But unfortunately, same findings here too.
This is a bug in Chrome. Filed a bug report with your case at https://code.google.com/p/chromium/issues/detail?id=355116. Please star it in case you want to follow it.
So to answer your question, your CSS is fine. But Chrome has bugs. You can only wait for them to fix it. Or modify the way you are generating the print. Hope this helps!
Add this to your CSS:
#media print
{
div{
page-break-inside: avoid;
}
}
Does that fix your issues?
I would like to print a wikipedia page as-is with the header and the sidebar. By default, when you print them, articles are styled specially for the print medium. I am making material for a programming course and I specifically DON'T want that. checking $('[media]') returns several style and link elements but all are set with media="all".
Where is the stripped down styling coming from and how do I make it not apply?
If you inspect the source of an article page, you'll notice there's a class .noprint which is simply:
display: none;
In the external stylesheet itself (bits.wikimedia.org/en.wikipedia.org/load.php? ...), they use an #media print directive:
#media print{ a.stub,a.new{color:#ba0000;text-decoration:none}...
...etc...
If you use Firebug (or similar), you should be able to remove the .noprint and classes and related CSS to get round the styling.
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.
Does the css content property break the rule of content and separation because css is for presentation not to generate content?
What are other good uses of the css content property? I've seen it only in clearfix hacks.
Does css "content" property break the rule of content and separation because css is for presentation not to generation content?
Good point. I'd say it does if it's used for actual data.
The quirksmode page on content shows the limitations pretty well. You can't add any kind of styled content at the moment - it will work with too few browsers. You can add only character data.
The author of the quirksmode airs an interesting opinion:
I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.
I agree with this in general, but sometimes there may be cases where you don't want to rely on JavaScript to do the job. The comma example shown by Martin is a case where I find using content justified (although I personally would be feeling better if the commas would already be served coming from server side - it's what I personally would stick to.)
Also, keep in mind that adding commas and quotes through the content property may look bad when your content is viewed from elsewhere - for example in a search results page.
I'd say use it only sparingly, if you really need it.
One popular place that this shows up is in WordPress' default theme
.entry ul li:before, #sidebar ul ul li:before {
content:"» ";
}
It could be used in print style sheets to show urls for links for example:
p a:after {
content: " (" attr(href) ")";
}
Some link (http://www.somesite.com)
It's good for structured content. I wrote a number of test cases for the W3C's next print CSS rules and the one that seemed cool to me was being able to put "Chapter " and things like that into certain elements, especially when paired with counters. A simplistic example would be something like:
li.chapter:before {content: "Chapter" counter(chapter) ": ";}
None of that's print-specific and it's all presentation information. If you don't want your chapters to be preceded with the word "Chapter", take it out of the CSS. Controlling that in a stylesheet means your print version could have different chapter headings from your screen version your mobile could be different again, without having to have any knowledge of the viewer's device inside your application logic.
I'm using it to display accesskey in admin panel menu
.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }
CSS is presentational data. Any content that's only presentation-related is fine in a CSS file. For instance, suppose I want to put « and » around my <h1> tags; that's purely presentational. You could do it with the :before and :after selectors.
It should also be noted that content can also display images:
content: url('my/image.png');
I'd like to add, on a side note, that I'd consider the use of the content property to override already existing content an extremely bad practice.
A common use I see for it is with :before and :after tags to format quotations with some sort of stylized quote box. It can be a quick and easy way to get in stylized elements that you would otherwise have build images out of.
blockquote:before, blockquote:after {
content: '"';
}
I think this is an okay use for it, because it doesn't really break rules of content and style separation. My feeling is that if it is part of the design of the page, rather than the content, it's probably okay for content:
One interesting use case, although maybe not recommended, is for placeholder text on contenteditables.
[contenteditable]:empty:after
{
color: #aaa;
content: 'Enter some text';
}
Like zneak said, it is also possible to replace images. I find it practical to replace "content images" (not "asset images", which should be done via css background images) with higher resolution variants on iPhone 4 and other devices that have more than one real pixel per virtual pixel.
E. g.:
<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* e. g. iphone 4 */
#people9 { content: url(//lorempixum.com/400/300/people/9/); }
}
It works, at least, on iPhone 4 and Android Nexus S, but I consider it experimental and haven't tested it on other devices. Here is a complete example:
https://gist.github.com/1206008
I just want to add to what has already been said.
With Cascading Style Sheets you can apply styles to a lot of types of documents.
The common use case is to apply CSS to HTML pages. In this case, the general idea is to use the content property only for aesthetic purposes.
Another use case is instead to apply CSS to XML documents. In this case the document usually does not contain elements for page structure (div, h1, etc...). So, in this scenario, by using the content CSS property more frequently, you can better define the page and the relations between elements and data.
For example you could prepend a description paragraph before a table, or appending the email address after the name of a person. Note that in HTML pages these page-structure elements should be part of the HTML document itself while they are usually omitted in a XML document and so they can be added using the content CSS property.
One of interesting use cases would be localization of a User Interface.