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

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

86149359bc853f2333231c53366ec0b4.jpeg

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

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

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

Подготовка

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

Решение в лоб

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




    
    
    
    
    


    

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

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

Результаты

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

41ab4c62594520f748435d1722bf7990.png

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

4c355329430dba50528bdb00cad30d1a.png82c35fb3e5202751015faa3b311f2c89.png

Дело в том, что 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}})y = k × x

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

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

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




    
    
    
    
    


    

Разрешение:

Физические размеры:

Пикселей/см:

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

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

f18d8ab926f7ae28a45a15594651544e.png9d4b5221aafd243a8273a7852e3a50a6.png2611a7bfe71e191adb25147322043149.png

Я сделаль!

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

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

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

© Habrahabr.ru