Относительные пикселы или в чем задавать размер шрифта. Особенности разработки форм для разных экранных разрешений 96 точек на дюйм сколько dpi

Откуда взялись 96 dpi

Мода на дисплеи с высокой плотностью пикселей, запущенная Apple, высветила проблемы с масштабированием, существующие у некоторых приложений для Windows. Откуда эти проблемы взялись и как их решить?

Таким образом, 96 dpi - это виртуальный параметр, полученный в результате виртуальных же вычислений и усреднений. Он высчитан на основе оценки субъективного восприятия пользователем размера буквы в зависимости от расстояния и представляет собой поправочный коэффициент к параметру 72 dpi, который, в свою очередь, является просто отражением того факта, что 72 точки одного монитора с определенной диагональю и разрешением (причем вышедшего на рынок очень-очень давно) совпадает с виртуальным дюймом, используемым в печати. Сложно? Весьма.

В отличие от этого виртуального параметра, PPI вполне реален: это физическое количество реальных пикселей экрана на дюйм, которое очень легко поддается точному расчету. В этом и состоит ключевая разница между параметрами: один из них виртуален, а другой вполне реален.

Как построен интерфейс Windows, почему 96 dpi стали базой, как эта база используется?

Тем не менее, параметр 96 dpi стал важнейшим элементом для построения интерфейсов системы и приложений. Как же так получилось?

Во времена, когда Windows только захватывала рынок, технологии и индустрия ПК не развивались такими безумными темпами, как сейчас, однако развитие шло, и тогда казалось весьма динамичным. Сменяли друг друга стандарты вывода изображения на экран: CGA, EGA и, наконец, ставший последним стандартом IBM, широко распространившимся на рынке. Постепенно росли диагонали мониторов и доступные разрешения. И разрешение постепенно из константы превращалось в одну из переменных.

Однако привязка компьютеров к бумаге продолжала оставаться одним из важнейших аспектов их функциональности. Соответственно, сохранял свою актуальность и параметр dpi, который задавал параметры шрифтов и графики при выводе на бумагу. Видимо, этот параметр стали воспринимать в виде универсальной константы, и именно dpi стал точкой отсчета для построения интерфейса системы и приложений - как для текста, так и для графики.

Впрочем, на тот момент это представлялось вполне логичным и разумным. Во-первых, разрешение росло примерно теми же темпами, что и диагональ экрана, т. е. размер элемента на экране примерно сохранялся. Во-вторых, мощность компьютера тогда была в дефиците, поэтому на сложные интерфейсы ее не хватало. Векторные элементы были недостижимой роскошью; шрифты были растровыми, а масштаб и размеры элементов интерфейса задавались жестко раз и навсегда. Ну а сами по себе размеры шрифтов и элементов не с потолка взялись - они десятилетия оттачивались на бумаге. Другими словами, привязка к бумаге выглядела не только логичной, но и удобной с точки зрения работы с компьютером.

При этом, хочу еще раз напомнить, сам по себе параметр dpi - виртуальный и не имеет никакого отношения к аппаратной части компьютера. Компьютер всегда рисует изображение в пикселях и выводит его на экран в определенном разрешении. Ему, по большому счету, все равно, на какую диагональ выводить картинку, и уж тем более он не знает, как далеко от экрана сидит пользователь, а ведь этот параметр учитывался при выборе наиболее «выгодного» dpi. Следовательно, dpi как параметр нужен нам в двух случаях: при выводе на бумагу (тогда он задает масштаб и организацию элементов на листе бумаги) и как некая базовая величина, определяющая субъективно удобный масштаб элементов изображения на экране.

Поскольку это случайное удачное сочетание параметров монитора (размеры изображения/разрешение, дающие нужный PPI) и системы (dpi) хорошо работало, его воспринимали как нечто постоянное и незыблемое. Считалось, что параметр dpi = 96 сохранит свою актуальность всегда. Вот почему не всегда следует слепо доверять «удачному опыту» - это может оказаться не общее правило, а просто удачно работающее сочетание случайных параметров, которое рассыплется, как карточный домик, стоит измениться одному из них. Собственно, это произошло и с dpi: все настолько поверили в его незыблемость, что для упрощения жизни стали рассматривать его как константу. А когда изменить dpi все-таки понадобилось, с интерфейсами случилась катастрофа. Вот об этом и поговорим.

Организация интерфейса Windows, ЖК-экраны и связанные с ними сложности

