0

I have the following HTML page its basically a shift plan. But if I switch from pixels for the screen to centimeters for the printer the width do not add up anymore and thus the rows have different width.

div.line{ white-space:nowrap; float:left; } div.a0, div.a1, div.a2, div.a3{ border:0.1cm solid black; display:inline-block; white-space:normal; padding:0px; margin:0px; } div.b0, div.b1, div.b2, div.b3{ border:1px solid black; display:inline-block; white-space:normal; padding:0px; margin:0px; } div.a0{width:calc(16cm - 0.2cm);} div.a1{width:calc(8cm - 0.2cm);} div.a2{width:calc(4cm - 0.2cm);} div.a3{width:calc(2cm - 0.2cm);} div.b0{width:calc(400px - 2px);} div.b1{width:calc(200px - 2px);} div.b2{width:calc(100px - 2px);} div.b3{width:calc(50px - 2px);} 
for(var a=0;a<2;a++){ var b = String.fromCharCode(97 + a); for(var c=0;c<4;c++){ var d = document.createElement("div"); d.className = "list"; for(var e=0;e<Math.pow(2,c);e++){ var f = document.createElement("div"); f.className = b + c; f.innerHTML = b + c; d.appendChild(f); } document.body.appendChild(d); } }

JSFiddle Example

Improve this question

2 Answers 2

Reset to default
1

Actually, your pixel rows also have different width (stairs effect). Try to change browser page scale (CTRL-+ in Chrome) and see that.

To make this work as you want, don't use calc at all, just use 16cm, 8cm etc, and set box-sizing: border-box; (see CSS3 box-sizing Property) for your divs.

This way border width will be included in total element width.

Fixed version of your fiddle: https://jsfiddle.net/vog8gyxr/4/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Ok, perfect with box-sizing it works (why didnt I try it?!). But It does not really answer my question. Because I did not miscalculate or sth right, they should have the same size? Or what d'you mean by stairs effect? Still, thx for the workaround.
By stairs effect I mean different width of each row, that they looks as stairs. And yes, the shoud have the same size, but browsers are not perfect when scaling pixels. I suggested you try to zoom in/out the browser window just to show you that even your pixel divs also have different widths! But it only occurs when their width is not integer pixel, but floating point number (which is true when browser zoom is 125% for example). When width is in cm, then it is also floating point number in pixels. This wrong calculation is common on many sites, just hardly anyone uses the browser zoom.
But why does the border-box prevent the error? Because the width is way bigger so rounding is not a huge difference? Seems to me its better to always use border-box.
I think the real problem here is that Browsers truncate border values to integers. If you inspect border width when you set it to 0.1cm in chrome dev-tools, you'll see that it is actually 3px!!! But it should be 3.78px. In contrast, calc css function uses 3.78px value, which leads to wrong inner content width (from browser perspective).
Thx a lot, this definitly answers my question. Just checked it. I set the border width to pixel instead of cm and use calc and it will align also.
1

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better. Just calculate your cm size to px. 1cm == 37.8px. May be it will help you.

Improve this answer

3 Comments

are u indicating I should change the font-size to something compatible with cm?
Yes, There is another reason to avoid absolute units for other uses than print: You look at different screens from different distances. 1cm on a desktop screen looks small. But the same on a mobile phone directly in front of your eyes looks big. It's better to use relative units, such as px or em, instead.
Avoiding cm is not a working approach, as I am working on a printing stylesheet.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.