Как стать автором
Обновить

Комментарии 136

НЛО прилетело и опубликовало эту надпись здесь
ребята, почитайте другие камменты этого тролля, это нечто
похоже, виртуал чей-то :)
Мне кажется, что когда каммент набирает >= -20, юзера можно автоматом банить дней на 7 от написания камментов. Иначе какой смысл, -5 или -505, он всё равно продолжает гадить.
НЛО прилетело и опубликовало эту надпись здесь
-20 — недобор. я бы банил на время комментаторов с -30 и более.
почему не учлись сложности при верстке хотя бы среднего макета?
это перевод, все вопросы к автору
Если вы переводите и размещаете на Хабре статьи, значит вы согласны с автором и сможете обосновать его точку зрения.
и поэтому я могу ответить почему автор что-то такое не учел в своей статье, что показалось одному из хабрапользователей на Хабре?
Так скажите, что автор этого не учел. Зачем отправлять к автору? Те кто читает перевод будет с иностранным автором говорить? Кто с ним будет говорить — тот прочитает оригинал. Вам не кажется?
я не могу судить учел что-то автор или нет
я предложил перевод, не нравится — можно пройти мимо
Какие, например?
Очень полезная статья. Я только одного не понял, если по дефолту стоит 100% размер шрифта, то как это выглядит на практике? То есть, если я пишу 16px — то ясно что размер будет 16 пикселей, а если 100% — то это 100 процентов от чего? Поясните пожалуйста.
при 100% скорее всего будет 16px
от стиля по умолчанию в браузере, полагаю
«а если 100% — то это 100 процентов от...»

… значения, указанного в настройках браузера.
если вы прописываете в body 100% то это будет сто процентов от настроек браузера, каждый пользователь может изменить это значение для конкретно своего браузера? как правило это 16px

все последующие указания размера шрифта будут браться от значения body
Такой подход используется в Yahoo CSS framework
Для body размер шрифта задаётся в PX, а для всех остальных элементов в % от базового размера, заданного в боди
Шрифт в експлорере 6 не меняется?
Умолчальные значения кегля шрифта у различных браузеров неодинаковы.
насколько я знаю, у тех, что анимают более 1% рынка — у всех — 16.
НЛО прилетело и опубликовало эту надпись здесь
Эта разница была связана с особенностями рендеринга графического интерфейса в разных ОС.
Вы правы, у современных (после 2003 года) распространённых браузеров — 16. Первые публичные релизы Сафари имели умолчальный кегль в 14 пикселов.
В избранное.
это можно спокойно сделать и не комментируя, не засоряйте ленту :)

XaocCPS, спасибо, внесли каплю ясности в мое понимание едениц измерения для верстки.
Только вот не сильно хочется доверять браузеру выбирать «свой» размер базового шрифта.
Да и тенденция сейчас такова, что браузеры при увеличении не высчитывают пиксели, а делают увеличение как через реальную лупу, это непременно произойдет и на мобильных браузерах, имхо, ждать не долго. Скоро над этим пониманием вообще никто задумываться не будет :)
ну ждите, я не против :)
многие до сих пор поддерживают ie6, а вы чего-то нового ждете :)
про ie8 и его масштабирование я чуть ниже отписал, не учитывать этот факт, имхо, нельзя
Зато хабраюзер, увидев мой комментарий, поймёт, что статья хорошая. =)
Хабраюзер поймёт что статья хорошая прочитав эту статью. А Вы начинаете чтение статей с комментариев? :)
Скоро или не скоро, над юзабилити надо думать сейчас прямо. Нет смысла делать сайт, который будет юзабелен тогда, когда все браузеры будут использовать лупу.
Ну и нельзя сказать, что за em-ами будущее…
За ними уже настоящее. Проценты и em — это все можно комбинировать как угодно, и не только для указания размеров шрифтов. В этом-то и есть вся прелесть em.
Вот именно. Я такой подход (em и %), использую уже 3 года, как и многие другие люди. Kyle Schaeffer как-то поздно опомнился, сдается мне.
Все современные браузеры умеют увеличивать шаблоны в пикселях, без каких-либо заморочек с емами и процентами. Так зачем усложнять себе жизнь и говорить, что «В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете»?
ie8 к примеру до сих пор при масштабировании текста поступает так как описано в статье и только функция Zoom у него работает на весь контент, что собственно и не удивительно.

