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.
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.
}
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.
I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background.
Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mobile browser ( iOS, Android, etc..) I would like to use a simple color as a background and make it flexible in terms of the width and the height.
So.. I guess my question is if there is any good approach for distinguishing which browser is used and then changing DIV's propertied depending on the browser.
Thanks.
Michal
There's two ways to do it, one as Terrik said using Javascript and do it on the client-side, you could use this jQuery plugin to add a class into the body to do it: https://github.com/leopic/Simple-jQuery-UA-Spoofing
The other is actually doing on the server side, check the headers of the page in the request and change your content before the page even loads, for instance in PHP http://php.net/manual/en/function.get-browser.php
My recommendation is, don't do either, develop your page to be responsive and accomodate to different widths/resolutions and not browsers: http://www.alistapart.com/articles/responsive-web-design/
You could use CSS media queries
This needs to be done using client side, not server side. (i.e. JavaScript not PHP)
If you want to know more about it than just how to do it, go through this site: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support
If you just want some sample code and a quick explanation, I've used this before:
http://www.quirksmode.org/js/detect.html
Once you detect that, you can set up an if statement to determine which divs to display.
Well, there are several approach to do that.
AS Terrik said, you can use client side code to dynamic change the page but this is not necessary the best approach.
A mobile page is not only a background color change. It also can be a layout change. I suggest you to use the MVC pattern : same model, same controller but one view by "browser" (device seems to be a better term in your case). When the user thirst visit your site, send the device used to your server and display the good view (via a redirection). Don't forget to save the user agent in the user session to avoid this redirection process for next pages.
I suggest you to look at GWT, which is a powerful framework when you need multi device capabilities.
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.