Навигация

Партнеры


Комментариев: 0
 (голосов: 2)

CSS. Часть 26.


Версия один
Как примириться с безумием размеров шрифтов


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

Размер шрифта

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

{
font-size: llpx,
text-align: justify;
#quickSummary p.pi {
font-size: 9px;
background: transparent;
color: #999;
text-align: left;


Это означает, что самый крупный шрифт (не считая тех, что в изображениях) по высоте не превышает 11 пикселей, а местами используется даже шрифт высотой 9 пикселей. Дизайнеры любят мелкие шрифты, поскольку при большом кегле используемые в Web
шрифты выглядят непрофессионально. (Особенно этим страдает шрифт Verdana с кеглем больше 12 рх.)
Кроме того, мелкий шрифт позволяет уместить в заданной области больше информации. Хорошо, если бы все мы обладали зрением дизайнера, но, увы, это не так.

Средства, предоставляемые браузером


К счастью, у посетителя сайта есть кое-какие возможности. Все основные браузеры позволяют изменять размер шрифта, делая его больше или меньше по желанию пользователя. В большинстве браузеров средства масштабирования находятся в меню View (Вид) или активируются при одновременном нажатии клавиш Ctrl + (плюс) и Ctrl - (минус).
Если бы все шло, как задумано, то здесь можно было бы и закончить главу, заполнив оставшиеся страницы шутками и анекдотами. Увы, имеется проблема: в Internet Explorer для Windows единица измерения рх не масштабируется.

Относительные и абсолютные единицы измерения


Абсолютные единицы измерения длины имеют предопределенный смысл: cm, i n и p t - это соответственно сантиметры, дюйм и пункт. Величина каждой из них известна, и бессмысленно доказывать, что 2,5 cm равны полутора футам.
С другой стороны, использование относительных единиц - %, em, l a r g e r , s m a l l e r - предполагает, что между размерами существует некоторое соотношение.
Ясно, что 2 em и 200% в два раза больше, чем lem и 100%, но что такое вообще lem? И 100 процентов от чего7. Для каждой из этих единиц есть своя точка отсчета, и тут-то и начинаются различия: lem может быть равно и 3 дюймам, и 0,55 см, и еще много чему.
Когда в таблице стилей применяются относительные единицы измерения, то устанавливается некий опорный размер, соответствующий lem или 100% , и размеры шрифтов вычисляются пропорционально. Для заголовков может быть задан шрифт размером 15 0 % или 2 ,2 em, для подписей -0,8етили75%. Опорный размер можно задать явно или оставить на усмотрение браузера, но в любом случае пользователь сможет его изменить, в результате чего все шрифты будут отмасштабированы соответственно. Именно возможность управления со стороны пользователя и есть основное достоинство относительных единиц. Посмотрите, как выглядит «Версия один» в Windows XP при отключенной функции Clear Type, и вы поймете, почему эта
возможность так важна. Есть еще и третий вид единиц измерения. Согласно
спецификации CSS, ключевые слова х х - s m a l l , medium, x - l a r g e и некоторые другие тоже являются абсолютными единицами. Однако все не так замечательно, как кажется; ни один метод не работает, как задумано.

Пиксели и проблемы

Согласно спецификации CSS, единица измерения рх на самом деле является относительной. На этот счет существуют длинные и туманные рассуждения, связанные с длиной руки и углом зрения, но если в двух словах, то на 15-дюймовом мониторе с разрешающей способностью 1280x960 пикселей текст выглядит гораздо мельче, чем на 21-дюймовом мониторе с разрешающей способностью 800x600. Поскольку во втором
случае шрифт с кеглем 1 Орх вполне различим, а в первом - вряд ли, то эту единицу измерения нельзя считать абсолютной в соответствии с данным ранее определением.
Но если рх - относительная единица, то разве нельзя ее применить для точного контроля над опорным размером шрифтов и позволить пользователю масштабировать заданные с ее помощью шрифты по собственному желанию? Оно, конечно, так, только вот...
Internet Explorer для Windows не умеет масштабировать единицу рх, так что на практике она становится абсолютной. Но, быть может, тогда em или % решат
все проблемы? Не торопитесь. Относительные единицы измерения тоже не идеальны.

Точка отсчета

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

Несогласованность и округление

Отдать выбор точки отсчета на усмотрение браузера, может быть, и хорошо, если только вам не нужно, чтобы в разных браузерах дизайн выглядел примерно оди-
наково. Хотя в большинстве браузеров и действует соглашение о 16 пикселях, но в разных операционных системах и старых версиях браузеров различия ошеломляющие. Несколько лет назад дизайнер Оуэн Бриггс (Owen Briggs) провел серию тестов и, собрав сотни снимков с экрана, доказал, что согласованность между относительными единицами измерения - не более чем несбыточная мечта. То же относится и к ключевым
словам, определенным в спецификации CSS. Из-за этих расхождений долгое время считалось, что относительными единицами пользоваться нельзя; lem могло равняться чему угодно в диапазоне от 12 до 16 пикселей.
Различны не только точки отсчета, но и результаты масштабирования. Если lem равен 16 пикселям, то чему равен 0 , 9 em? В одном браузере 14,4 пикселей округляется до 14, в другом - до 15.

Сложные проценты

Пользуясь относительными единицами измерения, легко загнать себя в угол. Рассмотрим следующий код:

<div id="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition,
inspiration, and a resource we
can all refer to when making the case for
CSS-based design. This is
sorely needed, even today.</p>


Если применить к нему показанную ниже таблицу стилей, то каков будет размер текста внутри абзаца в предположении, что 100% - это 16 пикселей?

#benefits {
font-size: 75%;
font-size: 75%;
}