а за мобильные браузеры тоже поручитесь?
Никто не ставит емы только на текст, чтобы не поехала вёрстка емы так же ставятся на все размеры блоков, следовательно делают тот же зум, только через емы. Разница между один и тем же шаблоном в px и в em, к примеру в IE7, вообще не заметна при масштабировании. IE8 вообще недоделка и воспринимать её серьёзно пока ещё рано.
На счёт мобильных браузеров, под них вообще отдельно верстать надо и я на их счёт вообще ничего не говорил.
Я бы предпочел, что бы браузеры не изменяли размер шрифта указанный в px и pt.
Я бы сам хотел решать, масштабировать этот текст или нет. Эксплорер это позволяет, а ФФ2 масштабирует не зависимо от моего желания.

Ну и сидите на IE6. Кто Вам мешает? :)
Ты наверное сам никогда не пользовался функцией масштабирования по ее прямому назначению.
как раз наоборот, недостаток в том, что картинки бекграундов в px и при верстке в em(при свободном увеличении) сайт смотрится гармонично(как его рисовали в PS) ±4 px, дальше хуже, а при зуме все остается без каких-либо отклонений.
Вот поэтому я и хочу, что бы если указано в px или pt текст соответствовал бэкграунду. В IE это работает, в FF2 — нет.
Про зум из оперы я ничего плохого не говорил.
НЛО прилетело и опубликовало эту надпись здесь
К примеру, в ФФ3, в выпадающем меню Вид -> Масштаб уже есть галочка «Только текст». Что позволяет увеличивать его отдельно от дизайна.
Хотя, после проверки я выяснил, что он игнорирует указание размера в px…
затем, что статистика пользователей говорит нечто очень печальное о количнстве IE6, к сожалению.
Полезно. Но тока что проверил, Опера увеличила страничку вместе со шрифтами (шрифты заданы px).
Оно того стоит?
Стоит.
К сожалению, не все браузеры имеют правильно реализованное масштабирование страниц (взять, к примеру, IE6, которым, тоже к сожалению, пользуется немалый процент пользователей).
А правильное мастшабирование страниц — одно из требований кроссбраузерного кода.

Сам лично пользуюсь em-ами.
Хорошо, а есть ли смысл поддерживать пользователей IE6? Ведь уже давно появилась седьмая и даже бета восьмой версии. В таком случае у нас получается застой прогресса, а пользователи могут еще долго сидеть на шестой версии. Им же создают для этого все удобства. Да и компьтеры сейчас в основном с Вистой продают, а там ie7 по умолчанию.
есть. см. процентное соотношение IE6 на рынке.
НЛО прилетело и опубликовало эту надпись здесь
Все верно. Только вот именно «зум» (на мой взгляд) и нужно использовать. Причина уже называлась выше. При увелечении только шрифта есть большые шансы поломать весь дизайн.
я за em

удобно при верстке основываться на размере шрифта в целом для отступов.
Особенно удобно верстать в em и одновременно бороться с 3px gap…
> и одновременно бороться с 3px gap

