zompin 4 окт в 17:00

Как нарисовать квадрат 3 × 3 см на веб-странице*

5 мин

28K

Блог компании ЯндексВеб-разработка*Интерфейсы*Занимательные задачкиCSS*

* Не привлекая внимания санитаров

Меня зовут Илья, я занимаюсь фронтенд‑разработкой вот уже 10 лет. Представьте, что вам нужно сделать стили для печати документов, а бегать к принтеру с линейкой, чтобы убедиться в корректности фактических размеров отдельных элементов, очень не хочется. Было бы куда проще иметь возможность приложить ту же линейку к экрану. Но размеры элементов на экране почти всегда не соответствуют их физическим размерам при печати. Казалось бы, зачем это вообще может быть кому‑то нужно. Но это бывает важно. Например, в типографиях.

Как вы уже догадались, работаю я не в типографии, поэтому с подобной проблемой не сталкивался. Но в свободное время интересуюсь необычными задачами из мира веб‑разработки, так сказать, расширяю кругозор. И вот однажды я услышал тезис, что добиться точного воспроизведения реальных размеров на экране невозможно.

Что ж, вызов был брошен. И я поставил себе задачу (вы же тоже сами ставите себе задачи?) — нарисовать красивый красный квадратик размером 3 × 3 см. Тому, что у меня в итоге получилось, и посвящён мой необычный рассказ.

Подготовка

План простой. Верстаю красивый красный квадратик размером 3 × 3 см. Собираю по квартире ПЭВМ разных классов и размеров. Привожу их в порядок. Беру метр и начинаю измерения.

Решение в лоб

Код квадрата достаточно прост:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="icon" href="data:image/png;base64,">
    <style>
        *,
        :before,
        :after {
            box-sizing: border-box;
        }

        html, body {
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .square {
            width: 3cm;
            height: 3cm;
            background: red;
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

Можете сами взять в руки линейку и замерить, что у вас получилось.

Красивый красный квадратик свёрстан. Отцентрирован. Размещён на сервере и измерен почти на всём, что я нашёл в закромах. Хорошая новость — красивый красный квадратик отображается на всех шайтан‑машинах, плохая — он ни разу не 3 × 3 см.

Результаты

Таблица устройств и их характеристик с результатами измерений:

Ну и фото, чтобы оценить масштабы катастрофы. Разброд и шатание. Задача не решена.

Дело в том, что 1 дюйм = 2,54 см = 96 пикселей. Всё. Это не зависит от устройства. Одним словом, в CSS нет абсолютных единиц измерения, а только относительные (не берём стили для печати). Не буду растекаться мыслью по древу, вот статья, где об этом написано подробнее, и спецификация.

Решение на основе диагонали экрана

Вы знаете размеры экрана устройства, с которого вы читаете данное безобразие? Ширину и высоту — почти уверен, что нет, а диагональ — скорее всего, да (или можете легко узнать). Для массовых железяк диагональ указана в характеристиках. Я так её и нашёл для своего зоопарка.

Допустим, диагональ мы знаем: нашли, заняли, украли, узнали от окружения (приложение для телевизора или смартфона), получили с сервера, она прилетела из космоса или её ввёл пользователь.

Диагональ — это гипотенуза прямоугольного треугольника. Соотношение сторон берём из разрешения из window.screen (window.screen.width и window.screen.height). Зная гипотенузу и соотношение катетов из формулы теоремы Пифагора $x^{2}+y^{2}=d^{2}$ , после нехитрых преобразований получаем такую формулу:

$x = sqrt(\frac{d^{2}}{1 + k^{2}})$

где — ширина, — высота, — диагональ, — соотношение ширины и высоты.

Далее берём ширину и делим на window.screen.width. И получаем количество пикселей на физический дюйм. Я буду работать с сантиметрами.

Его величество код

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="icon" href="data:image/png;base64,">
    <style>
        *,
        :before,
        :after {
            box-sizing: border-box;
        }

        :root {
            --pixes-per-cm: 0;
        }

        html, body {
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .square {
            width: clamp(3px, calc(3 * var(--pixes-per-cm)), 100%);
            height: clamp(3px, calc(3 * var(--pixes-per-cm)), 100%);
            background: red;
        }

        input {
            width: 3cm;
            margin-top: 20px;
        }

        .panel {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="panel">
        <p>Разрешение: <b class="resolution"></b></p>
        <p>Физические размеры: <b class="sizes"></b></p>
        <p>Пикселей/см: <b class="pxs-per-cm"></b></p>
    </div>
    <div class="square"></div>
    <input type="text" value="">
    <script>
        function setValue(selector, value) {
            if (document.querySelector(selector)) {
                document.querySelector(selector).textContent = value
            }
        }

        function render() {
            const value = document.querySelector('input')?.value
            const d = (Number(value) || 0) * 2.54
            const { width, height } = screen
            const sidesRatio = width / height
            const physicalWidth = Math.sqrt(d ** 2 / (1 + sidesRatio ** 2)) * sidesRatio
            const physicalHeight = Math.sqrt(d ** 2 / (1 + sidesRatio ** 2))
            let pixelsPerCm = height / physicalHeight

            if (pixelsPerCm === Infinity) {
                pixelsPerCm = 0
            }

            document.body.style.setProperty('--pixes-per-cm', `${pixelsPerCm}px`)
            setValue('.resolution', `${screen.width}x${screen.height}`)
            setValue('.sizes', `${physicalWidth.toFixed(2)} см x ${physicalHeight.toFixed(2)} см`)
            setValue('.pxs-per-cm', pixelsPerCm.toFixed(2))
        }

        setInterval(render, 200)
    </script>
</body>
</html>

Не стесняемся. Открываем страницу, вводим диагональ и замеряем красивый красный квадратик линейкой.

Ну и я замерю. Прекрасные фото красивого красного квадратика 3 × 3 см. Мечта. Фото с моего зоопарка прилагаю:

Я сделаль!

Получил свой желанный красивый красный квадратик с заданными характеристиками. Пусть и с большой оговоркой, но задачу я решил.

Отдельно скажу про два последних скрина. На первом — Firefox без зума, а на втором — Firefox с зумом 110% (мне так удобнее) отсюда и изменение разрешения. Тем не менее красивый красный квадратик как был 3 × 3 см, так и остался. Ширина поля ввода — 3 виртуальных сантиметра, и его размер «плавает» от устройства к устройству.

Теперь вы знаете, что можно подружить физические и виртуальные сантиметры. Может, это даже вам пригодится. Если вы сталкивались с подобной задачей или знаете, где можно применить данное нетайное знание, пишите в комментариях.

Теги:

Хабы: