Комментарии 71
96 / 72 * 10
Проще для восприятия будет 10 / 0.75. Я раньше эмпирически нашел это значение (0.75) и стал использовать при переводе из пикселей в пункты и обратно. Теперь понятно, что это 72 / 96 и откуда вообще оно взялось :-)
Мне ранее казалось, что это вполне очевидно, и для хабрасообщества, творящего веб, это давно знакомые и понятные вещи.
Если вы верстальщик, то для вас это очевидно. Но если дизайнер например читает подобной тематики топики, то не каждый знает этих вполне очевидных мелочей.
Дизайнер тоже должен это знать. Он же дизайнер, а не художник.
но не все это знают
Неопытные могут не знать. На фрилансах таких много. Руководитель должен понимать, кого берет к себе на работу.
Есть такие штуки как джуниор-верстальщики, которые такого могут и не знать
В любом случае даже если это все знают, пусть статья лежит тут. Я уверен что она еще много кому пригодится
В любом случае даже если это все знают, пусть статья лежит тут. Я уверен что она еще много кому пригодится
НЛО прилетело и опубликовало эту надпись здесь
вы зануда
Кстати, пару лет назад уже обсуждали этот вопрос.
Еще есть такая замечательная относительная величина – проценты.
Или я не прав?
Или я не прав?
я только что писал в статье:
Проценты (%) — всегда величина, о которой стоит говорить отдельно. Она настолько важная, что W3C вынес ее в отдельную колонку. Тоесть % можно писать не у всех правил, а только у некоторых и когда мы пишем % мы должны понимать от чего они считаются.
Проценты (%) — всегда величина, о которой стоит говорить отдельно. Она настолько важная, что W3C вынес ее в отдельную колонку. Тоесть % можно писать не у всех правил, а только у некоторых и когда мы пишем % мы должны понимать от чего они считаются.
ну как бы о ней в статье тоже речь идет.
Или я не прав?
Или я не прав?
Да, я уже понял, что дурак.
подробнее о процентах я писал в предыдущей статье
диакритические знаки
на практике даже em'ы часто вносят свои проблемы
шаг в лево, шаг в право —расстрел на местеедет верстка (webkit округляет до целого px, а ff нет)
шаг в лево, шаг в право —
все уже знают про REM?
то же самое что EM, но только от корневого элемента.
поддерживается во всех современных браузерах.
snook.ca/archives/html_and_css/font-size-with-rem
то же самое что EM, но только от корневого элемента.
поддерживается во всех современных браузерах.
snook.ca/archives/html_and_css/font-size-with-rem
Для меня новость, что px это относительный размер… Казалось это единственное абсолютное значение, а cm, in и тд… относительны. По причине, что при разных обстоятельствах в них будет разное количество px:). px мол абсолютная светящейся точка, а всё остальное по ней меряется… )
Если взглянуть в реальном мире на 1cm с некоторого расстояния, то он будет меньше. Это ведь не говорит, о том, что cm относительная величина… Так и с px меняй расширение экрана или не меняй px всегда будет px.
Возможно тут идёт какая-то подмена понятий…
В реальном мире, да, есть эталон сантиметру… но разве одноцветная точка не эталон для пикселя. Может быть в виртуальном мире нет эталона для cm, либо он меняется от мира к миру… сайты, онлайн игры, печать в конце концов, нет там вроде сантиметров…
Человек со слабым зрением может читать газету с лупой… или выставить на мониторе большое расширение (это так на самом деле и делается если слабое зрение)
Для чего выставляется большое расширение:
а) было больше пространства — на экране всё становится меньше
б) нужно больше детализация, при сохранении размеров — на экране всё осталось тех же размеров
Не ошибусь, если скажу, что происходит всегда (а) — всё уменьшается как человеком и ожидается, Следовательно px не изменился мы просто смотрим на него с большего расстояния и визуально всё уменьшилось…
Хотя возможно компромиссно происходит, что-то уменьшилось у чего-то детализация увеличилась
Ещё как Вам мысль… Оо я купил огромный моник, теперь я выставлю на нём огромное расширение и смогу таки увидеть все детали, экрана то достаточно для этого…
Какой смысл выставлять 3000 x 2000 на наладоннике… ) В смысле ожидается что всё будет маленьким…
Не пытаюсь опровергнуть просто ищу истину или понимание…
Если взглянуть в реальном мире на 1cm с некоторого расстояния, то он будет меньше. Это ведь не говорит, о том, что cm относительная величина… Так и с px меняй расширение экрана или не меняй px всегда будет px.
Возможно тут идёт какая-то подмена понятий…
В реальном мире, да, есть эталон сантиметру… но разве одноцветная точка не эталон для пикселя. Может быть в виртуальном мире нет эталона для cm, либо он меняется от мира к миру… сайты, онлайн игры, печать в конце концов, нет там вроде сантиметров…
Человек со слабым зрением может читать газету с лупой… или выставить на мониторе большое расширение (это так на самом деле и делается если слабое зрение)
Для чего выставляется большое расширение:
а) было больше пространства — на экране всё становится меньше
б) нужно больше детализация, при сохранении размеров — на экране всё осталось тех же размеров
Не ошибусь, если скажу, что происходит всегда (а) — всё уменьшается как человеком и ожидается, Следовательно px не изменился мы просто смотрим на него с большего расстояния и визуально всё уменьшилось…
Хотя возможно компромиссно происходит, что-то уменьшилось у чего-то детализация увеличилась
Ещё как Вам мысль… Оо я купил огромный моник, теперь я выставлю на нём огромное расширение и смогу таки увидеть все детали, экрана то достаточно для этого…
Какой смысл выставлять 3000 x 2000 на наладоннике… ) В смысле ожидается что всё будет маленьким…
Не пытаюсь опровергнуть просто ищу истину или понимание…
У меня тоже все внутри перевернулось, когда про пиксель (px) такое прочитал.
С таким же успехом (доводя ситуацию до полного абсурда) можно сказать, что и сантиметр (в смысле cm) — тоже не менее относительная величина, потому что если отображать верстку сантиметрами на двух разных мониторах (с разной длиной диагонали), но, с одинаковым разрешением, то, сантиметр на маленьком экране будет гораздо короче того же самого сантиметра на огромном мониторе!
И, вообще, если вспомнить труды Альберта нашего Эйнштейна, то в CSS вообще не останется абсолютно ничего абсолютного.
С таким же успехом (доводя ситуацию до полного абсурда) можно сказать, что и сантиметр (в смысле cm) — тоже не менее относительная величина, потому что если отображать верстку сантиметрами на двух разных мониторах (с разной длиной диагонали), но, с одинаковым разрешением, то, сантиметр на маленьком экране будет гораздо короче того же самого сантиметра на огромном мониторе!
И, вообще, если вспомнить труды Альберта нашего Эйнштейна, то в CSS вообще не останется абсолютно ничего абсолютного.
Если взглянуть в реальном мире на 1cm с некоторого расстояния, то он будет меньше.
Вы меня очень удивили этой фразой. Так можно сказать про что угодно. И килограммы тоже относительны, если их везти с разной скоростью =)
Пиксель — величина относительная. Сантиметр — абсолютная.
Поставили вы размер div'a в 5 сантиметров — он и будет 5 сантиметров на любом мониторе, в не зависимости от текущегорасширения разрешения (устройства и проч). Где-то в эти 5 сантиметров поместятся 100 точек, где-то 100500. На лицо — абсолютный размер, т.к. вы всегда можете измерить этот блок линейкой и получить 5 сантиметров. Правда при условии, что измерять будете вплотную к объекту, а не с расстояния =)
Поставили вы размер div'a в 100 пикселей, на мониторе он будет сантиметр, на телефоне 2 сантиметра и так далее, в завимости от разрешения. На лицо — относительный размер.
И кстати, 3000х2000 на наладоннике было бы очень даже неплохо. И если всё станет слишком мелко, то это проблема того, кто указал размеры объектов на экране в пикселях, вместо абсолютных величин или процентов.
Вы меня очень удивили этой фразой. Так можно сказать про что угодно. И килограммы тоже относительны, если их везти с разной скоростью =)
Пиксель — величина относительная. Сантиметр — абсолютная.
Поставили вы размер div'a в 5 сантиметров — он и будет 5 сантиметров на любом мониторе, в не зависимости от текущего
Поставили вы размер div'a в 100 пикселей, на мониторе он будет сантиметр, на телефоне 2 сантиметра и так далее, в завимости от разрешения. На лицо — относительный размер.
И кстати, 3000х2000 на наладоннике было бы очень даже неплохо. И если всё станет слишком мелко, то это проблема того, кто указал размеры объектов на экране в пикселях, вместо абсолютных величин или процентов.
Да, фраза странная))
Есть ещё такой момент, к тому что может не обязательно указывать относительные размеры в вёрстке, что все браузеры отказались от прямого увеличения или уменьшения шрифта, такая опция была в меню и создавала дополнительные проблемы верстальщику… сейчас браузеры просто меняют масштаб всего и проблем с размерами выставленных в пикселях нет при масштабировании…
Если уменьшить расширение рабочего стола (Win), всё уменьшится в частности из-за того, что невозможно качественно масштабировать иконки и скорее всего и другие сложности есть… То есть причина конечно в том, что все размеры выставлены в пикселях, но как иначе если растровая иллюстрация выполнена под конкретный размер иначе её качество портится… нельзя же иллюстрацию сохранить в cm… Везде нужно вектор тогда использовать
Также сложности с измерением линейкой, в связи с разным «размером точки» у экранов… возможно на каком-то уровне это и можно учитывать, но сейчас это не делается, и если выставить масштаб 100% и размер 1см у картинки на экране она не всегда будет этого размера… в моём случае 10см на линейке показались 7см ) в mspaint
Возможно вы правы с терминологией… но кажется реальность это игнорирует… )))
Есть ещё такой момент, к тому что может не обязательно указывать относительные размеры в вёрстке, что все браузеры отказались от прямого увеличения или уменьшения шрифта, такая опция была в меню и создавала дополнительные проблемы верстальщику… сейчас браузеры просто меняют масштаб всего и проблем с размерами выставленных в пикселях нет при масштабировании…
Если уменьшить расширение рабочего стола (Win), всё уменьшится в частности из-за того, что невозможно качественно масштабировать иконки и скорее всего и другие сложности есть… То есть причина конечно в том, что все размеры выставлены в пикселях, но как иначе если растровая иллюстрация выполнена под конкретный размер иначе её качество портится… нельзя же иллюстрацию сохранить в cm… Везде нужно вектор тогда использовать
Также сложности с измерением линейкой, в связи с разным «размером точки» у экранов… возможно на каком-то уровне это и можно учитывать, но сейчас это не делается, и если выставить масштаб 100% и размер 1см у картинки на экране она не всегда будет этого размера… в моём случае 10см на линейке показались 7см ) в mspaint
Возможно вы правы с терминологией… но кажется реальность это игнорирует… )))
>он и будет 5 сантиметров на любом мониторе,
В том-то и дело, что не будет
В том-то и дело, что не будет
Раздел 4.3.2 спецификации CSS 2.1 гласит
Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit
Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit
Да сколько можно уже мусолить одно и то же…
Найдется один лжепророк, который придумает, что истина — это проценты. Второй будет ходить по миру и нести огнем и мечем Правду, что самые правильные единицы — em. Третий будет ставить только px.
Если бы были только один и самый правильный тип единиц измерения, то именно его бы и оставили. Но разработчики спецификации сделали много вариантов, чтобы в разных ситуациях был выбор наиболее эффективных единиц, а не один, причиняющий боль и вносящий бурную, неадекватную эмоциональную реакцию на процесс разработки.
Чесать все под одну гребенку хорошо, но Прокруст закончил плохо.
Найдется один лжепророк, который придумает, что истина — это проценты. Второй будет ходить по миру и нести огнем и мечем Правду, что самые правильные единицы — em. Третий будет ставить только px.
Если бы были только один и самый правильный тип единиц измерения, то именно его бы и оставили. Но разработчики спецификации сделали много вариантов, чтобы в разных ситуациях был выбор наиболее эффективных единиц, а не один, причиняющий боль и вносящий бурную, неадекватную эмоциональную реакцию на процесс разработки.
Чесать все под одну гребенку хорошо, но Прокруст закончил плохо.
Так донесите свет и расскажите в каких ситуациях какие единицы использовать!
Каждая ситуация уникальна, выбор конкретного типа зависит от множества факторов.
Простой пример. Если пользователь работает с данными, которые нужно иногда печатать, то логичнее выбрать для размера шрифта pt, а для блоков — em или cm. Тогда модификаций под печатную версию будет минимум.
Если дизайн резиновый и мультимедийный (для мобил, экранов, телевизоров), используйте % или em, но можете взять и другие единицы.
Всегда ищите самые дешевые в поддержке единицы измерения. А для разных проектов они могут быть разными.
Простой пример. Если пользователь работает с данными, которые нужно иногда печатать, то логичнее выбрать для размера шрифта pt, а для блоков — em или cm. Тогда модификаций под печатную версию будет минимум.
Если дизайн резиновый и мультимедийный (для мобил, экранов, телевизоров), используйте % или em, но можете взять и другие единицы.
Всегда ищите самые дешевые в поддержке единицы измерения. А для разных проектов они могут быть разными.
Если придерживаться Вашего (а не зафиксированного в спецификации CSS) понимания относительных единиц измерения последовательно, то все они относительные. Браузерный дюйм ничуть не абсолютнее пикселя, поскольку строго равен 96 пикселям.
да, он равен 96-ти пикселям, но размер мониторов, то у всех разные и я имел в виду, что каждый монитор по разному считает единицы измерения
Только вот, если 1 пиксель для шрифта — это интуитивно понятная величина, а 1 дюйм интуитивно следовало бы ожидать как 25,4мм.
Как не назови (относительное, интуитивное), а самый очевидный — пиксель.
Как не назови (относительное, интуитивное), а самый очевидный — пиксель.
Что значит «очевидный»? Почему один пиксель «очевиднее», чем 96? Сформулируйте свою мысль яснее, пожалуйста.
Очевидные вещи умеет объяснять очень мало кто. Если вы не можете их сами понять, ничем не могу помочь.
Я могу понимать или не понимать очевидные утверждения. Но как «очевидным» может быть пиксель? Он просто есть, это не очевидно, это бесспорно. Вероятно, Вы имеете в виду, что очевидными являются какие-то его свойства. Вот я и уточняю: какие?
Очевидным у «пикселя» является он сам. но я говорю не про физическую часть монитора, а про абстрактное понятие из CSS. Оно очевидно соответствует пикселю на экране. А вот «in» не соответствует своему названию и это *понятие* не является очевидным.
Абстрактное понятие пиксель из CSS2.1 равно 1/96 реального дюйма. 96 пикселей измеренные по линейки на монитре должны составлять 2,5 см. Но все известные мне браузеры отображают 96 пикселей как 2,5 см лишь при случайном стечении обстоятельств.
Там (в спецификации) сказано, что дюйм реальный? По-моему, нет. Чему он будет равен на устройствах с 300 PPI, я боюсь даже представлять (очевидно, он будет в три с лишним раза меньше реального).
В конце концов, у мониторов есть ещё всякие настройки изображения, которые прямо меняют размер экрана, но, насколько я понимаю, остаются неизвестны компьютеру. Это печально.
Похоже, возможность привязаться к реальным размерам одна — использовать базовый размер шрифта (
В конце концов, у мониторов есть ещё всякие настройки изображения, которые прямо меняют размер экрана, но, насколько я понимаю, остаются неизвестны компьютеру. Это печально.
Похоже, возможность привязаться к реальным размерам одна — использовать базовый размер шрифта (
em у body, а в IE9+ и Fx3.6+ — rem у кого угодно), уповая на то, что браузер старается выдать его примерно соответствующим шестой части реального дюйма, и памятуя, что это соответствие в любом случае будет приблизительно.Если в спецификации, скажем, на трубы вы читаете «диаметр 3/4 дюйма» вы тоже ищите упоминания, реальный ли это дюйм? Очевидно что дюйм всегда должен быть равен дюйму или 2,54 см. И как раз на устройствах с 300-2400 dpi (принтерах) он отображается нормально, а вот для мониторов почему-то исключение.
Монитор сообщает компьютеру свой физический размер экрана в миллиметрах. Причём ЭЛТ мониторы сообщают размер видимой области кинескопа, а не полный. Если пользователь химичит с настройками предполагается, что он знает что делает.
Монитор сообщает компьютеру свой физический размер экрана в миллиметрах. Причём ЭЛТ мониторы сообщают размер видимой области кинескопа, а не полный. Если пользователь химичит с настройками предполагается, что он знает что делает.
В спецификации на трубы не сказано, что дюйм строго равен 96-ти пикселям изменяемого размера. Но, да, не лишне будет найти какое-то указание (хотя бы происхождение спецификации), что имеется в виду именно современный английский дюйм. Потому что этих дюймов в истории было — вагон и маленькая тележка. Теперь ещё один — CSS-ный, условный.
Теперь понятно: Вы имели в виду, что то, какой размер имеет пиксель, интуитивно ясно.
…Хотя в проекте CSS3 Values and Units пиксель действительно отнесён к относительным единицам, поскольку, как я понял, дюймы и прочие сантиметры отвязываются от него и понимаются действительно как абсолютные.
Но, насколько я понимаю, этот проект, увы, ещё не реализован ни в каких браузерах.
Но, насколько я понимаю, этот проект, увы, ещё не реализован ни в каких браузерах.
Не, я всё понимаю.
В 2011-ом году вполне можно пользоваться ЭЛТ-мониторами, на которых можно указать любое разрешение экрана. Или LCD-мониторами, и указывать у них неродное расширение.
В 2011-ом году вполне можно выбирать монитор по критерию «физический размер его пикселя обязан быть 1/96 дюйма». Ну, или, как вариант, можно брать монитор чуть более современный, с экраном в 145 DPI, и при этом не трогать настройку операционной системы, дезинформируя её утверждением «я утверждаю, что в моём мониторе всё равно 96 пикселей на дюйм, ты так и рендерь тексты», и следовательно обеспечивать, что с точки зрения операционной системы, «физический дюйм» и «логический дюйм» не равны.
В 2011-ом году вполне можно следовать совету «не использовать абсолютные единицы для шрифтов». Неважно где: в вебе, в создании программ. Тем самым создавая забавный эффект, при котором одни и те же буквы одного и того же текста на стоящих рядом мониторах могут быть разного размера (если у мониторов разный размер пикселя). Даже если эти мониторы подключены к одному компьютеру.
Я понимаю, всё это вполне можно делать.
Но зачем?
В 2011-ом году вполне можно пользоваться ЭЛТ-мониторами, на которых можно указать любое разрешение экрана. Или LCD-мониторами, и указывать у них неродное расширение.
В 2011-ом году вполне можно выбирать монитор по критерию «физический размер его пикселя обязан быть 1/96 дюйма». Ну, или, как вариант, можно брать монитор чуть более современный, с экраном в 145 DPI, и при этом не трогать настройку операционной системы, дезинформируя её утверждением «я утверждаю, что в моём мониторе всё равно 96 пикселей на дюйм, ты так и рендерь тексты», и следовательно обеспечивать, что с точки зрения операционной системы, «физический дюйм» и «логический дюйм» не равны.
В 2011-ом году вполне можно следовать совету «не использовать абсолютные единицы для шрифтов». Неважно где: в вебе, в создании программ. Тем самым создавая забавный эффект, при котором одни и те же буквы одного и того же текста на стоящих рядом мониторах могут быть разного размера (если у мониторов разный размер пикселя). Даже если эти мониторы подключены к одному компьютеру.
Я понимаю, всё это вполне можно делать.
Но зачем?
Зачем мне на ЭЛТ мониторе указывать разрешение 96 dpi (1280х960), а не комфортное для меня во всех случаях (кроме серфинга) 120 (1600х1200)?
Почему производители браузеров и ОС (?) отказываются применять сведения, который им монитор сообщает (в некоторых ОС так вообще — в одном месте видишь 96, в другом 120). Почему не дают верстальщикам и прочим ЮИ-дизайнерам показывать сайт посетителю (если он не применял специальных настроек), как они его хотят показать (шрифт высотой не 16 физических пикселей, а 12 абсолютных пунктов или 1/6 дюйма)? Почему, в конце-концов, они не выполняют требования спецификации CSS2.1? Зачем усложнять жизнь и пользователям, и разработчикам?
Почему производители браузеров и ОС (?) отказываются применять сведения, который им монитор сообщает (в некоторых ОС так вообще — в одном месте видишь 96, в другом 120). Почему не дают верстальщикам и прочим ЮИ-дизайнерам показывать сайт посетителю (если он не применял специальных настроек), как они его хотят показать (шрифт высотой не 16 физических пикселей, а 12 абсолютных пунктов или 1/6 дюйма)? Почему, в конце-концов, они не выполняют требования спецификации CSS2.1? Зачем усложнять жизнь и пользователям, и разработчикам?
Мир вокруг нас безумен, да.
Я вот сейчас покопался, и (после того как окончательно осознал, что «пиксель» с точки зрения HTML не равен «пикселю» с точки зрения браузера почти для всех браузеров) убедился в этом окончательно.
Я вот сейчас покопался, и (после того как окончательно осознал, что «пиксель» с точки зрения HTML не равен «пикселю» с точки зрения браузера почти для всех браузеров) убедился в этом окончательно.
А какие исключения нашли? Вроде Firefox 3.0 и 3.5 отображали более-менее похожие на правду дюймы (при условии, что ОС сообщала более-менее похожее на правду разрешение — чем винда, как помнится, не славилась, сообщая то разные цифры при одном разрешении, то одинаковые при разных).
Я не знаю, 23,8 мм вместо 25,4 мм (у меня на работе) — это «более-менее похожие на правду дюймы»? Проверено: так во всех браузерах. И во всех же CSS-ный пиксель оказался строго равен экранному.
У меня Линукс (возможно, в Windows всё иначе), Opera и Chrome. В линуксе указано разрешение точно:
Оба врут. Настройка opera:config#UserPrefs|ForceDPI почему-то не меняет DPI для HTML (хотя меняет, например, видимый размер шрифтов в меню самой Оперы). Chrome просто не имеет собственных средств форсирования DPI.
Такое впечатление, что оба браузера трактуют абзац “For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.” как «всё равно к Линуксу никто не будет подключать high-resolution display, там одни нищеброды, а значит — пойдём по второму пути и приравняем CSS-пиксель к физическому пикселю, зато полностью собьём все физически корректные меры длины».
~:$ xdpyinfo | egrep 'dimension|resolution' dimensions: 1400x1050 pixels (245x184 millimeters) resolution: 145x145 dots per inch
Оба врут. Настройка opera:config#UserPrefs|ForceDPI почему-то не меняет DPI для HTML (хотя меняет, например, видимый размер шрифтов в меню самой Оперы). Chrome просто не имеет собственных средств форсирования DPI.
Такое впечатление, что оба браузера трактуют абзац “For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.” как «всё равно к Линуксу никто не будет подключать high-resolution display, там одни нищеброды, а значит — пойдём по второму пути и приравняем CSS-пиксель к физическому пикселю, зато полностью собьём все физически корректные меры длины».
А xrandr (кажется так, сейчас под виндой на планшете) что показывет? Я столкнулся с тем, что с некоторых пор две иксовые утилиты показывали разные значения — одна из них считала всё правильно, другая брала 96 дпи и исходя из размеров экрана в пикселях считала физические размеры. Так я внезапно обнаружил, что получил несколько дюймов на халяву :)
А он всё правильно показывает, как и xdpyinfo.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Какие единицы измерения выбирать при верстке