Итак, dpi стал базовой величиной, которая легла в основу всех элементов (текстовых и графических) и ОС Windows, и приложений. При увеличении разрешения размер элементов в dpi оставался тем же, просто их больше помещалось на экран, а видимый размер, т. е. то, как эти элементы выглядели на экране, определялся соотношением физического размера экрана и его разрешения. Долгое время разрешение и диагональ экрана росли примерно одинаковыми темпами, так что ничего страшного не происходило.

В принципе, концепция dpi немного зашаталась уже по мере развития ЭЛТ-мониторов, т. к. нужное соотношение размер/разрешение даже для них отнюдь не всегда выдерживалось точно. В результате, на разных мониторах элементы на экране имели разные видимые размеры. Но в большинстве случаев с небольшими отклонениями мирились, а в случае значительных отклонений от «нормы» на помощь приходили сами мониторы. Ведь ЭЛТ-трубки хорошо работали с несколькими разрешениями, так что проблему скорее всего можно было устранить, поставив на мониторе другое разрешение - таким образом, чтобы визуальный размер элементов был ближе к заветному dpi. Поэтому большинство пользователей воспринимали слишком мелкую или слишком крупную картинку не как неправильный масштаб, а скорее как неправильное разрешение для конкретного монитора. Например, помните про 800×600 vs 1024×768 для 14-дюймовых мониторов?

Этот способ перестал работать с переходом на мониторы с ЖК-матрицами, ибо они способны хорошо работать только с одним разрешением. И уже на втором шаге развития ЖК-мониторы показали, насколько они могут испортить всем жизнь.

Первый раз пользователи ПК глобально столкнулись с проблемой масштабирования, когда на рынок стали массово выходить ЖК-мониторы с диагональю 17-дюймов и разрешением 1280×1024 точек. Я думаю, многие читатели помнят проблемы с их настройкой. В погоне за красивыми спецификациями производители выбрали разрешение побольше, но в результате для этого типа матриц баланс размер/разрешение получился крайне неудачным: плотность пикселей оказалась слишком высокой, и при стандартных настройках монитора и системы изображение элементов на экране было слишком мелким для комфортной работы. Тут выяснилось, что масштабирование в Windows работает плохо.

Дело доходило до того, что пользователи от отчаяния понижали разрешение на ступень, хотя для ЖК-мониторов это имело очень неприятные последствия: изображение становилось нечетким, шрифты - расплывчатыми, глаза все равно болели. Ко всем бедам, разрешение 1280×1024 предполагает нестандартное соотношение сторон: 5:4 вместо 4:3, т. е. при переводе монитора на 1024×768 еще и пропорции нарушались. Вот такое неудачное стечение обстоятельств…

Потом на рынке появились мониторы с диагональю 18 и 19 дюймов и с тем же разрешением, на которых размер экранных элементов уже был более пристойным, что снизило остроту проблемы. Однако широкие массы уже получили наглядный урок, что возможность масштабировать интерфейсы на экране - не роскошь, а необходимость. Тем более что с распространением ЖК-матриц старый добрый способ «изменить разрешение экрана» уже не работал, т. е. оставалась только программная настройка системы. Так и проще, и удобнее, и возможностей по настройке гораздо больше. Это сейчас всё кажется таким очевидным, потому что мы привыкли. А ведь долгое время считалось, что нужно менять не масштаб картинки, а разрешение экрана…

Однако масштабирование в Windows выполнить не так просто, как кажется.

Сложности масштабирования интерфейса

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

Иконка на рабочем столе - это простое растровое изображение с жестко фиксированным размером в точках (пикселях), например 32×32, и такого размера она и останется (насколько я помню, сейчас есть варианты 16×16, 32×32, 64×64 точек, но это просто еще одна иконка, нарисованная в другом размере; подробнее о создании иконок, ). Интерфейс выглядит целостно только до тех пор, пока сохраняются заданные создателем пропорции текстовой и графической составляющих.

Возьмем простейший пример: в интерфейсе есть диалоговое окно, на нем кнопка «сохранить изменения», фоном которой служит растровая картинка. Предположим, мы выставили масштаб графики 100%, а dpi=96, и при этих условиях нарисовали интерфейс. Все элементы отлично подогнаны друг под друга и выглядят замечательно. Теперь выставим dpi=120, что произойдет? Текст станет больше, а размер кнопки останется прежним - т. е. текст вылезет за рамки отведенного ему места. Теперь представим себе, что все отрисованное окно - это растровое изображение (битмап), и выставим масштаб 120%. И текст, и фоновые картинки станут размытыми, потеряют четкость. Выглядит такой интерфейс неаккуратно и неприятно. Собственно, это две основных проблемы при масштабировании интерфейсов, и ниже мы поговорим, как они решались и решаются в Windows.