О! Объясните, а как это помогает? Интересно.
Объясните мне, дураку. Пользователь будет лезть в css страницы и менять базовый размер? Причем тут em и масштабирование? pt Масштабируется любыми браузерами современными стандартными средствами. Я не стебаюсь, я правда себе уже голову сломал. Может, я чего-то недопонимаю? Как правильно пользоваться emами?
В главном меню браузеров, почти всех, есть пункт «размер шрифта», в котором его можно увеличить или уменьшить
Понял, но фишку эту только в ие нашел. В остальных браузерах только масштаб увидел.
Кстати, спасибо огромное за разъяснение :)
в остальных — зум различной степени адекватности, что, на мой взгляд, куда лучше :)
я за px + zoom аля opera
а товарищ заминусовавший пусть объяснит как нормально масштабировтаь элементы дизайна (фоновые картинки и прочее) под увеличенный текст ;)
поддерживаю! высота шрифта в процентах — нет слов, это очень хорошо, но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт? что толку увеличить шрифт и наблюдать как из меню вылезают буквы, как фарш из мясорубки? или как панели превращются в непонятную кашу?
>но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт?
В 90% случаев наличие таких критических элементов определяются фантазиями дизайнера. Может быть начать с этого?
т. е. по вашему главное маштабируемость для плоховидящих, а не дизайн? :)
Дизайн не несет «главной» смысловой нагрузки, главное все таки контент. Правильно?
Дизайн сайта не должен масштабироваться — только текст.

П. С.: У меня отличное зрение, но иногда, читая большую статью, мне приятнее откинуться в кресло и читать не находясь в непосредственной близости от монитора, для этого я увеличиваю шрифт и читаю, а вот увеличенные элементы дизайна в этот момент, мне совсем не нужны.
Как тогда ставить «плюсы» и «минусы» комментариям, если эти мелкие кнопки не видно со спинки стула?

Все должно масштабироваться.
вот и замаштабируй их любитель em ;)
SVG поможет отцу русской демократии :)
его тоже в em задавать?
Я то думал что оно больше zoom любит
Для меня чтение статьи не заключается в ставке плюсов и минусов. Тут есть два ключевых слова «чтение» и «статьи», а не «оценивание» и «комментарии». Интернет блогами не ограничивается.

А если относительно хабра, то эти кнопочки оценки прекрасно видны, за счет контраста их цвета с остальными элементами.
Вы предлагаете переучивать всех дизайнеров и ограничить их полёт фантазии? Чтобы и в так практически однообразном по стилевому оформлению интеренету, осталось пару стандартных шаблонов, которые просто было бы верстать в em-ах?
а для вас важнее уникальный дизайн? по-моему важнее уникальный контент. в книгах только обложки отличаются, а внутри такое однообразие — белый фон и черный текст (ну, за редким исключением). это не контент должен приспосабливаться к дизайну, а совсем наоборот. дизайнеры должны научиться офрмлять контент так, чтобы он и смотрелся замечательно, и масштабировался без проблем, и не мешал
>и ограничить их полёт фантазии?
Ограничения есть в любой дизайнерской сфере. Веб — не исключение. Искусство дизайнера оно в том и заключается, чтобы в жестких рамках технических ограничений найти нетривиальное и красивое решение.
Я лично для себя разделил контент и служебную информацию. С проблемой столкнулся ещё в 2000-м году, у шефа со зрением были проблемы (очень большая дальнозоркость, толстенные очки).

Нужно было сделать так, чтобы масштабирование шрифтов работало. Тогда, напомню, в опере не было функции «масштабировать всё». ;)

Оказалось, что на практике достаточно делать контент масштабируемым, а навигацию, разные кнопочки/логины и пр. — нет. На этом решении я остновился, и, в принципе, оно нормально работает.

Второе работающее решение (как здесь уже посоветовал aps) — отказаться от сложного дизайна. Тогда масштабирование навигации или кнопок не ухудшит ситуацию существенно. Хотя, случаи разные бывают.
Лучше иметь возможность как-то масштпабировать шрифт, чем не иметь)) А то бывают «мастера» поставят 8 grc? и хоть щурься, хоть убейся((
*пикселей
Все хорошо, но вот разница в масштабировании «em» и "%" есть только в ie.
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

«Во-первых» есть, а хотя бы «во-вторых» — нет.
Абзац закончился.

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

Это не так.
Многие браузеры (Опера, например, или FF) масштабируют не замечая.
это все понятно, хоть и сквозь зубы, но мириться с присутствием семейства ИЕ нам приходиться.
нормальные браузеры, я бы сказал))
при вёрстке всегда задаю body (font-size: 62,5%) — теперь 1em равен 10px
после этого работаю с элементами задавая размеры почти как в пикселях, например

p ( font-size: 1.2em ) это тоже самое что и p ( font-size: 12px)

для меня это достаточно удобно, и легче прикинуть какой размер будет нужен тому или иному элементу
А разве у всех браузеров в таблице по умолчанию font-size: 16px? А то я для перестраховки в px для body размер шрифта указываю.
Премного благодарен. Давно хотел получше разобраться с этим вопросом. Да все руки не доходили. А тут уже не отвертишься… и статью прислали. Осталось только прочитать. :)
нет, но font size: 100% = 16px если я не ошибаюсь
читал об этом методе пару лет назад у западного css-гуру и этот метод мне очень понравился, я как раз был в поисках альтернативы пикселям, и не знал на чём остановится — em или процентах.
ага, вам уже дали ссылку выше ;)
А я всегда делаю html (font-size:100%), body (font-size:0.625em).

Кстати при этом подходе в емах размеры можно указывать не только шрифтам, но и блокам, что дает возможность создания масштабируемых макетов.
Известная тема, но шрифт размером 10px нечитабельный. В результате приходится все равно масштабировать блоки по 1.2em, а потом внутри них давать размеры уменьшенных шрифтов, но уже с новыми масштабными коэффициентами.
Пример с p ( font-size: 1.2em ) тоже, мягко говоря, не очень удачный. Потому как визуальные редакторы имеют обыкновение гадить. Например — окружать таблиыц в тег а внутри таблицы еще параграфов накидать. В результает получается ерунда. Можно конечно подтереть за визивигом, но иногда такая подчистка хуже мусора который визивиг вносит.
Автор темы — любитель холиваров.
Он запостил заведомо халиварную тему, которой уже ни один год.
Чего он этим добился? Сейчас две стороны «за px» и «за em» будут долго долго спорить минусуя друг друга.
Пока что побеждают «em-щики» за счёт «авторитета» автора темы.
я запостил перевод статьи, которая мне понравилась
предлагаю вам запостить топики по-лучше, хотя бы один

предлагаю вам не посещать посты, которые вам не нравятся
предлагаю вам не холиварить в принципе, как поступаю и я

предлагаю к автору обращаться напрямую, а не через третье лицо
Спасибо, что загнали карму в минус, так что Ваше предложение о том, чтобы я запостил топик получше, я ещё долго не смогу воспринимать всерьёз, так как Вы сами же лишил меня этой возможности надолго.
Зато наверно будет возможность как следует обдумать свои мыслы)) и вычитать все неточности и спорные моменты
Em-щики побеждают за счет того, что это правильное решение.
Em-ы в данный момент это просто мода и отчасти дань IE6, без какой либо реальной пользы для пользователя современных браузеров, в которых есть зум.
Зум-браузеры в меньшинстве, дорогой. Забудь про них.
Супер заряженых не бывает, хватит жрать колеса, дорогой :)
В цитатник!111 :)
боюсь смотреть 200 скриншотов :)
расскажите что там в итоге
В итоге всё не так просто и выбирать решение нужно в зависимости от обстоятельств.
В частности неплохой метод — устанавливать базовый размер шрифта для элемента body в процентах (от 60 до 90 и более, в зависимости от желаемого эффекта), а размер текста у элементов в em.
Вот описание: www.thenoodleincident.com/tutorials/typography/incremental_differences.html
спасибо за ссылку, правда по упомянутой Opera 7 в статье понятно, что она несколько устарела
Хорошая, только древняя.
Да, сейчас заметил, что не обновляется.
Но методы описаны адекватные.
не вижу ничего хорошего в емах. столько геморроя при вёрстке и учитывае наследования и только ради ие — уж увольте, он и так на одних костях держится.
Во-первых, не только ради IE :) есть еще мобильные устройства, на которых очень приятно смотреть сайты, с масштабируемыми единицами измерения (продвинутые мобильные браузеры я здесь не имею ввиду, которые тоже имеют клевый зум.).

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