Что у вас получилось: 9 или 12 пикселей? Правильный ответ - 9. Первое правило уменьшает размер шрифта внутри раздела #benef i t s на 75%, то есть до 12 пикселей. Второе правило наследует это значение и уменьшает его еще на 75%, в результате получается шрифт высотой 9 пикселей.
Эта схема вычисления сложных процентов приводит в недоумение, когда применяется неосознанно и без проверки; сделайте несколько таких итераций - и текст станет вовсе нечитаемым. Особенно от этого страдают старые браузеры, например Internet Explorer для Macintosh: с каждым применением относительных единиц к вложенным элементам текст становится все меньше и меньше.

Разумное масштабирование шрифтов

Итак, все методы задания размера шрифта порождают те или иные проблемы. Так что же делать бедному веб-дизайнеру? Похоже, задание размера в пикселях самый простой выход для дизайнера, зато доставляет максимум неприятностей пользователю. Существует три надежных способа, и у каждого из них есть плюсы и минусы.
Метод em После того как Оуэн Бриггс представил миру свои снимки с экрана, он обнаружил, что при задании размера шрифта с помощью процента самых очевидных
ошибок округления удается избежать. Если в элементе body указать процентное значение, а во всех остальных местах единицу em, то размер вычисляется приблизительно одинаково во всех браузерах:

body {
font-size: 76%;
Р {
f o n t - s i z e : lem;


Бриггс предлагает именно такие значения и рекомендует не употреблять для масштабирования текста на странице коэффициент ниже 1 em. В результате шрифт внутри элемента р будет иметь высоту примерно 12 пикселей при условии, что по умолчанию в браузере предполагается кегль 16 пикселей. Для большей части людей это достаточно комфортно, а в случае чего относительность единиц измерения позволит изменить масштаб. Указанный метод подробно описан на личном сайте Бриггса в статье «Sane CSS sizes». Ахиллесовой пятой этой техники является предположение о том, что браузер по умолчанию принимает кегель 16 пикселей. Для большинства браузеров так оно и есть, но если пользователь изменит стандарт - фотоное значение, то это отразится и на масштабировании.

Метод на основе ключевых слов

Самые серьезные проблемы при задании размера шрифта с помощью ключевых слов возникают в браузере Internet Explorer 5 для Windows. Если забыть о нем, то этот метод дает достаточно согласованные результаты и в большинстве остальных браузеров работает надежно. Так что, отфильтровав Internet Explorer 5 для
Windows с помощью трюка, связанного с моделью прямоугольных областей (Box Model Hack), ключевыми словами пользоваться все-таки можно:

body {
font-size: x-small;
voice-family: " \ " } \ "";
voice-family: inherit;
font-size: small;
html>body {
font-size: small;


Предполагается, что при переходе от одного ключевого слова к соседнему действует масштабный коэффициент 1,2. Таким образом если среднее значение соответствует 16 пикселям, то приведенное выше объявление даст размер примерно 13 пикселей.

Метод переключения таблицы стилей


Для точного контроля над экранными шрифтами лучше всего пользоваться единицей измерения рх. Вообще-то полагаться на нее опасно, но существует способ обойти ошибку в Internet Explorer, создав вторую таблицу стилей с большим размером шрифта.
Методы переключения таблиц стилей встроены в некоторые браузеры, но не в Internet Explorer для Windows. Поэтому были разработаны программные способы восполнения этого недостатка, с помощью которых пользователь может взять управление в
свои руки. Наиболее известен оригинальный метод Пола Соудена (Paul Sowden), опубликованный на сайте A List Apart. С его помощью можно модифицировать не только шрифты, он доказал свою эффективность в построении средств настройки сайта
с помощью экранных элементов управления, добавленных дизайнером.
Так какой метод выбрать?
На каком же из трех этих методов лучше остановиться при работе над своим проектом? Дело вкуса. У посетителей, заходящих на сайт, зрение может оказаться похуже, чем у дизайнера Дидье Хильхорста, но если вы тщательно подойдете к выбору метода задания размеров шрифта, то они не станут на это сетовать.

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 41
Гостей: 28
Пользователи: zjExifide
Роботы: robot Bot, robot Bot, Yandex Bot, crawl Bot, Yahoo Bot, Yandex Bot, robot Bot, robot Bot, robot Bot, Google Bot, Google Bot, robot Bot

20-ка посетителей: zjExifide, taAnipse, rscxbehuch, ysuplidenisBep, nnvacmhuch, GahCoorashouh, deEquigue, rbwtdkhuch, krprh234Bep, FreddiebuH, Clintonnax, AgnesAccony, anri22fatiBep, xkassghuch, Rasarusst, tmowjuhuch, zrEquigue, BasirSimi, ellafe18, BengerdJag


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги