Menu
I am currently developing a tool for printing labels from the browser. I am running in to an interesting issue where I have labels that are 2.25" x 1.25". As such I have set my print CSS for a div to width: 2.25in; height: 2.25in;
In the chrome inspector, the dimensions appear properly as 2.25in; by 1.25in. Also, my printer is configured correctly as the same coordinates exactly.
When the time comes to print I am actually getting a preview that does not fill the entire 2.25x1.25 print preview.
http://imgur.com/K3BFSgg,CvToRSK,41fqK9D,vIL9lca
The dotted border is the border of the 2.25x1.25 inch div. Completely inaccurate measurement.
Any advice or tips on what could be going wrong? Thank you :)
544
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that.
On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another.
Use em or px for font sizes. CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in.
CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in. In CSS there is no reason to use pt, use whichever unit you prefer.
One inch in CSS (1 in) is defined as 96 pixels (source).
This works on low-density devices where 1 physical pixel = 1 screen pixel.
On high-dpi (dots per inch) devices like printers, it doesn't really work, though.
Seing as you want it to fill the whole viewport, maybe you should take a look at the vh and vw units.
They're described here.
vh stands for viewport-height and vw (you guessed it) stands for viewport-width.
Long story short, 1 vh = 1% of screen height, same for vw (except it's the width).
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