Во-вторых — использовать em'ы так же просто, как и px, это дело привычки и опыта.

З. Ы. Кстати, существует прекрасный инструмент для расчета соответствий px и em, при чем эта штука позволяет выстраивать наследование элементов — так что вы никогда не запутаетесь что, от чего зависит, и какой элемент от какого наследует размеры шрифта.
а чем плох масштаб в браузере? почему этим должны заниматься верстальщики, а не разработчики софта, ибо вещь это сугубо софтовая :)
Потому, что это — работа верстальщика — сверстать сайт качественно и доступно, а не разработчиков софта, которые однажды пошли на уступки хреновым верстальщикам (сделали браузеры более лояльными к коду) — и теперь мы видем полный бардак в этом плане (у каждого браузера «какое-то своё» понимание о стандартах). И появление «зума» в браузерах — это точно такие же уступки по отношению к разработчикам.

Но не об этом речь. А о том, что, так называемая, «доступность» — это задача одновременно актуальная и для разработчиков софта, и для тех, кто делает, скажем, сайты. Так что если у вас есть возможность повлиять на это, используя существующие инструменты, почему бы это не сделать?

Сложность — это не «отмазка». По вашей логике получается так, что людям которые пишут книги — не нужно в совершенстве знать грамматику и вообще правила языка — об этом, видите ли, должны позаботиться разработчики софта (я имею ввиду проверку правописания, которая сейчас даже в браузеры, встроена). И эта тенденция «подстраивания» софта, которая осуществляет «подмену» ценностей, честно говоря, ужасает. С одной стороны — да, все круто, «технологии в массы!» «доступность!», а с другой — сейчас вполне обычно, когда человек с высшим образованием, при написании электронных документов проверку правописания доверяет софту (читать, как «возлагает обязанности на софт»)… По-моему это негативная тенденция.

P.S. Все выше — это моя точка зрения, которая может не совпадать с общепринятой.
Помоему статья давно не актуальна. Пока версии Эксплорера не «зумирующие», аналогично Фаерфоксу или Опере, и преволировалировали среди большой массы пользователей, приходилось выкручиватся с комбинацией ем и процентов (так как при использовании одной из величин шаг при увеличении шрифта был слишком большим). Сейчас слава богу ситуация не та. Поэтому правильно использовать каждую единицу по назначению. Пиксели для экрана, пункты для печати, ем там где нужна зависимость от пропорции строки (к примеру когда блок должен быть приблизительно равен 40 символам в ширину, а не фиксированому значению), а процент для гибкости в псолдеующей правке ЦСС (когда задается базис у боди того же а от него размеры уже наследуются, и при необходимости смены базиса для той же печатной версии, например, необходимо будет переопределить уже только базис а не все стили связаные с размером шрифта).

