@Dark_Knight read-only
Пользователь
16 июня 2011 в 10:49

Разработка → Какие единицы измерения выбирать при верстке

CSS*
В прошлой моей статье я затронул единицы измерения и тут же в комментариях начались на эту тему споры и обсуждения, поэтому я решил вынести этот вопрос в отдельный пост. Вот теперь и обсудим :)

Единицы длины бывают двух категорий: абсолюные и относительные. К абсолютным относятся:
  • дюймы (in)
  • сантиметры (cm)
  • миллиметры (mm)
  • пункты (pt)
  • пики (pc)

В терминах спецификации css 1pt = 1/72in, а 1pc = 12pt.
В свойстве font-size задание отрицательного значения в единицах длины, например -25cm, недопустимо.
Почему абсолютные? Потому что за ними в физическом мире стоит реальная величина, тоесть эталоны.
С такими единицами работает устройство вывода, которое имеет реальный физический размер, например: при печати будем использовать такие единицы.
А вот для мониторов эти единицы не имеют никакого значения, есть некая условность, но это действительно только лишь условность.
К относительным единицам относятся:
  • em (кегельная)
  • x-height (ex)
  • px (пикселы)

Проценты (%) — всегда величина, о которой стоит говорить отдельно. Она настолько важная, что W3C вынес ее в отдельную колонку. Тоесть % можно писать не у всех правил, а только у некоторых и когда мы пишем % мы должны понимать от чего они считаются.
Пиксель — это мельчайшая точка, которую можно установить на экране компьютера.
Почему пиксель относительная величина? Мы берем физический монитор, у которого есть диагональ — это реальная физическая величина. Но ведь мы можем поставить на нем разрешение любое, правильно? В зависимости от поставленного нами разрешения, величина пикселя может меняться. Вот почему пиксель — относительная величина. Тоесть на разных мониторах px имеет разный размер.
Единица em ссылается на размер стандартного шрифта, установленного в глобальныъ параметрах браузера.
image
На таблице обозначения отдельных важных размеров шрифтов. Большая их часть нам не пригодится, но некоторые нужно знать.
Под цифрой 4 обозначена базовая линия элементов шрифтов, а под цифрой 13 — font-size, em. Так вот, em — это размер шрифта, который определяется высотой заглавной буквы и размеры выносных элементов сверху и снизу( вверху могут появиться диакритические знаки, например: ё или й ).
А что такое ex? Это высота строчной буквы. Под цифрой 3 в таблице так и написано. Для разных шрифтов это соотношение имеет разную величину. Но не все браузеры поддерживают такое соотношение.
Например: компания Microsoft предложила считать 1em = 2ex для всех типов шрифтов. Именно по причине, что ex в разных браузерах может быть разным, лучше в работе его не использовать. Некоторые браузеры действительно считают ex правильно, а некоторые, как IE в половину от em. А в реальности он может быть 0.46, на маленьких шрифтах такое несоответствие незаметно, а на больших будет существенное отличие.
Теперь по поводу использования на сайтах pt, pc, in.
Если мы размер элемента на сайте укажем в pt, он все равно от чего-то будет браться. Так как же браузер решает эту проблему?
На заре развития компьютерной техники, размеры мониторов были небольших диапозонов. И компания Microsoft предложила взять для определенности 96px = 1in и таково будет у нас разрешение наших устройств.
1in = 96px
А Apple сказал нет :) Давайте будем ориентироваться на полиграфистов и возьмем:
1in = 72pt
Но на практике получилось следующее: чем меньше разрешение, тем меньше есть возможность разместить там информацию.
Поэтому Apple передумала и сделала 1in = 96px, но это все полная ерунда, так как реальная физическое разрешение ваших устройств колеблется примерно от 60 — 600px / in.
Но по прежнему величина 96 является определяющим для пересчета. Это значит, что если написать размер 10pt, то браузер сделает следующее: 96 / 72 * 10. Вот такая история при пересчете pt в px.
На практике я не советую на мониторах использовать абсолютные единицы. На мониторах это вообще не имеет никакого значения, а вот при печати желательно, как раз их то и использовать. При печати нужно заботиться о том, чтобы все выводилось в pt.
@Dark_Knight
карма
27,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (71)

  • +8
    96 / 72 * 10

    Проще для восприятия будет 10 / 0.75. Я раньше эмпирически нашел это значение (0.75) и стал использовать при переводе из пикселей в пункты и обратно. Теперь понятно, что это 72 / 96 и откуда вообще оно взялось :-)
    • +6
      рад, что статья помогла
  • –19
    Мне ранее казалось, что это вполне очевидно, и для хабрасообщества, творящего веб, это давно знакомые и понятные вещи.
    • +4
      Если вы верстальщик, то для вас это очевидно. Но если дизайнер например читает подобной тематики топики, то не каждый знает этих вполне очевидных мелочей.
      • –6
        Дизайнер тоже должен это знать. Он же дизайнер, а не художник.
        • +2
          но не все это знают
          • –12
            Неопытные могут не знать. На фрилансах таких много. Руководитель должен понимать, кого берет к себе на работу.
            • +2
              Есть такие штуки как джуниор-верстальщики, которые такого могут и не знать
              В любом случае даже если это все знают, пусть статья лежит тут. Я уверен что она еще много кому пригодится
              • –4
                Конечно эта информация лишней не будет для начинающих. Даже наоборот, об этом должны писать в первых главах. Дизайнеры должны это знать так же, как и то, для чего нужен CMYK, например. Это ведь азы. Поправьте, если не прав.
                • 0
                  Опытные люди должны знать, конечно. Тут я согласен
                • 0
                  Должны, но непрофессионализм некоторых просто убивает.
                • +2
                  Нужно учитывать так же, что не все дизайнеры, прошли школу — как стать дизайнером. Многие из них учились всему сами, по таким вот статьям. Так же как и верстальщики :)
              • +1
                Например мне — как раздатка для учащихся :)
                Спасибо! Скопипастил себе.
    • +1
      Многим непонятны именно простые вещи в силу их простоты.
    • +4
      вы зануда
      • –10
        Мне похуй
  • +2
    Кстати, пару лет назад уже обсуждали этот вопрос.
    • +3
      повторение — мать учения, да
  • 0
    Еще есть такая замечательная относительная величина – проценты.

    Или я не прав?
    • +3
      я только что писал в статье:
      Проценты (%) — всегда величина, о которой стоит говорить отдельно. Она настолько важная, что W3C вынес ее в отдельную колонку. Тоесть % можно писать не у всех правил, а только у некоторых и когда мы пишем % мы должны понимать от чего они считаются.
    • 0
      ну как бы о ней в статье тоже речь идет.

      Или я не прав?
      • +1
        Да, я уже понял, что дурак.
      • +3
        подробнее о процентах я писал в предыдущей статье
  • –1
    диакритические знаки
    • –1
      Все еще в статье осталась ошибка: слово пишется не через Е, а через И.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Окей, буду знать. Спасибо. Автору, конечно же, приношу свои извинения.
          • +2
            Нет проблем, рад помочь :)
  • +3
    на практике даже em'ы часто вносят свои проблемы
    шаг в лево, шаг в право — расстрел на местеедет верстка (webkit округляет до целого px, а ff нет)
    • +1
      А не надо применять их там, где не надо.
      Для расклада пиксели и проценты. Внутри текста em и ex, чтобы изменение размера шрифта пропорционально изменило отступ.
      • +1
        никто не говорит чтобы использовать em везде, размер шрифта и пропорциональные отступы собственно все и портят в некоторых случаях
  • +6
    все уже знают про REM?
    то же самое что EM, но только от корневого элемента.
    поддерживается во всех современных браузерах.

    snook.ca/archives/html_and_css/font-size-with-rem
    • 0
      Спасибо! А как с поддержкой его мобильными браузерами?
  • +2
    Для меня новость, что px это относительный размер… Казалось это единственное абсолютное значение, а cm, in и тд… относительны. По причине, что при разных обстоятельствах в них будет разное количество px:). px мол абсолютная светящейся точка, а всё остальное по ней меряется… )

    Если взглянуть в реальном мире на 1cm с некоторого расстояния, то он будет меньше. Это ведь не говорит, о том, что cm относительная величина… Так и с px меняй расширение экрана или не меняй px всегда будет px.

    Возможно тут идёт какая-то подмена понятий…
    В реальном мире, да, есть эталон сантиметру… но разве одноцветная точка не эталон для пикселя. Может быть в виртуальном мире нет эталона для cm, либо он меняется от мира к миру… сайты, онлайн игры, печать в конце концов, нет там вроде сантиметров…

    Человек со слабым зрением может читать газету с лупой… или выставить на мониторе большое расширение (это так на самом деле и делается если слабое зрение)

    Для чего выставляется большое расширение:
    а) было больше пространства — на экране всё становится меньше
    б) нужно больше детализация, при сохранении размеров — на экране всё осталось тех же размеров
    Не ошибусь, если скажу, что происходит всегда (а) — всё уменьшается как человеком и ожидается, Следовательно px не изменился мы просто смотрим на него с большего расстояния и визуально всё уменьшилось…
    Хотя возможно компромиссно происходит, что-то уменьшилось у чего-то детализация увеличилась

    Ещё как Вам мысль… Оо я купил огромный моник, теперь я выставлю на нём огромное расширение и смогу таки увидеть все детали, экрана то достаточно для этого…

    Какой смысл выставлять 3000 x 2000 на наладоннике… ) В смысле ожидается что всё будет маленьким…

    Не пытаюсь опровергнуть просто ищу истину или понимание…
    • +1
      У меня тоже все внутри перевернулось, когда про пиксель (px) такое прочитал.
      С таким же успехом (доводя ситуацию до полного абсурда) можно сказать, что и сантиметр (в смысле cm) — тоже не менее относительная величина, потому что если отображать верстку сантиметрами на двух разных мониторах (с разной длиной диагонали), но, с одинаковым разрешением, то, сантиметр на маленьком экране будет гораздо короче того же самого сантиметра на огромном мониторе!
      И, вообще, если вспомнить труды Альберта нашего Эйнштейна, то в CSS вообще не останется абсолютно ничего абсолютного.
    • 0
      Если взглянуть в реальном мире на 1cm с некоторого расстояния, то он будет меньше.
      Вы меня очень удивили этой фразой. Так можно сказать про что угодно. И килограммы тоже относительны, если их везти с разной скоростью =)

      Пиксель — величина относительная. Сантиметр — абсолютная.

      Поставили вы размер div'a в 5 сантиметров — он и будет 5 сантиметров на любом мониторе, в не зависимости от текущего расширения разрешения (устройства и проч). Где-то в эти 5 сантиметров поместятся 100 точек, где-то 100500. На лицо — абсолютный размер, т.к. вы всегда можете измерить этот блок линейкой и получить 5 сантиметров. Правда при условии, что измерять будете вплотную к объекту, а не с расстояния =)
      Поставили вы размер div'a в 100 пикселей, на мониторе он будет сантиметр, на телефоне 2 сантиметра и так далее, в завимости от разрешения. На лицо — относительный размер.

      И кстати, 3000х2000 на наладоннике было бы очень даже неплохо. И если всё станет слишком мелко, то это проблема того, кто указал размеры объектов на экране в пикселях, вместо абсолютных величин или процентов.
      • 0
        Да, фраза странная))
        Есть ещё такой момент, к тому что может не обязательно указывать относительные размеры в вёрстке, что все браузеры отказались от прямого увеличения или уменьшения шрифта, такая опция была в меню и создавала дополнительные проблемы верстальщику… сейчас браузеры просто меняют масштаб всего и проблем с размерами выставленных в пикселях нет при масштабировании…

        Если уменьшить расширение рабочего стола (Win), всё уменьшится в частности из-за того, что невозможно качественно масштабировать иконки и скорее всего и другие сложности есть… То есть причина конечно в том, что все размеры выставлены в пикселях, но как иначе если растровая иллюстрация выполнена под конкретный размер иначе её качество портится… нельзя же иллюстрацию сохранить в cm… Везде нужно вектор тогда использовать

        Также сложности с измерением линейкой, в связи с разным «размером точки» у экранов… возможно на каком-то уровне это и можно учитывать, но сейчас это не делается, и если выставить масштаб 100% и размер 1см у картинки на экране она не всегда будет этого размера… в моём случае 10см на линейке показались 7см ) в mspaint

        Возможно вы правы с терминологией… но кажется реальность это игнорирует… )))
        • +2
          Про растр вы хорошо заметили. С ним проблема будет всегда. Однако последнее время она чаще всего решается переходом на векторную графику (SVG набирает популярность, HTML5), а также растягиваемых растров в формате 9-patch.
      • 0
        >он и будет 5 сантиметров на любом мониторе,

        В том-то и дело, что не будет
  • +1
    Раздел 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
    • 0
      В частности про px: pixel units — 1px is equal to 0.75pt.
  • +2
    Да сколько можно уже мусолить одно и то же…

    Найдется один лжепророк, который придумает, что истина — это проценты. Второй будет ходить по миру и нести огнем и мечем Правду, что самые правильные единицы — em. Третий будет ставить только px.

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

    Чесать все под одну гребенку хорошо, но Прокруст закончил плохо.
    • 0
      Так донесите свет и расскажите в каких ситуациях какие единицы использовать!
      • 0
        Каждая ситуация уникальна, выбор конкретного типа зависит от множества факторов.

        Простой пример. Если пользователь работает с данными, которые нужно иногда печатать, то логичнее выбрать для размера шрифта pt, а для блоков — em или cm. Тогда модификаций под печатную версию будет минимум.

        Если дизайн резиновый и мультимедийный (для мобил, экранов, телевизоров), используйте % или em, но можете взять и другие единицы.

        Всегда ищите самые дешевые в поддержке единицы измерения. А для разных проектов они могут быть разными.
  • +2
    Если придерживаться Вашего (а не зафиксированного в спецификации CSS) понимания относительных единиц измерения последовательно, то все они относительные. Браузерный дюйм ничуть не абсолютнее пикселя, поскольку строго равен 96 пикселям.
    • 0
      да, он равен 96-ти пикселям, но размер мониторов, то у всех разные и я имел в виду, что каждый монитор по разному считает единицы измерения
      • 0
        Простите, я не понимаю Вашего языка.
    • +2
      Только вот, если 1 пиксель для шрифта — это интуитивно понятная величина, а 1 дюйм интуитивно следовало бы ожидать как 25,4мм.
      Как не назови (относительное, интуитивное), а самый очевидный — пиксель.
      • 0
        Что значит «очевидный»? Почему один пиксель «очевиднее», чем 96? Сформулируйте свою мысль яснее, пожалуйста.
        • 0
          Очевидные вещи умеет объяснять очень мало кто. Если вы не можете их сами понять, ничем не могу помочь.
          • +1
            Я могу понимать или не понимать очевидные утверждения. Но как «очевидным» может быть пиксель? Он просто есть, это не очевидно, это бесспорно. Вероятно, Вы имеете в виду, что очевидными являются какие-то его свойства. Вот я и уточняю: какие?
            • 0
              Очевидным у «пикселя» является он сам. но я говорю не про физическую часть монитора, а про абстрактное понятие из CSS. Оно очевидно соответствует пикселю на экране. А вот «in» не соответствует своему названию и это *понятие* не является очевидным.
              • 0
                Абстрактное понятие пиксель из CSS2.1 равно 1/96 реального дюйма. 96 пикселей измеренные по линейки на монитре должны составлять 2,5 см. Но все известные мне браузеры отображают 96 пикселей как 2,5 см лишь при случайном стечении обстоятельств.
                • 0
                  Там (в спецификации) сказано, что дюйм реальный? По-моему, нет. Чему он будет равен на устройствах с 300 PPI, я боюсь даже представлять (очевидно, он будет в три с лишним раза меньше реального).

                  В конце концов, у мониторов есть ещё всякие настройки изображения, которые прямо меняют размер экрана, но, насколько я понимаю, остаются неизвестны компьютеру. Это печально.

                  Похоже, возможность привязаться к реальным размерам одна — использовать базовый размер шрифта (em у body, а в IE9+ и Fx3.6+ — rem у кого угодно), уповая на то, что браузер старается выдать его примерно соответствующим шестой части реального дюйма, и памятуя, что это соответствие в любом случае будет приблизительно.
                  • 0
                    Если в спецификации, скажем, на трубы вы читаете «диаметр 3/4 дюйма» вы тоже ищите упоминания, реальный ли это дюйм? Очевидно что дюйм всегда должен быть равен дюйму или 2,54 см. И как раз на устройствах с 300-2400 dpi (принтерах) он отображается нормально, а вот для мониторов почему-то исключение.

                    Монитор сообщает компьютеру свой физический размер экрана в миллиметрах. Причём ЭЛТ мониторы сообщают размер видимой области кинескопа, а не полный. Если пользователь химичит с настройками предполагается, что он знает что делает.

                    • 0
                      В спецификации на трубы не сказано, что дюйм строго равен 96-ти пикселям изменяемого размера. Но, да, не лишне будет найти какое-то указание (хотя бы происхождение спецификации), что имеется в виду именно современный английский дюйм. Потому что этих дюймов в истории было — вагон и маленькая тележка. Теперь ещё один — CSS-ный, условный.
              • 0
                Теперь понятно: Вы имели в виду, что то, какой размер имеет пиксель, интуитивно ясно.
    • 0
      …Хотя в проекте CSS3 Values and Units пиксель действительно отнесён к относительным единицам, поскольку, как я понял, дюймы и прочие сантиметры отвязываются от него и понимаются действительно как абсолютные.

      Но, насколько я понимаю, этот проект, увы, ещё не реализован ни в каких браузерах.
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Не, я всё понимаю.

    В 2011-ом году вполне можно пользоваться ЭЛТ-мониторами, на которых можно указать любое разрешение экрана. Или LCD-мониторами, и указывать у них неродное расширение.

    В 2011-ом году вполне можно выбирать монитор по критерию «физический размер его пикселя обязан быть 1/96 дюйма». Ну, или, как вариант, можно брать монитор чуть более современный, с экраном в 145 DPI, и при этом не трогать настройку операционной системы, дезинформируя её утверждением «я утверждаю, что в моём мониторе всё равно 96 пикселей на дюйм, ты так и рендерь тексты», и следовательно обеспечивать, что с точки зрения операционной системы, «физический дюйм» и «логический дюйм» не равны.

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

    Я понимаю, всё это вполне можно делать.

    Но зачем?
    • 0
      Зачем мне на ЭЛТ мониторе указывать разрешение 96 dpi (1280х960), а не комфортное для меня во всех случаях (кроме серфинга) 120 (1600х1200)?

      Почему производители браузеров и ОС (?) отказываются применять сведения, который им монитор сообщает (в некоторых ОС так вообще — в одном месте видишь 96, в другом 120). Почему не дают верстальщикам и прочим ЮИ-дизайнерам показывать сайт посетителю (если он не применял специальных настроек), как они его хотят показать (шрифт высотой не 16 физических пикселей, а 12 абсолютных пунктов или 1/6 дюйма)? Почему, в конце-концов, они не выполняют требования спецификации CSS2.1? Зачем усложнять жизнь и пользователям, и разработчикам?
      • 0
        Мир вокруг нас безумен, да.

        Я вот сейчас покопался, и (после того как окончательно осознал, что «пиксель» с точки зрения HTML не равен «пикселю» с точки зрения браузера почти для всех браузеров) убедился в этом окончательно.
        • 0
          А какие исключения нашли? Вроде Firefox 3.0 и 3.5 отображали более-менее похожие на правду дюймы (при условии, что ОС сообщала более-менее похожее на правду разрешение — чем винда, как помнится, не славилась, сообщая то разные цифры при одном разрешении, то одинаковые при разных).
          • 0
            Я не знаю, 23,8 мм вместо 25,4 мм (у меня на работе) — это «более-менее похожие на правду дюймы»? Проверено: так во всех браузерах. И во всех же CSS-ный пиксель оказался строго равен экранному.
          • 0
            У меня Линукс (возможно, в Windows всё иначе), Opera и Chrome. В линуксе указано разрешение точно:
            ~:$ 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-пиксель к физическому пикселю, зато полностью собьём все физически корректные меры длины».
            • 0
              А xrandr (кажется так, сейчас под виндой на планшете) что показывет? Я столкнулся с тем, что с некоторых пор две иксовые утилиты показывали разные значения — одна из них считала всё правильно, другая брала 96 дпи и исходя из размеров экрана в пикселях считала физические размеры. Так я внезапно обнаружил, что получил несколько дюймов на халяву :)
              • 0
                А он всё правильно показывает, как и xdpyinfo.
                • 0
                  $ xrandr | grep mm
                  VGA-0 connected 1600x1200+0+0 (normal left inverted right x axis y axis) 352mm x 264mm
                  $ xdpyinfo | grep dim
                  dimensions: 1600x1200 pixels (423x317 millimeters)
                  $ xdpyinfo | grep reso
                  resolution: 96x96 dots per inch

                  Надо ли говорить, что первый результат куда ближе к истине…
                  • 0
                    Бывает, не удивлюсь — но в моём случае я в своё время убедил обоих выдавать одинаково верный результат.
                    • 0
                      Одинаковый получается убедить, но вот браузеры все равно его игнорируют :(

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.