explorations/techniques/opsz-auto-visualization.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OPSZ-Auto: Optical Sizes in Browsers – Visualization using Robopsz</title>
    <style>
@font-face {
    font-family: 'Robopsz';
    src: url('./assets/Robopsz[opsz].ttf') format('truetype');
}


p {
    max-width: 32em;
}

code {
    white-space: nowrap;
}

.screens {
    width: 100%;
    overflow-x: scroll;
    position: relative;
}

.screens > * {
    padding: .3em;
}

.screens > * > * {
    font-weight: 400;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.screens .test p {
    font-family: Robopsz;
    /* "auto" is the default, make it "none" to see that the browser
    is indeed applying optical sizing.
    */
    font-optical-sizing: auto
}
    </style>
    <script>

function makeSample(fontSizePT) {
    let elem = document.createElement('p');
	elem.textContent = `actual opsz value: _ — font-size: ${fontSizePT} pt = ${(fontSizePT/3*4).toFixed(2)} px`;
    elem.style.setProperty('font-size', `${fontSizePT}pt`);
    return elem;
}

function makeWaterfall(parent, bigSize, smallSize, smallToBig){
    [bigSize, smallSize] = [bigSize, smallSize].sort();
    let samples = [];
    for(let fontSize=bigSize;fontSize>=smallSize;fontSize--) {
        let elem = makeSample(fontSize);
        samples.push(elem);
    }
    if (smallToBig)
        samples.reverse();
    parent.append(...samples);
}

window.onload = () => {
    let bigSize = 144
      , smallSize = 8
      , smallToBig = true
      ;
    for(elem of document.querySelectorAll('.screens .test'))
        makeWaterfall(elem, bigSize, smallSize , smallToBig);
}
    </script>
</head>
<body>
    <h1>OPSZ-Auto: Optical Sizes in Browsers – Visualization using Robopsz</h1>

    <p>The actual opsz value should equal the font-size in pt.</p>

    <div class="screens">
        <div class="test"></div>
        <div class="proof"></div>
    </div>
</body>
</html>