So when i'll try to print out my document it will start colliding and does not show it the same as it shows in browser. Is there a workaround which wouldn't involve changing any of my css schema just for in case of printing?
As seen from image (i don't have enough rep to post it as image) there is a lot of room in the top and in the sides. I don't understand why is that like this, although i turned margins in the settings to 0 when choosing printing options.
In browser the rows are bigger and no collision.
I don't know if code is needed at this point but could also provide if needed.
It is possible to use media queries just for printing
#media print{
//You can do anything you want here and it will only affect the printed pages.
// Just use normal CSS.
//You can even put the unit cm to a good use here.
}
Related
I make html reports and print them (or PDF) and want to make smart page breaks. I want to avoid that the heading is on one page and the paragraph on the next page. In that case the next page should start with the heading.
I have tried page-break-after:avoid but with no success. And I don't understand why. If I try page-break-after:always it works. So I guess the avoid functions is not that good. I always use IE8.
Is their any script way to calculate where the page break should be? If their is I can just make a page-break-after:always at that place.
Thanks!
/Georg
This class is only a hint. A page break is only avoided if it can be avoided. If it would mean the result would have to be clipped, a page break will be inserted after all.
I don't think it's possible to calculate where the page breaks would be, because it depends on numerous variables, including printer margins and paper size, which are not accessable in CSS nor JavaScript.
I used TCPDF (http://www.tcpdf.org/) to do something similar. It was easy to get the page breaks in the right place though as it was printing tabular data so I could do a row count.
You could try it with a character count but it wouldn't be as accurate.
So I have a PDF brochure that we're trying to create a printable HTML version for.
I'm running into a few obstacles including:
Zoom at 100% vs. Shrink to fit (defaults appear to be different in FF/IE)
Only printing one page and not having any space after the
footer (or even just getting "page-break-after:always" to work)
I have a fluid layout that I'm trying to just use a width: auto on the main wrapper for, but this means not having any kind of width constrictions on the front-end of the HTML page. I don't want to use a min-width or anything. Was hoping since this is page is strictly for print, I wouldn't have to add a print style sheet (just typing this makes me think I pretty much have to...)
Should I just use a fixed layout on the HTML page and a fluid layout on the print page?
I may be over thinking this...
Thanks so much for any help.
I would say make ONE HTML page. Then, create two separate print media CSS files: one for Firefox, the other for IE. Use a conditional comment to read the browser and figure which media print stylesheet to use.
A little bit of work, but it should work for you.
Is there a way to specify the media type / page size to be used when the user prints a web page? Also, can I lay out text so it will be printed at specific positions?
For example, I’d like to render an address on a web page that the user can then print on a letter-size envelope.
Thanks!
EDIT
By media type, I meant the type of print media, such as letter-size, legal-size, #10 envelope, etc.
I think the bottom line is best use a PDF. Sadly, Browsers suck very much at printing.
Is there a way to specify the media type / page size to be used when the user prints a web page?
You can specify a CSS style sheet to apply only to printing using media="print". As to the page size, there is no reliable way of specifying that. You will have to rely on the user to do this for you.
Also, you will have to rely on the user to remove the header and footer that most browsers add to the printed result.
Also, can I lay out text so it will be printed at specific positions?
In theory, yes. You can use physical unit values cm or in to position elements on the page. I'm not sure whether these work with 100% reliability though, because printer specific margins may change the result - you'd have to test.
You may want to try using CSS for different mediatypes, though I don't know if this will give you the precise control you're asking for.
I'm not talking about just to mke print css or media=print
Questions:
I am talking what other things we should do in XHTMl and screen css and print css (other
than disply:none in print css) we
should care to get good print from
website pages.
And do we need any special care for
images, background images in css,
flash, silverlight, iframe
How to save printer ink with print
css?
There are a couple helpful articles on A List Apart on this topic: Going to Print and Printing a Book with CSS: Boom!
Background images are not printed. It is possible, but the default setting in your browser is; don't print background images.
I make sure the images have a resolution of 150dpi. Then they are not to big for the screen and acceptable for paper. The GIF format does not store the dpi information in the file, but you can give it an acceptable size with CSS.
Smaller font need less ink.
From the XHTML point of view there's not much to do besides making sure the code is valid and semantic.
Now about the print css. You could consider that some people might print your page in black and white, or they might have very little color ink (and thus get fainter colors). So if you have any light colors, pastels or places where there's not a lot of contrast between the text and the background, make sure you bump up the contrast in the print style.
Try printing your page in black and white and see how it looks.
I'm not sure how plugins like flash and silverlight get printed, but you could add background images to them in your print.css so if they don't get printed at least you can get a snapshot of the flash instead of a white hole.
For images I'd suggest what Ton van Lankveld said. Make them 150dpi, and also make sure they look good on CMYK (you can do this in Photoshop by going to View > Proof Colors).
Check your fonts too. Some might need to be smaller, some bigger. If you have a lot of text you might want to consider using a more "print-based" font like Helvetica, or Times New Roman (Specially if you're using screen-based fonts like Verdana).
Finally to save ink I would remove anything that's not absolutely necessary (yup display:none). I'd stay away from background images in print.css for that same reason. I would set all hyperlinks to black (or the text color) with no underline, since there's no reason to have them in a printed page.
You could also save some ink by using #111 or #222 instead of #000 (but it might affect legibility).
The following technique actually uses more ink but is relevant to making a print version of a page.
Let's say that there is a page where the hyperlinks actually are very important to the content -- say, it's a listing of useful websites for topic xyz. Not sure why someone would print this out, but if they do, a bunch of underlined sentences isn't going to help much.
You can actually use CSS to print out the urls.
For posterity, the code is
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
I'd recommend only doing it for selected links by using a class, something like
a.printable:link:after, a.printable:visited:after { content:" [" attr(href) "] "; }
I've always liked angled brackets for this purpose, so I'd probably rewrite it
a.printable:link:after, a.printable:visited:after { content:" <" attr(href) "> "; }
It's important to keep in mind that entities aren't allowed in the "content:" value in css. Basically you just put in the raw text that you want.
Also, for print you should probably use pt rather than px or em for sizing. You can make the size smaller than the screen equivalent. The default size is often set at 12 point but you can easily make it 11 point and still maintain plenty of readability. That will save a fair amount of ink (and paper!) in the long run.
With the possible exception of content-graphics (in other words, graphics which make up the meaningful content of the page, as opposed to graphics used for layout, beautification or eye candy), almost no non-text should make it to the page. Borders and backgrounds should be eliminated except in rare occasions (such as when attention must be drawn to a section of text, although simply setting it in bold would probably be just as effective, and again save ink). If you are using css to make fancy looking <hr>s, get rid of the styling altogether when printing and just use the built in styling, or replace all <hr>s with a plain black or gray line (and, again, use pt, as in 2pt, rather than px, to change the height).
I can't think of many situations where you'd have content in an iframe that you'd want to be printed. If that's the case, it may very well be worthwhile to make a printable version of the page that takes the content out of the iframe and directly into the document, making it far better for printing.
While I admit that this is not likely to be the most practical answer you receive, you might want to consider ecofont, a font designed especially for saving printer ink.
See comment.
We have an HTML page which displays a bunch of pretty bars using divs and repeating backgrounds. We are in the process of making a report out of this that can be printed nicely, but this may take some time because we don't have a reporting framework in place. As an interm solution we'd like to make the HTML version printable. The background of the divs are the only problem, and they don't print because of the default setting (which can't be enabled because the workstations are locked down).
I have found a work around for printing background images, but this doesn't work when the background needs to be repeated.
Are there any other work arounds which might be able to help? I have also been trying to insert an image inside the dive and stretch it, but this is throwing off all the other relative positions and is proving to be very difficult to fix. I am still looking into this however.
I have used this ActiveX Component in situations where controlling the printer output was absolutely neccessary (think printing stickers etc).
The function you'd want is : printBackground
However this doesn't come with their free license but perhaps the cost of that license outweigh the other work arounds implementation time.
Drawback: IE only.
If you can educate your users, there is an option in the print dialog box of IE and Firefox that is labeled something like 'Include Background Images' or 'Print Background Images'
This will include repeating background images.
I couldn't load the link, and I may not be understanding the problem correctly, but...
This is more of a work-around than a solution, but would you be able to make a single image that just appears to be repeated? Or at least, is repeated (for variable browser and screen sizes), but is large enough to be 'proper' for printing (which is a much more standard size)?
The easiest way I can think of achieving this is to have different stylesheet for printing that uses standardised images that fit the containers printed on paper.
The display stylesheet would continue to use the repeated images which wouldn't hinder performance as the full images loaded in the print stylesheet would only be loaded when the page is sent to the printer.
...at least, that's what the HTML spec says should happen. Whether this is actually the case, I can't be 100% sure.