Search code examples
htmlcsschromiummeasurement

Where is my thinking wrong? Browser scales simple <div> box

Today I did a simple test.

    <html>
    <head>
    <style>
     #box_4cm {
      width: 4cm;
      height: 4cm;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
     #box_223px {
      width: 223.25px;
      height: 223.25px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
    </style>
    </head>
    <body>
     <div id="box_4cm"></div>
     <div id="box_223px"></div>
    </body>
    </html>

This markdown tests dimensions of two boxes. First box shall be 4cm in width and 4cm in height. Second box shall be same size. As for the second box, I measured my screen size, it is 1920x1080px, 34.4cm. Then made a calculations. 1cm = 55.81px -> 4cm = 223.25px.

As I type this question, I see, from the result of SO code snippet, that boxes are of different size. Also, the first box is 3.5cm in contrast to 4cm. The second box is about 5cm in size. The results are clearly wrong.

Having exported the above HTML to PDF, I have got expected results as for the first box, it is displayed as true 4cm. More than that, having supply my dimensions in pixels I still got wrong real sizes. In other words if I do #box {width:100px; height:100px;} result displays different in size. I've checked it with the gimp measure tool.

So I continue from where I've started. Where is my thinking wrong?

P.S My system is Linux Mint, the browser is Chromium.

screen 1

screen 2

The above two screen captures show that #box_223px {width: 223.25px; ... } has width of 294px. You can see it in a gimp bottom panel.

Solution

  • You can't do that. cm, in and other length units are only good for printing.

    It's because browsers might know of the pixels of a monitor (through the graphics card), but not about the real world dimensions (screen size)

    See this quote from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Absolute_length_units

    Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit, and then defining the others relative to it. The anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.

    For low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it. Thus, 1in is defined as 96px, which equals 72pt. The consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) doesn't necessary match the size of the physical unit with the same name.

    For high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. Therefore, the px unit is defined relative to them (1/96 of 1 inch).

    As a result:

    Use pixel units for displays, length units will be incorrect.
    Use length units for print, maybe pixel units if you don't mind the absolute values.