I have some pre-printed A4 papers and I want to print some data on them on specific locations on the paper (think of it as a form with boxes which must be completed). I 've tried to do it with html and css and i 've managed to display the data correctly on the printed paper with my configuration (specific margins, printer, etc).
My hesitation is if the browser, the printer, the printer driver (or some other parameter) affect the way the data are printed in a way that I won't get the right result.
Is it feasible to use html and css for accurate printing? If the answer is yes how would you do it? (My approach is using relative positioned divs for each page with absolute positioned divs for every box of the form)
If the answer is no what would propose alternatively? (maybe html and use of table tags? something else completely different?)
I would do it in PDF or Flash. Very similar to the way www.stamps.com do when you need to print stamps.
Reason for those two technologies is they are really cross platform and give same results on all systems.
Related
I have a shopping website and I want to print a shipping labels for orders.
The format of the shipping lable need to be like in the picture.
which means, I have this structure, and I need to fill in 4 data fields.
The data is not the problem.
My problem is that I tried to do it, and when I pressed ctrl+p, I didn't have the option of printing the page horizontally.
So my question is how is it possible that I can't choose "horizontally" in the page-layout option??
If I succeed to fix this problem, it will be easier for me to do the rest, but still, I want to ask also if there is a way of writing HTML pages (pages to be print)? Because this is actually my first time that I write a page like this.
At the beginning I tried to write the text when it is rotated 90 degrees, so that when I print the page (vertically - because I can't choose another option...) it will be printed as I want it to be. I found it very difficult to write the data in its right position because I couldn't fit the data to the format (because it is 90 degrees rotated...)
Another important thing is the fact that this is not an online website, it is a website on the computer localhost (which means the URL is: "localhost/.../.../something.php"). I mention this because I have noticed that all the "localhost" pages don't have the option of printing horizontal. I don't know if it is related, it sounds very strange to me.
Does anyone have an idea why I couldn't choose "horizontal" in the printing options?
Or does anyone know what are the "rules" of HTML printing pages?
I'm attempting to rearrange elements on a Volusion store for my employer. The products page we currently have looks like This
I've been tasked with moving the details box
(containing "Nothing says "I'm ready to learn!"), up and to the right, to align with the price box.
The box is a table contained in a hierarchy of nested tables, at roughly the same "depth" in a different branch.
I don't have access to the HTML for the page, only a template html file that generates menus and footers along with the relevant CSS. Some JS exists on the site but since I lack experience with it, I'm hesitant to get into it.
Because of the table-and-div structure, and the fact that I cannot edit the HTML, I'm left with tweaking stylesheets and possibly some javascript. My issue is this: How, using only these tools, can I take an element in one container and reposition it relative to elements in another container? I've tried
Position:Relative;
left:some percentage;
top:some negative percentage;
Which, for a single page, I can get to look quite good, but if I allow others to load the page it falls apart completely, due mostly to the fact that the container for the element I'm moving is calculated based on screen width, and the container for the destination is calculated with the width minus a constant value(the image for the product).
My employer is willing to accept that the arrangement won't be perfect, they know Volusion is the devil complex. But it's important to them that their products display all relevant information "above-the-fold". Obviously I've not found any sort of answers on this. I don't find all that many people who have to edit a webpage without access to the raw code, because that's stupid. Worse still, moving an element to align with a completely different container is just bad policy as I gather, but its what I'm being asked to accomplish.
The only way to do this on Volusion is with javascript. You do not have access to the HTML for the product page and given that it is built with tables there is no way to move the product description area up with CSS.
You need to use javascript to detach and append the product description box below the product details area.
There is no way around it... You need access to the HTML files. You could do it with absolute positioning but that is not good practice.
Because you are working with a template; if you change the arrangement of that page then all of the other product pages will follow. So the reason you can't find the HTML is probably because you are looking for a .php containing html..
I suggest to spend time understanding the template or get a volution expert.
Is it possible to print a HTML page with truly absolute positioned elements to paper? It seems all browsers are doing a big mess here. It is easy to define a body by absolute units (eg. cm) and place elements by position: absolute inside. However, every browser seem to try to make it impossible to print such a page. FF for example is adding print margins, even when printing to a PDF on linux despite 0-margin page settings. Chrome seems to shrink the page in every case.
So how to print something with absolute positioning, eg. paper form fields, markings etc.?
Have I overlooked something?
Sadly, the CSS3 Module: Paged Media allows all this to happen. This are the rules concerning pages which are too big:
3.3.3. Rendering page boxes that do not fit a page sheet
If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:
Render the page box at the indicated size on a larger page sheet.
Rotate the page box 90° if this will make the page box fit the page sheet.
Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.) [done by Chrome]
Reformat the page contents, including 'spilling' onto other page sheets. [done by many other or older browsers]
Clip overflowed content (least preferred).
The user agent should consult the user before performing these operations.
3.3.4. Positioning the page box on the sheet
When the page box is smaller than the page size, the user agent should center the page box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.
And this is the rule which breaks all your positioned stuff:
3.7. Content outside the page box
[...] Also, when boxes are positioned absolutely, they MAY end up
in "inconvenient" locations. For example, images MAY be placed on the
edge of the page box. Similarly when boxes use fixed or relative
positioning, they MAY also end up outside of the page box.
A specification for the exact formatting of such elements lies outside
the scope of this document. However, we recommend that authors and
user agents observe the following general principles concerning
content outside the page box:
User agents SHOULD avoid generating a large number of empty page boxes to honor the positioning of elements (e.g., you don't want to
print 100 blank pages). Note, however, that generating a small number
of empty page boxes MAY be necessary to honor the 'left' and 'right'
values for 'page-break-before' and 'page-break-after'.
Authors SHOULD not position elements in inconvenient locations just to avoid rendering them. Instead:
To suppress box generation entirely, set the 'display' property to 'none'.
To make a box invisible, set the 'visibility' property.
User agents MAY handle boxes positioned outside the page box in several ways, including discarding them or creating page boxes for
them at the end of the document.
Have a look at the second paragraph of section 3.7: A specification for the exact formatting of such elements lies outside the scope of this document. Since there is no other document and no other guideline then the general principle following this paragraph, every browser can do whatever it want.
It's one of the flaws that are currently in this CSS3 module. However, I think those flaws cannot be removed by a CSS4 or revised CSS3 module, as the variety of possible stylesheets and resulting layouts is too huge too cover. Also note a little footnote given in CSS Print Profile:
‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow.
So it's basically not possible to create the same effect in every browser. As for the time being, the only possible way to achieve a portable document is to create a PDF with a third-party application or via a PDF printer and your most favorite browser. Every other way is bound to fail as long as either the W3C's recommendations aren't strict or the browser vendors implement whatever they want.
See also:
CSS3 Module: Paged Media (Working draft, last revision 2006)
CSS Print Profile (Working draft, last revision 2006)
Additional notes
If you have a bunch of position:absolute elements which need to be printed it's sometimes a good question whether an element actually needs to be positioned absolute, or if the same effect can be achieved in a slightly different or easier way. Also note that you should use display:none on each element that isn't truly needed for the printed media, such as ads, navigations, etc...
As you say, web browsers tend to do crazy things when printing. Print-oriented engines are often better.
WeasyPrint is an open-source engine that renders to PDF and supports absolute positioning as well as CSS 3 Paged Media to set the page margins:
#page { margin: 1cm /* or 0, if you want */ }
Make your container to have relative position. That's the only way to keep absolute positioned elements in the same place at every screen and paper. so if your main div (the div where all of your content is located) add following to your css:
#maindivname{position:relative;}
Should do the trick.
I have tested browser status for printing "position:absolute" elements with the following results:
IE 11: Fail. Doesn't matter what OS, 7,8,8.1.
IE 10: Pass. However, you cannot revert to 10 on 8.1 so folks with that are stuck.
Firefox up to 38.05 = Fail. Unknown if any version ever worked.
The good news is that it looks like the Blink/WebKit people did their homework instead of using poor code.
Chrome: Pass
Opera: Pass
Media Queries will do the trick -- check this link and previous question out, maybe it will help.
Suggestions for debugging print stylesheets?
Media Query transitioning px into inches/cm/whatever needed for printing requirements.
That border/margin you mentioned is probably your printer's printable area (the grip edge). Most printers need some type of edge to grab and feed the stock. That's why when one prints a full-bleed document (ink to the very edge), it's printed on stock larger than needed, then trimmed down.
set the margin with page setup is the first and primary solutions for printing the HTML page or a DIV .
After all not expected result will come then you need some digs on your HTML page.
Make a window without title bar or any custom bar using java script.And put all Original data into that window with a position:relative and also set the media type as print.
position:relative;
media:print;
Hope it will helpful.
Use in CSS this property:
body{
-webkit-print-color-adjust:exact;
}
This help positions absolutes and backgrounds in tables.
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.
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.