9

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 full 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.

Improve this question
1
  • What is the content of your label? Is it one word? It is a bunch of different sections? I ask because this will affect the answer.
    – sosborn
    Commented Oct 24, 2011 at 2:32

3 Answers 3

Reset to default
1

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

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.