Зоопарк устройств

Компания Apple контролирует и устройства (причем единолично), и программную платформу. Поэтому она, во-первых, может сама решать, какие решения и с какими параметрами ей выводить на рынок, а во-вторых, может поддерживать ограниченный ассортимент продуктов, подбирая наилучшее (по ее мнению) соотношение параметров. Это, помимо всего прочего, облегчает жизнь и самой компании, и сторонним разработчикам в плане создания и оптимизации интерфейса.

Платформа Windows построена на совершенно иных принципах, суть которых в многообразии производителей компонентов, ПО и устройств, объединенных лишь общей операционной системой. Выпуском матриц и мониторов для настольных компьютеров и мобильных устройств на Windows занимаются самые разные производители, поэтому существует огромное количество доступных диагоналей экрана и разрешений, причем постоянно добавляются новые, а старые перестают быть актуальными. Поэтому разработчики ПО просто не могут проверить все варианты и вынуждены создавать интерфейсы по максимально универсальным принципам, которые позволят им работать на любых типах мониторов. До последнего времени единственным постоянным параметром оставалось dpi, и производителям ПО оставалось молиться, чтобы производители мониторов так подбирали соотношение диагонали и разрешения, чтобы 96 dpi примерно соответствовало их PPI.

Однако в реальной жизни производители «железок» оглядываются на маркетинговые цифры больше, чем на своих коллег по производству софта. Например, хотелось бы кинуть гранату и в стан производителей мониторов: эти ребята со спокойной совестью выпускают мониторы с одним и тем же разрешением Full HD 1920×1080, но с диагональю матрицы от 21,5 до 27 дюймов. Причем найти хороший 27-дюймовый монитор с разрешением Full HD (которое мне лучше всего подходит в силу не очень хорошего зрения) до последнего времени было не так-то просто, да и цена там была соответствующая.

Впрочем, даже текущую ситуацию скоро можно будет назвать «добрые старые деньки». Apple подняла на флаг идею резкого увеличения количества плотности пикселей на дюйм и активно внедряет ее во все свои устройства. Новый стандарт уже принят рынком, и чтобы не отстать, платформе Windows приходится двигаться в том же направлении. Это заставляет искать совершенно другие подходы к конструированию интерфейсов и создает очень много новых проблем.

Более того, компания Microsoft сама смело шагнула дальше, включив в парадигму еще и планшеты: т. е. теперь у нас одна и та же операционная система (Windows 8) с одним и тем же интерфейсом должна не просто работать, а обеспечивать высокое удобство использования и схожие ощущения от работы на любом экране, начиная с 10-дюймового планшета с разрешением 1366×768 (это первоначально заявленное минимальное стандартное разрешение для системы, однако сейчас Microsoft снизила это требование до экранов в 7 дюймов и разрешения 1024×768) и до… ну, пусть будет 30-дюймовый (а на самом деле выше) монитор с разрешением, уже превосходящим Full HD (например, 2560×1600).

Таким образом, Full HD (1920×1080) тоже отнюдь не предел. Но основной юмор ситуации даже не в этом, а в том, что экран с разрешением Full HD может оказаться и на громадном 27-дюймовом мониторе (или телевизоре с еще большей диагональю), и на 11-дюймовом экране планшета.

Игры как пример

Итак, думаю, многие читатели уже пришли к выводу, что идеальным выходом было бы создание интерфейса из полностью масштабируемых элементов. Для иллюстрации этого подхода к решению проблемы возьмем другой пример из истории древнего мира: эволюцию компьютерных игр. Изначально они зачастую выглядели так: жестко нарисованный под нужное разрешение задник (фактически - картинка типа обоев) плюс спрайты - растровые изображения фиксированного размера, причем фиксированного в пикселях (можно предаться ностальгии на msdn). Иначе говоря, фактически те же иконки рабочего стола с жестко заданным размером в пикселях или растровые шрифты. Анимация спрайта осуществлялась за счет того, что на месте одного спрайта ставился другой, тоже заранее отрисованный. Как осуществлялось масштабирование спрайтов, я, пожалуй, рассказывать не буду - поберегу нервы читателей.

В принципе, даже все любимые 3D -игры нашего детства, начиная с Wolfenstein 3D, использовали спрайты. В качестве их лебединой песни можно назвать незабвенный Duke Nukem 3D. Это, пожалуй, последняя успешная игра, в которой монстры были спрайтовыми, при том что сам игровой мир уже довольно давно был реально трехмерным.

Статический спрайт можно нарисовать и даже анимировать красиво, но вот беда - только для определенного разрешения и определенного масштаба. Масштабирования он не перенесет. Собственно, ужасные крупные пиксели спрайтов - как раз и есть пример неудачного масштабирования. Поэтому постепенно в играх они стали вытесняться векторными изображениями людей и машин. Так можно построить полноценные двух- и трехмерные модели со всеми плюсами (возможность их разворачивать как угодно, масштабировать и пр.), но и минусами (требуют для расчета значительных вычислительных ресурсов). В общем, это и стало толчком к развитию всех трехмерных видеокарт, которые сейчас пафосно называют GPU. Мир в играх стал полностью масштабируемым, а бонусом - полностью трехмерным, - но ценой сильного роста требований к вычислительным ресурсам. С тех пор идет постоянная гонка: по мере роста вычислительных возможностей железа растет качество обработки и сложность, что повышает требованиz к вычислительным возможностям - и так далее.

Слева - оригинальная игра со спрайтовыми монстрами и характерными для того времени текстурами, справа - результат работы фанатов, которые в т. ч. привели монстров в трехмерный вид.

Впрочем, на трехмерность интерфейса мы пока не претендуем. Нам важно понять, что растровые иконки-картинки не подходят для современной концепции вывода изображения, а раз так - нужно создать новую парадигму построения интерфейса, в которой все элементы могут свободно масштабироваться в зависимости от текущего соотношения разрешения и диагонали экрана. А эта задача посложнее будет, чем у Apple (там требовалось всего-то перерисовать иконки с вдвое большим разрешением). Хотя, в общем-то, при решении этой задачи до сих пор практически повсеместно применяются обходные технологии.

Итак, в первой части мы оценили общее количество и масштабы стоящих перед разработчиками задач. В следующей, второй части , мы рассмотрим, как проблема масштабирования интерфейса решается в Windows - и для традиционного десктопа, и для нового интерфейса (который раньше называли Metro).

Актуальность: 2016

Для измерения размера фотографий применяются по меньшей мере три параметра - разрешение цифрового изображения (в пикселях), размер отпечатка (в сантиметрах) и разрешение при печати (dpi - точки на дюйм). Пользователю, который впервые столкнулся с задачей преобразования изображения, подготовкой его к печати иногда сложно разобраться с этими настройками, приходится действовать наобум и идти к желаемому результату путем проб и ошибок, тратя уйму времени и бумаги.

Приведем простой пример задачи. Вам нужно сделать фотографию на документы. Можно пойти двумя путями - сходить в фотоателье и сфотографироваться там, отдав за 4 маленьких фотографии, напечатанных на листе 10*15 см рублей 150. Второй вариант - сфотографироваться дома, подготовить к печати лист А4, на который втиснуть столько своих фотографий разных размеров, что хватит на несколько лет вперед. Потом идете в фотоателье и печатаете свое творение на листе А4 рублей за 30. Вроде бы с одного заказа выгода смехотворная, но если нужно распечатать фотографии сразу для нескольких человек (например, когда вся семья фотографируется на визу перед путешествием в другую странц), то можно сэкономить более существенную сумму. И это лишь один из примеров. Другой вопрос - как соблюсти размеры фотографий, чтобы на отпечатке они были ровно 4*5 см (или каким-то другим размером). Для того, чтобы подогнать размер отпечатка к требуемому, нужно разобраться в связи сантиметров , пикселей и точек на дюйм .

Пиксели

Пиксель - это одна точка, из которых состоит изображение. Также пикселем называется ячейка изображения на мониторе или жк-телевизоре. Рассмотрите монитор вблизи и вы увидите едва заметную сеточку, одна ячейка этой сетки - и есть пиксель. Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько мегапикселей, то есть, например, 6000 пикселей в ширину и 4000 пикселей в высоту - это 6.000 * 4.000 = 24.000.000 пикселей или 24 мегапикселя. При просмотре на мониторе картинка автоматически масштабируется до разрешения монитора (около 2 мегапикселей). Если мы пытаемся увеличить масштаб (растягиваем фотографию), то до какой-то степени картинка растягивается без видимой потери качества, но потом на ней появляются характерные квадратики. Это происходит, когда реальное разрешение фотографии меньше того, что мы хотим видеть - размер пикселя на фотографии стал больше размера пикселя на мониторе.

Сантиметры

Что такое "сантиметр", я думаю, объяснять не нужно. В нашем случае в сантиметрах измеряется размер отпечатков фотографии. Обычно фотографии печатаются размером 10*15 см, но иногда используются более крупные форматы - 20*30 см (примерно соответствует формату А4), 30*45 см (А3) и больше. Вероятно, вы сталкивались с проблемой - вы нашли на каком-то сайте красивую фотографию и решили ее распечатать ее крупным форматом (например, 20*30 см), но распечатав, заметили, что качество отпечатка не слишком хорошее - конткры объектов получились немного размытыми. Что самое печальное - никакой обработкой эту фотографию не исправить. И все потому, что разрешение фотографии на сайте составляет, к примеру, 900*600 пикселей. То есть, на 1 пиксель на отпечатке будет иметь размер примерно 0.33 миллиметра - при этом сложно рассчитывать на "звенящую" резкость! И здесь появляется еще один параметр качества изображения, при помощи которого можно оценить качество отпечатка - DPI

DPI

DPI сокращение английской фразы Dots per Inch, что на русский переводится как точки на дюйм. Эта величина как раз показывает, сколько пикселей изображения приходится на один "погонный" дюйм при печати (дюйм равен 2.54 см). Еще есть величина DPC (точек на сантиметр), но она используется реже - как ни крути, все эти технологии печати пришли к нам оттуда, где в ходу дюймы, футы, фунты и т.д. Итак, вернемся к нашему примеру - картинке 900*600 пикселей, которую мы решили напечатать форматом 30*20 см. Переведем для удобства сантиметры в дюймы - получаем 11.8 * 8.9". Если поделить 900 пикселей на 11.8", то получаем разрешение печати 76 DPI . Это примерно соответствует разрешающей способности монитора с его "крупными" пикселями, поэтому картинка на экране смотрится хорошо. Но чтобы получить отпечаток приемлемого качества, нужно разрешение печати как минимум 150 DPI, а если хотим совсем хорошую детализацию, не менее 300 DPI. Чтобы обеспечить такое разрешение при печати 30*20 сантиметров, оригинальное цифровое изображение должно иметь разрешение 3540 * 2670 пикселей - это около 9 мегапикселей. Вот и нашли причину, почему фотографии, распечатанные "из интернета" выглядят нерезко и мутно. Теперь вернемся к нашему вопросу - как подогнать разрешение картинки, чтобы оно печаталось заданным размером? В качестве примера рассмотрим подготовку фотографий для документов.

Создание собственного фото на документы - пошаговая инструкция

Предположим, вам нужно сделать несколько фотографий размером 4*6 см и разместить их на листе 20*30 см. Как это сделать?

1. Берем исходное изображение, открываем его в Photoshop. Выбираем пункт меню "изображение" - "размер изображения". Перед нами открывается такое диалоговое окно:

В открывшемся диалоге мы видим две группы настроек - "размерность" и "размер печатного оттиска". В группе "размерность" отображаются размеры цифрового изображения в пикселях. Эти настройки не трогаем! В группе "размер печатного оттиска" устанавливаем нужный нам размер в сантиметрах (единицы измерения выбираются из выпадающих списков). В нашем случае это 4*6 см. Также задаем разрешение при печати - 300 пикселей на дюйм, этим мы обеспечим хорошее качество печати.

Меняя настройки размера печатного оттиска, мы видим, что размеры в пикселях тоже изменяются. Так и должно быть! После всего этого нажимаем кнопку ОК. Изображение меняется в размерах. Теперь нам нужно скопировать его - используем комбинацию клавиш:

1. Ctrl + A (англ) - выделить все
2. Ctrl + C (англ) - скопировать в буфер обмена

То, что скопировано в буфер обмена мы будем переносить на отдельный холст, см п.2. 2. Теперь нам надо создать новое изображение, которое будет соответствовать листу 20*30 см, который мы пойдем распечатывать в фотолабораторию. Выбираем меню "Файл", "Создать", появляется диалоговое окно:

Указываем размер фотобумаги, на которой будет выполняться печать (20 на 30 см) и выставляем разрешение в пикселях на дюйм такое же, какое имеет наша фотография - 300 DPI. Нажимаем ОК.

3. Появилось пустое изображение с прозрачным фоном. Нажимаем комбинацию клавиш Ctrl + V и вставляем наше первое изображение на новый холст. Это будет выглядеть примерно так:

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

На холсте появится еще одна такая же картинка, изначально она "лежит" на исходном слое. Перемещаем ее и ставим рядом. Таким же образом создаем столько дубликатов слоев, сколько нам нужно. После этого выполняем сведение слоев (меню "Слой", "Выполнить сведение").

Сохраняем картинку в формате JPEG, копируем на флешку и идем в фотолабораторию. Оператору говорим следующее - "напечатайте это изображение форматом 20*30 см с разрешением 300 DPI без масштабирования ". При этом маленькие картинки будут иметь точно такой размер, какой мы для них указали - в нашем случае 4*6 сантиметров. При себе желательно иметь линейку, чтобы проверить размеры отпечатков.

1. I set my screen to 72 DPI and designed a small png image that is 100x100 @ 72 DPI. Which means 72 pixels represents 1 inch.
2. Now I changed my screen to 120 DPI and designed the same graphic png image with 100x100 @ 120 DPI. Which means 120 pixels represents 1 inch.
3. Again I changed my screen to 96 DPI. Which means 96 pixels represents 1 inch. Then Created a wpf application and added the two images (step 1 and step 2) - I have set the Stretch Mode to None

Не уверенный, если я понял понятие правильно, Я ожидал, что изображение на 72 точки на дюйм будет выглядеть меньшим на 96 точек на дюйм потому что, если 72 пикселя представляли 1 дюйм для того изображения, то в новой конфигурации 96 пикселей представляет 1 дюйм. И поэтому я ожидал, что изображение на 72 точки на дюйм будет выглядеть меньшим. Но не имеет место. Infact, это был просто он напротив. Изображение на 72 точки на дюйм выглядит больше 96 точек на дюйм. Почему? Похож на него, wpf будет всегда не выполнять своих обязательств к 96 точкам на дюйм когда дело доходит до изображений?

Update Why is that, even at 120 dpi (setting system dpi to 120), only 96 dpi image fits 200x200 box perfectly?

2 ответы

Вы делаете некоторые странные предположения о природе независимой от устройств природы графических отделений WPF.

Независимый от устройств пиксель в wpf мире стоящий 1/96-го из дюйма независимо от параметров настройки экрана. Поэтому только эксперимент на 96 точек на дюйм правилен.

Во-вторых, ваши точки на дюйм уроженца мониторов оказывают влияние

Второй масштабный коэффициент, “урегулирование точек на дюйм”, то, по чему мы изменимся наши тесты. wpf независимо не знает что ваш фактический монитор физическая стоимость точек на дюйм. Вместо этого wpf использует текущее урегулирование этого второй масштабный коэффициент “урегулирование точек на дюйм”. Если “урегулирование точек на дюйм” не делает соответствуйте истинным физическим точкам на дюйм, затем “независимость разрешения” wpf будет кажись, сломаться - хотя это действительно не делает.

У изображения, у которого есть 72 точки на дюйм (точки на дюйм), будет 72 точки на дюйм, тогда как изображение, у которого есть 120 точек на дюйм, будет иметь 120 за дюйм. Поэтому, если мы покажем изображение, которое является дюймом дюймом, у каждой стороны будет 72 точки для изображения на 72 точки на дюйм и 120 точек для изображения на 120 точек на дюйм.

Поэтому каждая точка по изображению на 72 точки на дюйм больше, чем каждая точка по 120 изображениям, таким образом, целое изображение на 72 точки на дюйм больше, чем изображение на 120 точек на дюйм.

Для дополнительных материалов для чтения вы хотели бы рассматривать Урегулирование точек на дюйм и разрешение применения WPF страница на веб-сайте Решений Mindfire.

Как вы все прекрасно знаете, консорциум W3C в стандарте CSS 2.1 дает нам для задания размеров, в частности шрифтов, абсолютные и относительные единицы измерения.

К абсолютным причислены:

• in — inches , дюймы. 1 дюйм = 2.54 сантиметра
• cm — сантиметры
• mm — миллиметры
• pt — points , пункты. 1 пункт = 1/72 дюйма. То что находится в выпадающем списке Ворда при выборе размера шрифта и есть пункты
• pc — picas , пики. 1 пика = 12 пунктам

