I need to be able to work with real length units for any display device and have to be able to rely on them. So I made myself a little ruler. On my laptop screen it comes out way too small. On my cellphone even smaller.
How can one calibrate this? I imagine the display device should have its physical dimension and then the resolution determines the distance of pixels. How can I do this?
div {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.ruler {
counter-reset: major -1;
width: 10cm;
white-space: nowrap;
font-size: 0;
}
div.number::after {
content: counter(major);
counter-increment: major;
font-size: 3mm;
}
div.major {
width: calc(1cm - 1px);
height: 5mm;
text-align: left;
border-left: 1px solid black;
display: inline-block;
font-size: 0;
}
div.minor {
width: calc(1mm - 1px);
height: 1mm;
border-right: 1px solid black;
display: inline-block;
}
div.half {
height: 2mm;
}
<html>
<head>
<title>Screen Geometry and Gestures</title>
</head>
<body>
<main>
<h1>Screen Geometry and Gestures</h1>
<section>
<h2>Length Units</h2>
<p>Let's make a ruler!</p>
<div class="ruler">
<div class="major">
<div class="number"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor half"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
</div>
<script type="text/javascript">
const self = document.currentScript;
const div = self.previousElementSibling;
for(let i = 0; i < 20; i++) {
const newdiv = div.cloneNode(true);
self.parentElement.insertBefore(newdiv, self);
}
</script>
<div class="major"></div>
</div>
</section>
</main>
</body>
</html>