SO is probably not the right place for this, but I may have missed a trick with my HTML/CSS.
I have written an application that outputs to HTML, for convenience. The page it produces is big, insofar as it should span multiple pages, both horizontally and vertically. However, unlike spreadsheets, browsers don't seem to do the "across then down" or "down then across" style printing and, if the page isn't shrunk-to-fit, it's just clipped at one page's width.
Short of printing to a custom page size that accommodates the full width and height, is there anything I can do to get the page-spanning printing I'm looking for?
For the problem Landscaping is one method you can try out.
Refer here:- Landscape printing from HTML
But I would recommend to convert it to a PDF before printing which will be more comfortable.
I couldn't find a programmatic solution, so did this:
Print oversized HTML on to paper big enough to accommodate everything (e.g., A0) to PDF.
Adobe Reader (and probably other viewers) have a "Poster Print" option, that does the tiling automatically with an optional scaling factor: Do this, either to PDF if you need to do any further layout processing, or to your printer directly.
???
Profit
A bit of a weak link in my pipeline -- until I can generate tiled PDFs directly -- but c'est la vie!
Related
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.
}
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.
I am generating a document from HTML. Is there any way to force the HTML page to be one rendered as one printed page long?
I've done most of the page with <table> and <div> tags.
Not exactly, but you can use a print-stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
To set font sizes, paddings, etc. to physical units like 'pt' (that should never be used in a screen-stylesheet!) so that it ends up being more or less an A4 page, when rendered in a typical browser, with typical fonts, with a following wind. Nothing is guaranteed but you can optimise for the common case.
In print you don't have to worry so much about font size preferences or dpi settings, but you still can't control the margins the browser uses or the actual page size (US Letter is smaller than A4), so leave a good amount of wiggle room and test on the major browsers.
No. You can't control the user's zoom level, printer settings, paper size (is he using A4 paper in Europe or legal in the US?) and all of the various other things that affect printer output using HTML.The best you can do with HTML is make a very simple "printer-friendly" page and keep the content short. Alternatively you can build a PDF, which is designed to let you control how it's printed.
Use PDF. You can force many things like font size, font type and many other parameters but any browser can decide they don't care and use whatever they want and so violate your prerequesites or decisions. HTML is not (repeat after me: is NOT) a presentation language.
In many cases, it will mostly work but nothing is certain.
You can use CSS to style the page and set it to a certain height / width... There's a good tutorial here.
No, but you can make the print view a lot smoother by using a dedicated CSS file for print media, like suggested above.
Then you could for example at least prevent a table from spanning over 2 pages by using
"page-break-before: always;".
And finally you could also use
"display:none;" on elements that are unnecessary like ads, nav bars, etc. to keep the page itself shorter (short enough for a single page, hopefully).
No guarantees, though.
Sure. You have a couple of possibilities:
Convert your page into a large image.
Convert your page to PDF.
Annoy all your users with a page with fixed dimensions that scrolls left and right because it is too wide and makes it extremely hard to transport the information.
No there isn't a way as you couldn't possibly know the printer type or paper size at the time of rendering the HTML.
My only suggestion would be to set the printer properties to scale the content to fit one page at the time of printing.
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.