Адаптация классической газетной и книжной вёрстки, а также типографики к современной вёрстке в Web
На протяжении вот уже 2 лет я работаю с газетной и веб версткой. В момент написания этого индивидуального раздела, например, я работаю в газете Юзовка. Думаю описать то, чем схожи эти два подхода к верстке страниц (в интернете или в газете) было бы занимательно.
Сравнительный анализ
В последнее время внешний вид Web-сайтов все больше и больше начинает приближаться к классическому газетному или книжному виду, и требования к качеству текстовой информации неуклонно повышаются. Однако, даже не смотря на это, у верстки веб-сайтов и у верстки газет есть довольно много различий:
- Использование классических декоративных элементов (буквицы, спецсимволы, выносные элементы) для печати является нормой, в вебе же обычно выдается чистый текст.
- Выравнивание колонок, перенос слов в печати, использование кавычек «ёлочки». При верстке же в интернете обычно используется софт, который больше заточен для непосредственного создания странички, а не верстки текста. Текст обычно выравнивается по левому краю, колонки обычно используются для разделения непосредственно контента и разных меню, блоков рекламы и т.д. Очень редко в интернете верстают текст двумя или более колонками, обычно если текст небольшой. Согласитесь: скролить вниз во время чтения а потом посредине статьи опять скролить вверх, чтобы продолжить — не очень удобно.
- Фрагментированность текстовой информации в интернете. Да, в интернете весь текст выдаётся по кусочку, все эти «читать дальше», «продолжить», маленькие сообщения в комментариях требуют особого оформления, чтобы эти крупицы информации выделить. А в книге, например, текста очень много и он является основным, верстка направлена на комфорт для чтения.
- Больше «вольности» в оформлении веб-страниц. Как правило они более красочны, более динамичны. Нельзя конечно забывать про интерактивность, в книге или газете анимации не может быть.
- Разный подход к шрифтам. На экране удобнее читать, когда используется шрифт без засечек, т.к. разрешение не позволяет передать достаточно точно саму букву, получается что засечки становятся неким напрягающим глаз элементом. В книжном варианте же легче читать, когда шрифт с засечками.
Сейчас, в принципе, все больше и больше «фич» печати используется и в Вебе. Например, массовое увлечение кавычками-ёлочками (спасибо Артемию Лебедеву). Также все чаще стали использоваться декоративные элементы, типа буквиц.
Использование декоративных элементов и типографики
Классические декоративные элементы в Web часто создаются не «нативными», встроенными силами, а прибегая к неким ухищрениям.
Буквицы (Drop-Caps)
Способы создания буквицы:
Отделение первой буквы тегом
Этот способ хорош тем, что можно использовать изображения вместо буквы, однако надо постоянно выделять необходимую вам букву.
Использование псевдоэлемента
Минус этого способа в том, что на старых браузерах он может некорректно отображаться.
Выделение текста
Большинство способов выделения текста доступны в HTML, например выделение полужирным, начертанием,
курсив, подчеркивание. Для выделения капителью, например, можно воспользоваться правилом font-variant:
Для выделения заглавными можно воспользоваться text-transform:
Для отображения декоративных элементов, орнаментов в конце абзаца обычно используются изображения.
Для верстки колонками можно вручную разбить текст и раскидать его по двум равным div'ам или колонкам
таблицы. Это наверное самый простой и самый быстрый способ разделения текста на колонки.
Однако он требует ручной разбивки текста. Для того чтобы это делалось автоматически, можно воспользоваться
плагином Columnizer для jQuery. Минусом этого способа
является необходимость подключения jQuery и непосредственно самого плагина, если вы строго ограничены в
размерах сайта или слово «JavaScript» вызывает у вас трепет, то этот способ вам не подойдет.
Отличительной особенностью верстки многих хороших журналов было наличие собственного уникального шрифта. В наше время использование нестандартных шрифтов на собственном сайте уже не является чем-то недостижимым, начиная с CSS 2 (и пропуская CSS 2.1) доступно правило @font-face. И уже не надо применять всякие костыли на основе JavaScript, Flash или заменяя текст на изображение.
Google даже создал свою библиотеку веб шрифтов: http://www.google.com/webfonts с возможностью их подключить не загружая себе на сайт, а пользуясь шифтами лежащими на серверах google.
Однако, если вам интересно использовать собственный уникальный шрифт, которого нет в коллекции Google вы можете сами загрузить его себе и в css прописать правило для его подключения.
Однако будьте готовы загрузить кроме tff еще и варианты шрифтов в otf и woff (а также прописать отдельным правилом), если вам интересно, чтобы шрифты отображались на других браузерах, как например Internet Explorer (который распознает только формат otf и категорически отказывается понимать все остальные).
Я бы сказал что основные проблемы современной верстки - это отсутствие 3d, доступного в каждом браузере, однако пока что (начало 2011 года) эта фраза звучит как шутка.
Но отойдя от юмора, можно сказать, что проблем в современной вёрстке достаточно много и они обычно являются большой головной болью человека, который занимается версткой. Основные проблемы:
Пример кода:
span.first
{
float: left; /* выравниваем, текст обтекает справа */
font-family: Old English, Georgia,serif; /* стиль буквицы */
font-size: 300%; /* ее размер */
line-height: 0.85em;
margin-right: 0.03em;
margin-bottom:-0.25em; /*отступ текста снизу отрицательный */
}
Пример кода:
.myparagraph:first-letter
{
font-size:200%;
float:left;
color:blue;
}
.truecaps
{
font-variant: small-caps
}
.truecaps
{
text-transform: uppercase;
}
Интерлиньяж задается правилом line-height;
Верстка колонками
Использование нестандартных шрифтов
Пример кода:
@font-face {
font-family: Pompadur; /* Имя шрифта */
src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
}
Основные проблемы современной верстки.
Использованные материалы:
Опыт разработки символики для факультета
Режим доступа: URL:http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
Режим доступа: URL:http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html