Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 65
отдельный плюс за одноразовый expression
Картинки не грузятся
Какой-то кошмар. Если верстаете в Em, то и рассчитывайте на увеличение разрешения — для этого Em и предназначены. Другие размеры задавайте тоже в Em, для этого они и сделаны.
За решение с zoom спасибо, раньше не приходило в голову, что им можно пользоваться по назначению.
А вообще, действительно, проще все размеры задавать относительно размера шрифта (в em) и макет страницы проектировать изначально зависимой от размера шрифта. Разница в размерах мониторов становится все больше.
А вообще, действительно, проще все размеры задавать относительно размера шрифта (в em) и макет страницы проектировать изначально зависимой от размера шрифта. Разница в размерах мониторов становится все больше.
Это само собой.
Конечно же пользователь должен иметь возможность увеличить размер шрифта и масштабироваться должны не только шрифты, но и содержащие их блоки.
Речь о стартовом виде сайта.
Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т. к. большинство свёрстанно с фиксированными размерами). А свёрстанный в em — увидит сразу увеличенным.
Согласитесь — он будет не так красив, как его изначально задумал дизайнер.
Так почему бы не показать его ему таким, как он его задумал?
Увеличить его он может в любую секунду.
А если он увеличил базовый размер шрифта в FF или Safari (которые игнорирует dpi), чтоб лучше видеть?
Без фикса сайт с em будет иметь огромный шрифт.
В IE8 же сайт будет красиво и корректно отмасштабирован.
Конечно же пользователь должен иметь возможность увеличить размер шрифта и масштабироваться должны не только шрифты, но и содержащие их блоки.
Речь о стартовом виде сайта.
Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т. к. большинство свёрстанно с фиксированными размерами). А свёрстанный в em — увидит сразу увеличенным.
Согласитесь — он будет не так красив, как его изначально задумал дизайнер.
Так почему бы не показать его ему таким, как он его задумал?
Увеличить его он может в любую секунду.
А если он увеличил базовый размер шрифта в FF или Safari (которые игнорирует dpi), чтоб лучше видеть?
Без фикса сайт с em будет иметь огромный шрифт.
В IE8 же сайт будет красиво и корректно отмасштабирован.
> как сделать сайт одинаковым на 96 dpi и 120
Зачем??? Пользователь выбрал размер, который удобней.
Зачем??? Пользователь выбрал размер, который удобней.
Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т. к. большинство свёрстано с фиксированными размерами).
А если он увеличил базовый размер шрифта в FF или Safari, чтоб лучше видеть, то без фикса сайт с em будет иметь огромный шрифт.
Опять таки — это критично далеко не для всех сайтов.
На просторных резиновых макетах, разница не так бросается в глаза (кроме картинок, что остаются такими же маленькими).
Стоит или не стоит — решать вам, в зависимости от того как выглядит макет.
А если он увеличил базовый размер шрифта в FF или Safari, чтоб лучше видеть, то без фикса сайт с em будет иметь огромный шрифт.
Опять таки — это критично далеко не для всех сайтов.
На просторных резиновых макетах, разница не так бросается в глаза (кроме картинок, что остаются такими же маленькими).
Стоит или не стоит — решать вам, в зависимости от того как выглядит макет.
Просто не нужно рассчитывать, что две строки из четырех слов уместятся на вашей красивенько нарисованной псевдотрехмерной кнопке (nothing personal, я чисто гипотетически). У меня вот шрифт увеличен. А то еще белым по такому напишут, а текст уйдет неизвестно куда.
Совершенный идиотизм — это кнопка «Выйти» (текстовый линк!) на Одноклассниках, которую частенько видно, только если нажать контрол-А.
Хотите красиво — пишите текст в графическом редакторе. Хотите юзабилити — забейте на градиенты и кружочки, пишите по одноцветным плашкам, в роли которых должны выступать свободно растягивающиеся слои или ячейки.
Как-то так.
Совершенный идиотизм — это кнопка «Выйти» (текстовый линк!) на Одноклассниках, которую частенько видно, только если нажать контрол-А.
Хотите красиво — пишите текст в графическом редакторе. Хотите юзабилити — забейте на градиенты и кружочки, пишите по одноцветным плашкам, в роли которых должны выступать свободно растягивающиеся слои или ячейки.
Как-то так.
>>Хотите красиво — пишите текст в графическом редакторе. Хотите юзабилити — забейте на градиенты и кружочки, пишите по одноцветным плашкам, в роли которых должны выступать свободно растягивающиеся слои или ячейки.
Золотые слова!
Золотые слова!
«Выйти» на Одноклассниках меня также раздражали, пока я не увидел, что под Win все браузеры его показывают нормально :)
Можно сверстать и масштабруемо. По крайней мере, +2 от базового размера шрифта точно.
> На резиновых макетах увеличенный кегль как правило не вызывает проблем, но на сайтах с фиксированной шириной, увеличенные буквы могут просто не вписываться в отведённые им узкие колонки.
Не нужно с white-space: nowrap извращаться.
Не нужно с white-space: nowrap извращаться.
Соглашусь что имея достаточно времени верстальщик может вылизать макет так, что даже двукратное увеличения кегля не сделает его некрасивым (то что он в любом случае должен быть аккуратным и читабельным при увеличении — это самом собой).
Но далеко не всегда бюджет и сроки предусматривает такой перфекционизм.
Ещё бывают вредные макеты, которые красиво ну никак не увеличишь. т. е. будет читабельно, но «неаккуратненько». На последние 10% работы тратится 90% времени.
Опять таки заказчик может задаться вопросом — «а почему на моём ноутбуке все сайты смотрятся нормально, а тот, что вы мне сделали — какой-то уродский»?
Но далеко не всегда бюджет и сроки предусматривает такой перфекционизм.
Ещё бывают вредные макеты, которые красиво ну никак не увеличишь. т. е. будет читабельно, но «неаккуратненько». На последние 10% работы тратится 90% времени.
Опять таки заказчик может задаться вопросом — «а почему на моём ноутбуке все сайты смотрятся нормально, а тот, что вы мне сделали — какой-то уродский»?
в мемориз! спасибо.
Сам пока не сталкивался с такой проблемой, но теперь статья в закладках!
Очень подробная и понятная статья, спасибо!
Очень подробная и понятная статья, спасибо!
просто нереально обстоятельно и подробно =)
Недавно столкнулся с проблемой расползания дизайна на 120 DPI — ntgthm знаю, что можно поправить. Спасибо!
пинтагон — это пять :)
Друзья мои, это хорошо и полезно, когда выхода нет. Но на мой взгляд, человек для того и ставит 120 dpi, чтобы видеть шрифты соответствующих размеров. Почему бы не постараться делать сайты, на которых шрифты можно безболезненно масштабировать?
А статья хорошая.
А статья хорошая.
меня подход пугает относительной сложностью, возможнгыми проблемами с будущими версиями браузеров и нелогичностью, если пользователь меняет dpi почему мы должны с этим бороться?
меня подход пугает относительной сложностью
что именно непонятно как делать? я постараюсь расписать подробнее, чтоб было легче.
возможнгыми проблемами с будущими версиями браузеров и нелогичностью, если пользователь меняет dpi почему мы должны с этим бороться?
дополнил статью, в самом конце — ответы на эти вопросы.
почему бы все остальные размеры тогда не задать в том же em?
очередное задротсво с емами, да чтож такое! хотя признацо было очень интересно почитать :)
html, x:-moz-any-link {font-size: 68.75%} насколько мне не изменяет память прочитают все (но перебить для фф2/3 им можно), ибо тут нет ничего такого почему его нельзя прочитать
html, x:-moz-any-link {font-size: 68.75%} насколько мне не изменяет память прочитают все (но перебить для фф2/3 им можно), ибо тут нет ничего такого почему его нельзя прочитать
Проблема касается только сайтов с фиксированой шириной. Фиксированя ширина это ошибочная верстка. Эсли кто-то не согласен посмотрите Яндекс, Google, W3C.org, MSDN — нигде нет фиксированой ширины.
Просто надо верстать правильно, без фиксированой ширины и проблем не будет.
Просто надо верстать правильно, без фиксированой ширины и проблем не будет.
как бы говорит нам
это WebSlices — первое встроенное в браузер использование микроформатов.
Если на сайте используется микроформат hSlice, на панели инструментов браузера появляется такая зелёненькая пиктограмка
и она же с зелёной рамочкой появляется при наведении курсора на блок на страничке, размеченный как WebSlice.
Типа такого:
Можно кликнуть или по иконке на панели, или по самому блоку и браузер подгрузит его содержимое на ссвою панель и будет и регулярно обновлять его:
На хабре есть неплохая статья про их использование: WebSlices в Internet Explorer 8.0
Если на сайте используется микроформат hSlice, на панели инструментов браузера появляется такая зелёненькая пиктограмка
и она же с зелёной рамочкой появляется при наведении курсора на блок на страничке, размеченный как WebSlice. Типа такого:
Можно кликнуть или по иконке на панели, или по самому блоку и браузер подгрузит его содержимое на ссвою панель и будет и регулярно обновлять его:
На хабре есть неплохая статья про их использование: WebSlices в Internet Explorer 8.0
Спасибо, возьму на вооружение.
Буду рад дополнениям — есть-ли такая проблема под Mac/Linux.
Вообще-то имхо я считаю что сайты должны быть резиновые.
Фиксированные сайты имеют место на жизнь, но должны использоваться очень редко, ну нельзя под всех сделать фиксированный сайт, поэтому когда его делаете будьте гтовы к тому что многие юзеры его увидят совсем не так как задумано.
Фиксированные сайты имеют место на жизнь, но должны использоваться очень редко, ну нельзя под всех сделать фиксированный сайт, поэтому когда его делаете будьте гтовы к тому что многие юзеры его увидят совсем не так как задумано.
Статья довольно интересна. Автор пытается подбирать размер шрифта в зависимости от разрешения монитора. И выставить «дизайнерский» размер шрифта в браузерах с увеличенным масштабом.
Лично для меня это второй этап.
А первый этап — установление кроссбраузерности относительного размера шрифта.
Проблема! Я:
— обнулил CSS (html{font-size:100.01%;}),
— указал размеры шрифтов в em (body{font-size:0.625em;}),
— выставил дефолтный размер шрифта/масштабирования в 3-х браузерах,
— снял скриншоты страниц браузеров
— в графическом редакторе стал сравнивать размеры шрифтов.
К сожалению размеры шрифтов в браузерах отличаются.
ГУРУ, Вы знаете какой-нибудь CSS хак, который будет приводить физический размер шрифта браузеров к единому знаменателю?
Иными словами:
Я хочу узнать как сделать так, чтобы физическая высота (в см) 1 em во всех браузерах, установленных на одном PC с одними и теми же разрешением монитора и установками ОС, была постоянна.
PS: Прошу Вас огалтело не минусовывать меня — я только учусь :)
Лично для меня это второй этап.
А первый этап — установление кроссбраузерности относительного размера шрифта.
Проблема! Я:
— обнулил CSS (html{font-size:100.01%;}),
— указал размеры шрифтов в em (body{font-size:0.625em;}),
— выставил дефолтный размер шрифта/масштабирования в 3-х браузерах,
— снял скриншоты страниц браузеров
— в графическом редакторе стал сравнивать размеры шрифтов.
К сожалению размеры шрифтов в браузерах отличаются.
ГУРУ, Вы знаете какой-нибудь CSS хак, который будет приводить физический размер шрифта браузеров к единому знаменателю?
Иными словами:
Я хочу узнать как сделать так, чтобы физическая высота (в см) 1 em во всех браузерах, установленных на одном PC с одними и теми же разрешением монитора и установками ОС, была постоянна.
PS: Прошу Вас огалтело не минусовывать меня — я только учусь :)
а межстрочный интервал (line-height) вы указали?
body{
width:100%;
font-size:0.625em; /* Resize text to 1em — 10px */
line-height:1;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
background-color:#fff;
}
Кажется из Эрика скопипастил…
width:100%;
font-size:0.625em; /* Resize text to 1em — 10px */
line-height:1;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
background-color:#fff;
}
Кажется из Эрика скопипастил…
Чтобы не было недопонимания, раскрою конфигурацию:
— ОС Vista
— Размер шрифта 130dpi
— FF 3.0.3
— IE 7.0.6
— Opera 9.52
— ОС Vista
— Размер шрифта 130dpi
— FF 3.0.3
— IE 7.0.6
— Opera 9.52
в разных браузерах разный механизм сглаживания, 1:1 всё равно не получится, да и стоит-ли?
пользователю наплевать на то что условно говоря — высотка строки текста в IE на один пиксель больше чем Firefox.
Ни один нормальный пользователь не будет сравнивать как выглядят страницы одного и того же сайта в разных браузерах попиксельно!
Сильно большие различия?
Если пару пикселей — постарайтесь убедить заказчика что он желает ненужного.
pepelsbey вообще рекомендовал уходить от заказчиков, что желают пиксель в пиксель.
Пиксель в пиксель — это на флеше :)
пользователю наплевать на то что условно говоря — высотка строки текста в IE на один пиксель больше чем Firefox.
Ни один нормальный пользователь не будет сравнивать как выглядят страницы одного и того же сайта в разных браузерах попиксельно!
Сильно большие различия?
Если пару пикселей — постарайтесь убедить заказчика что он желает ненужного.
pepelsbey вообще рекомендовал уходить от заказчиков, что желают пиксель в пиксель.
Пиксель в пиксель — это на флеше :)
Различия к сожалению не 1 пиксел, а поболее будет (Большой заголовок — название сайта).
Интересуюсь для себя, не кОрысти ради :)
Так что уйти от себя не получится :)
Однако, пришла мысль:
1. Предположим, что мы можем узнать разрешение экрана — в статье про это рассказывается.
2. Тогда мы можем понять, сколько пикселов помещается в дюйме.
3. В зависимости от разрешения выставляем body размер в пикселах (px). А лучше всего даже считать по формуле.
В результате на Веб странице мы будем оперировать метрическими размерами (через em).
Я провел эксперимент, поставив body{font-size: 10px;}.
Размер шрифтов в браузерах примерно сравнялся (остались различия, которые можно списать на сглаживание шрифтов). Попробовал масштабирование — оно работает.
Может стоит в Ваш метод включить данный способ «ластика»?
Интересуюсь для себя, не кОрысти ради :)
Так что уйти от себя не получится :)
Однако, пришла мысль:
1. Предположим, что мы можем узнать разрешение экрана — в статье про это рассказывается.
2. Тогда мы можем понять, сколько пикселов помещается в дюйме.
3. В зависимости от разрешения выставляем body размер в пикселах (px). А лучше всего даже считать по формуле.
В результате на Веб странице мы будем оперировать метрическими размерами (через em).
Я провел эксперимент, поставив body{font-size: 10px;}.
Размер шрифтов в браузерах примерно сравнялся (остались различия, которые можно списать на сглаживание шрифтов). Попробовал масштабирование — оно работает.
Может стоит в Ваш метод включить данный способ «ластика»?
не совсем понял — задача стоит показывать заголовок определённым физическим (в дюймах) размером?
и проверять именно разрешение (типа 1024х768 и т. п.) а не dpi экрана?
и проверять именно разрешение (типа 1024х768 и т. п.) а не dpi экрана?
Задача стоит так:
Выводить на экран шрифты и картинки определенным физическим размером (в дюймах).
Таким образом мы отдадим должное дизанеру, чей дизайн будет одинаково показываться на разных мониторах с разным разрешением.
Но в то же время, пользователь должен иметь возможность увеличить размеры шрифтов и картинок по своей надобности.
Я думаю, что эту задачу можно решить, если установить начальные значения в px, а все остальные в em.
Но так как разрешения экранов (px на дюйм) величина не постоянная, то начальные значения (px) необходимо вычислять, задействовав хинты, типа screen.deviceXDPI, screen.logicalXDPI (а это уже Вам виднее как вычислить)
Выводить на экран шрифты и картинки определенным физическим размером (в дюймах).
Таким образом мы отдадим должное дизанеру, чей дизайн будет одинаково показываться на разных мониторах с разным разрешением.
Но в то же время, пользователь должен иметь возможность увеличить размеры шрифтов и картинок по своей надобности.
Я думаю, что эту задачу можно решить, если установить начальные значения в px, а все остальные в em.
Но так как разрешения экранов (px на дюйм) величина не постоянная, то начальные значения (px) необходимо вычислять, задействовав хинты, типа screen.deviceXDPI, screen.logicalXDPI (а это уже Вам виднее как вычислить)
а зачем?
ведь мониторы-то у всех разные — для кого-то будет слишком мелко, для кого-то наоборот.
ведь мониторы-то у всех разные — для кого-то будет слишком мелко, для кого-то наоборот.
Так нужно вычислить количество начальных px для каждого монитора (вытащив каким-то образом разрешение отображающего девайса), чтобы на каждом конкретном мониторе (которые с разными разрешениями) размер шрифта составил заданные дюймы (сантиметры), если к монитору приложить линейку.
ну идея понятна, а смысл?
ведь мониторы-то разного размера, на маленьком мониторе например это будет слишком крупный шрифт.
пользователям будет неудобно читать.
ведь мониторы-то разного размера, на маленьком мониторе например это будет слишком крупный шрифт.
пользователям будет неудобно читать.
Это спорное утверждение.
Посмотрим в сторону Vista:
Мы видим, что пользователь в системе может самостоятельно указать разрешение устройства.
Например, у меня устройство имеет реальное разрешение 100 dpi. У меня плохое зрение и я решил сделать буквы побольше — я указал заведомо ложное разрешение в 130 dpi, тем самым увеличив шрифт.
Возможна и другая ситуация — маленький экран, в который ничего не вмещается, вынудит пользователя поставить разрешение 72dpi.
Это механизм умещения информации в площадь отображения, которым управляет пользователь.
Разработчикам сайтов удобно принять за аксиому, что разрешение, которое сообщает система, реальное и исходя из него отображать информацию.
Но изначальная идея была не в том, чтобы отображать шрифт в натуральную величину (эту идею было проще объяснить), а в том, чтобы заставить браузеры на конкретном устройстве показывать одинаково шрифт! Чтобы одна и та же верстка во всех браузерах умещалась в отведенные поля :)
Единообразное отображение шрифтов можно реализовать, например, привязав во всех браузерах размер шрифта к физическим размерам (масштабом которых в свою очередь управляет пользователь).
Посмотрим в сторону Vista:
Мы видим, что пользователь в системе может самостоятельно указать разрешение устройства.
Например, у меня устройство имеет реальное разрешение 100 dpi. У меня плохое зрение и я решил сделать буквы побольше — я указал заведомо ложное разрешение в 130 dpi, тем самым увеличив шрифт.
Возможна и другая ситуация — маленький экран, в который ничего не вмещается, вынудит пользователя поставить разрешение 72dpi.
Это механизм умещения информации в площадь отображения, которым управляет пользователь.
Разработчикам сайтов удобно принять за аксиому, что разрешение, которое сообщает система, реальное и исходя из него отображать информацию.
Но изначальная идея была не в том, чтобы отображать шрифт в натуральную величину (эту идею было проще объяснить), а в том, чтобы заставить браузеры на конкретном устройстве показывать одинаково шрифт! Чтобы одна и та же верстка во всех браузерах умещалась в отведенные поля :)
Единообразное отображение шрифтов можно реализовать, например, привязав во всех браузерах размер шрифта к физическим размерам (масштабом которых в свою очередь управляет пользователь).
ВАЖНОЕ ДОПОЛНЕНИЕ: ФИКС ГЛЮКА В OPERA 9!
После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для min-resolution: 120dpi.
В Opera 8 и 9.6 — всё ок.
Прблема схожа с safari 3.0.4 и @charset «utf-8»;
Статья дополнена исправлением для Opera 9.
После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для min-resolution: 120dpi.
В Opera 8 и 9.6 — всё ок.
Прблема схожа с safari 3.0.4 и @charset «utf-8»;
Статья дополнена исправлением для Opera 9.
Огромное спасибо за этот пост. Никогда не копал последние селекторы CSS подробно, поэтому способ с min-resolution упустил :)
Только не очень понял… что это? #for-opera927 {/* dont' remove! */}
Только не очень понял… что это? #for-opera927 {/* dont' remove! */}
После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для
Т. е. это строка «на убой» чтоб Opera 9 его съела (проигнорировала), а нужные правила (за ним) уже выполняла.
В статье про это есть абзац «Необычный глюк в Opera 9 (<9.6)».
min-resolution. Поэтому я добавил сразу после этого блока пустое правило: #for-opera927 {/* dont' remove! */}, незадающее никаких стилей никаким элементам (элемента с id «for-opera927» — нет).Т. е. это строка «на убой» чтоб Opera 9 его съела (проигнорировала), а нужные правила (за ним) уже выполняла.
В статье про это есть абзац «Необычный глюк в Opera 9 (<9.6)».
Потрясающая статья. Эталон.
Лирическое отступление про screen.deviceXDPI, screen.logicalXDPI и Page zoom
В IE8 при включении Full-page zoom меняется значение screen.deviceXDPI. При 125% zoom оно = 120, при 150% — 144. При 100% (без масштабирования) screen.deviceXDPI возвращается к 96. При этом не имеет значения какое dpi стоит в винде.
А вот screen.logicalYDPI в 8-ке видимо постоянное число, у меня в тестах оно всегда было 96.
В 7-ке же и 6-ке, оба эти значения, при тестах, менялись только в зависимости от настроек винды. Page zoom в IE7 не менял значения ни того, ни другого свойства.
Я случайно обнаружил это через год после написания статьи, когда писал костыль к древнему сайту :)
статья обновлена :)
Случайно обнаружил что Opera 10.5 почему-то не реагирует на правило
хотя в доках наоборот — написано что только в presto 2.5 появилась его поддержка, а раньше не было (как же работало тогда раньше?).
Буду разбираться, как доберусь до рабочего компа.
@media all and (min-resolution: 120dpi) { ... }хотя в доках наоборот — написано что только в presto 2.5 появилась его поддержка, а раньше не было (как же работало тогда раньше?).
Буду разбираться, как доберусь до рабочего компа.
Судя по всему опера в последних версиях снова увеличивает шрифты при dpi>96.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
120 dpi и шрифты в em