Статья для спецов не интересна, а для тех кто только приступил к изучению данной темы будет даже вредна, так как сбить может с пути правильного.
Уже в комментариях проходила мысль, но продублирую — для CMS с визуальным редактором далеко не всегда хороши em и % — можно напороться на большие проблемы с наследованием. Либо надо ограничивать и редактор, и пользователей, чтобы ничего не испортили.
Для верстки под мобильные можно использовать отдельный css, как и под версию для печати (pt). А вообще для широкоформатных мониторов будущее за функцией zoom броузеров — если дизайнер ограничил ширину блока, то при увеличении шрифта вам придется долго и нудно читать узкую полоску текста. С Zoom таких проблем нет.
согласен, почему-то ни слова про то, что % наследует значение родительского блока
Не поверите, но вот вчера встала проблема сделать текст масштабируемым, засыпал с этой мыслью, а тут ответ прям сразу, спасибо!
LOL
Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения.
дальше можно не читать. Автор — мегачайник, т. к. не знает про существование единицы ex.
а так же о pc, mm, cm, inch
я бы не стал говорить так категорично.
действительно — единиц измерения много, но если решил написать будь добр, изучи тему.
«масштабируемых» единиц измерения не так уж и много, в отличие от фиксированных.
Напишите свою статью, полную и интересную.
Не чайник, это точно. Скорее, это особенности обучения.

Либо, что вероятнее, автор просто не стал плодить сущности, и точно так же не стал перечислять разного рода дюймы, сантиметры и пики. С точки зрения использования em и ex идентичны, 1.2em = 1.2ex = 120%.
Вы наверное сильно удивитесь, но 1.2em не равны 1.2ex и не равны 120%. Так как em и ex потому и являются «маштабируемые» единицы измерения (как сказано в статье), а точнее коэффициэнтом пропорции относительно габаритов шрифта. Еще точнее коэффициэнт пропорции относительно высоты букв в верхнем и нижнем регистре, следовательно и о соотношении между этими величинами можно говорить только в контексте определенного шрифта, так как соотношение между ними от шрифта к шрифту различные.
Согласен, правильнее было бы написать ~ вместо =. Естественно, я имел в виду не равно, а эквивалентно.

Что же касатеся «контекста шрифта», то здесь не согласен. Сам коэффициент, конечно, зависит от гарнитуры, но поскольку единицы относительны, сделать «на 20% больше» можно любую из них, результат будет одинаковым.
НЛО прилетело и опубликовало эту надпись здесь
Все так и есть, о зависимости между em и ex, можно говорить лишь в контексте определенной гарнитуры.
Вложу в топик свои пять копеек :-)

В большинстве браузеров кегль100% == 16px. При вычислении относительных величин, особенно при наследовании, есть нюансы:
— IE округляет результат в большую сторону.
— FF округляет результат в меньшую сторону.
— Opera, округляя результат в меньшую сторону, получает значения в пикселах для родительского и дочернего объекта, после чего вычисляет итоговое значение.

Пример: задавая значение 110% получаем:
— IE: 18px
— FF: 17px

Для получения одинакового результата (18px) используем дробное значение в 112.5%.
Где про это можно ещё почитать?
Спасибо!
Прощу прощения.
Иногда встречается следующая конструкция:
font: 100%/1.5em Georgia,Arial,Verdana;
что есть "/" в данном случае, и 1.5em? Междустрочный интервал?

да, это сокращённая запись. понимают всё современные браузеры (ие6 так же, ниже — не знаю, да и не важно по сути)
НЛО прилетело и опубликовало эту надпись здесь
Пожелание всем верстальщикам: не пользуйтесь пикселями! Указывайте размеры в ем-ах (там, где надо ессно), чтоб ваш сайт масштабировался при смене шрифта!

Спасибо, пользователь
А мне пункты нравятся… ничего лишнего не разъезжается.
По количеству комментов можно судить о том, что этот вопрос из серии «священных войн», «религиозных вопросов», имхо :)
Упрощая. Шрифт указывать в %, а масштабируемые отступы указывать в em?
Полезная статья, мне, многое прояснила!
Автор статьи, картинки в статье уже не грузятся :)
Новая ссылка на оригинал, с картинками. Также в обновленном посте есть небольшое обновление =)
image
Никак не могу понять разницу между em и %, у меня в браузере все одинаково, если кому несложно поясните.
Спасибо за статью.
Весьма интересно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации