Why is the styling working in px but not in cm?

Question

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

score 1 · Answer 1 · answered Jun 11 '16 at 17:18

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.

answered Jun 11 '16 at 17:18

Jklyn

352
3
19

are u indicating I should change the `font-size ` to something compatible with cm? – mjb4 Jun 11 '16 at 17:19
1

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. – Jklyn Jun 11 '16 at 17:22
Avoiding cm is not a working approach, as I am working on a printing stylesheet. – mjb4 Jun 11 '16 at 17:25

Ruslan Stelmachenko · Accepted Answer · 2016-06-11T17:30:15.917

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/

edited Jun 11 '16 at 17:30

answered Jun 11 '16 at 17:25

Ruslan Stelmachenko

4,987
2
36
51

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. – mjb4 Jun 11 '16 at 17:34
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 `div`s 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. – Ruslan Stelmachenko Jun 11 '16 at 17:47
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. – mjb4 Jun 11 '16 at 18:09
1

I think the real problem here is that [Browsers truncate border values to integers](http://stackoverflow.com/questions/30835656/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). – Ruslan Stelmachenko Jun 11 '16 at 18:57
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. – mjb4 Jun 11 '16 at 19:19

Why is the styling working in px but not in cm?

2 Answers2