When a user of my site clicks a "print the label" button, he is sent to a page where only the label appears on a white background and the print dialog box opens. My question is about how to "think" the css for this label so that it is printed on the f开发者_JS百科ull paper width, whatever paper it is (US, A4, ...).
Should I use percents for sizing everything, boxes, margins, ...? ems for fonts? or points? Should a css reset be used first?
Is there a good resource on the net for this kind of css application?
Update: I made it with floating sections and percentage widths that layout well on regular paper. So consider this question closed.
I guess the trick is to make the layout as fluid as possible. And avoid using px
as a measure. Here is one good article: CSS Design: Going to Print
It could be quite a challenge to scale everything correctly if your label contains different sections of data.
The way I would go about it is generate a single SVG image and scale that. SVG is designed for scaling, while (X)HTML is designed to re-flow content depending on resolution.
SVG is just some xml that can be embedded right in your HTML, look here for examples.
You should avoid using position:absolute/fixed, float:left/right.
Pt is best for print fonts, though it doesn't really matter most of the times.
精彩评论