К относительным:

• em — font-size , высота соответствующего шрифта (). Так же встречалось определение em — как ширины символа m .
• ex — x-height , высота символа x соответствующего шрифта
• px — пикселы

Вы заметили?
Пикселы — относительные еденицы измерения!
Как, а вы не знали? :)

Мануал CSS 2.1 поясняет:

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего — дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя.

Это теория.

А теперь немного практики.

Открываем наш любимый Windows на Панели управления. В свойствах «Экрана» заглядываем на закладку Настройка -> Дополнительно -> Общие:

96 точек на дюйм (dots per inch). Это — типичная плотность (dpi) для мониторов с разрешением 1024×768 и около того.
Для чего же нам этот параметр? 96 dpi означает, что на один дюйм вашего монитора приходится 96 пикселов. Нет, не нужно тянуться к линейке, реальная величина зависит от монитора, можете верить на слово. Этот параметр необходим для пересчета физических размеров матрицы монитора (дюймы, сантиметры, миллиметры) в пикселы и обратно.

А теперь о том, с чего начался этот пост.

Измените разрешение с 96 dpi (Мелкий шрифт) на 120 dpi (Крупный шрифт) и посмотрите во что превратится ваш любимый интернет. И это не говоря уже о программах, написанных под разрешение 96 dpi.
Вся проблема в том, что размеры фиксированных элементов, таких как например картинки, размеры окон и областей, заданы в пикселах , а размеры шрифтов, как правило, в пунктах .

И хотя в теории, ПА (пользовательский агент ) должен масштабировать пикселы, на практике пикселы остаются абсолютными.

Учитывая широкое распространение мониторов с диагональю более 17″, все чаще пользователи вместо того чтобы увеличивать размер шрифта по умолчанию, увеличивают плотность, отказываясь от стандартной в 96 dpi.

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

Например, при стандартной плотности 96 dpi , шрифт 14 pt имеет высоту:

H = 14*96/72 = 18.666 px ~ 19 px

А при плотности 120 dpi , шрифт 14 pt имеет уже высоту:

H = 14*120/72 = 23.333 px ~ 23 px

Пересчет из пунктов (pt) в пикселы (px) делается из соотношения 1 pt = 1/72 дюйма:

Вот такие вот относительные пикселы:)

P.S. Пока ребята из W3C теоретизируют, давно уже надо было передавать в cgi запросе, наряду с User agent, такие параметры как разрешение экрана, размеры отображаемой области браузера, dpi и глубину цвета. А на стороне сервера просто выбирать нужный шаблон. Ведь не в 20-м веке живем.

Что такое пиксели и что такое DPI? September 20th, 2012

Вас пугают слова "пиксели" и "DPI" или вы не до конца понимаете их значение? Тогда несколько строчек ниже - для вас.

Пиксели на экране - точки на экране, которые формируют изображение.
Пиксели в растровой графике - минимальные цветовые точки, которые формируют изображение.
Размер в пикселях - ширина и высота изображения. К примеру, 800х600- значит, что по горизонтали картинка имеет 800 точек, а по вертикали- 600.

DPI это сокращение от английского "d ots p er i nch" и переводится как "точек на дюйм".

Количество пикселей на единицу длины называется разрешением. Чем больше точек на дюйм, тем выше разрешение и тем самым - качественнее изображение. Иллюстрация ниже наглядно покажет эту разницу:

Что значить 72 DPI или 300 DPI и в чем разница?

72 DPI (или 96) - файлы для интернет, где одна точка на экране вашего монитора соответствует одному пикселю изображения. Еще называют - экранное разрешение изображения. Больше чем 72 DPI делать картинку для Интернет - нет смысла, так как монитор все равно больше не отобразит.

72 точки на дюйм = 28 точкам на сантиметр.

300 DPI необходимо для качественной печати в типографии. Количество точек на дюйм значительно увеличено, чтобы повысить качество изображения. Но для каждого типа печати это значение может меняться. В целом, если печатный продукт рассматривается человеком на близком расстоянии, то количество точек на дюйм должно быть высоким. Это журналы, буклеты, листовки. Для макета, который будут рассматривать на расстоянии требования ниже. К примеру, для билборда это значение может быть 56 dpi и ниже.
300 точек на дюйм = 118 точкам на сантиметр.