Ограничения полиграфии в Web

Дизайнеры традиционной печати имеют в своем распоряжении огромное количество возможностей, когда речь идет о полиграфии, включая огромное число доступных шрифтов, и возможностей позиционирования текста. Полиграфия в Web значительно более ограничена, так как необходимо создавать дизайн, используя шрифты и позиционирование, и т.д., которые, как нам известно, будут доступны на компьютерах пользователей, которые будут просматривать Web -сайты — в Web бесполезно проектировать просто для себя!

· Отсутствие переноса слов, что делает полное выравнивание ужасным, когда столбец текста становится уже

· Слабый контроль за кернингом (т.е., интервалами между буквами)

· Отсутствие контроля за представлением работы - дизайнеры должны учитывать большое количество вариантов размеров экрана, разрешения и рабочих сред

Давайте рассмотрим эти вопросы немного подробнее.

Ограниченный выбор шрифтов часто является первым вопросом, с которым вы столкнетесь при оформлении текста. Хотя в CSS можно определить любой шрифт, посетители сайтов увидят текст в этом виде, только если они имеют такой же шрифт, установленным на своем компьютере — если это не так, их браузер будет использовать либо альтернативный шрифт, который был определен в CSS, либо воспользуется значением по умолчанию браузера (обычно Times New Roman). Поэтому вы можете захотеть представить свой основной текст специальным шрифтом, таким как Trump Medieval или Avant Garde, но если ваша основная аудитория не связана тесно с дизайнерами, зрители вряд ли увидят текст в этом виде. В связи с этим большинство Web-дизайнеров ограничивают себя наиболее общедоступными на всех системах шрифтами, список которых обычно ограничен следующим набором:

· Comic Sans (это крайне непрофессиональный, уродливый шрифт - не используйте его)

Они выглядят следующим образом, как показано на рисунке 11.1:

Рис. 11.1. Наиболее широко распространенные на всех системах шрифты, ограничены приведенными выше

При использовании любого из приведенных выше шрифтов вы, скорее всего, выберите шрифт, который будут иметь большинство посетителей сайта. Компания Microsoft представила шесть новых шрифтов, созданных для использования на экране в Windows Vista и XP, и, по странному решению, выбрала все названия для них, начинающиеся с буквы С. Если вы захотите их использовать, то они называются Cambria, Calibri, Candara, Consolas, Constantia и Corbel. Однако я не рекомендую этого делать, так как они скорее всего будут недоступны на платформах Mac или Linux. Поэтому, сравнивая с тысячами шрифтов, доступных дизайнерам печатной продукции, дизайнеры Web могут надежно выбирать только примерно из десятка. Является ли это серьезным ограничением? Полиграфия включает в себя значительно больше, чем только выбор привлекательного шрифта, она требует также рассмотрения длин строк, кернинга и пробелов — вспомните, что печатники до появления электронных шрифтов сталкивались с аналогичными ограничениями.

Когда речь идет о выравнивании текста в пределах его контейнера, имеется четыре варианта: выравнивание слева, выравнивание справа, выравнивание по центру, и полное выравнивание. Полностью выровненный текст, когда правый и левый края блока текста выравнивается по вертикальным сторонам контейнера, может выглядеть более привлекательно, чем текст с "неровными" краями, и его можно видеть в большом количестве в журналах и книгах. Однако в сети Web это связано с некоторыми трудностями, в связи с отсутствием автоматического переноса слов, который разбивает слова в подходящем месте, чтобы лучше разместить их на строке. Чтобы полностью выровнять блок текста, браузеры могут только изменять интервалы между словами, что может приводить к "потокам пробелов", стекающих вертикально через блок — это обычно происходит, когда длина строки в блоке слишком короткая, и имеется недостаточно пространства, чтобы слегка изменить настройку, как показано на рисунке 11.2.

Рис. 11.2. Потоки пробелов могут портить блоки полностью выровненного текста

Как можно видеть на этом снимке с экрана, отсутствие переносов для разрыва слов в естественных точках создает пробелы между определенными словами, которые увеличиваются до неприемлемых размеров. Чтобы избежать этого необходимо использовать выравнивание текста слева для большей части Web.

Кернинг является процессом настройки пробелов между определенными частями букв, когда используемый шрифт является пропорциональным (таким как Times New Roman, в котором пробел между отдельными символами изменяется от символа к символу), в отличие моноширинного (такого как Courier, где пробел между символами всегда один и тот же). Кернинг используется при печати для уменьшения пространства между буквами, которые размещаются естественным образом, такими как W, за которой следует A, и может создать для текста более профессиональный вид. Большинство профессиональных шрифтов поставляются со встроенными командамикернинга, чтобы предоставить информацию о пробелах системе воспроизведения текста. Рисунок 11.3 иллюстрирует различие, создаваемое кернингом.

Рис. 11.3. Кернинг может определенно улучшить вид текста

На приведенном выше снимке с экрана первое слово не было подвергнуто кернингу. Однако второе слово имеет уменьшенный пробел между буквами W и A, в то время как пробел между A и S был слегка увеличен.

В сети Web кернинг с таким уровнем точности фактически недоступен. Единственное, что имеется, что в некоторой степени близко к кернингу, является возможность использовать трекинг, что в мире печати означает настройку пробела между символами в основном тексте, независимо от символов — поэтому можно будет уменьшить интервал между буквами W и A, но при этом также будет изменяться интервал между всеми другими буквами. В сети Web трекинг известен больше как интервал между буквами, и контролируется с помощью CSS — что показано на рисунке 11.4.

Рис. 11.4. Полноценный кернинг недоступен в Web; ближе всего к этому подходит более общее понятие интервала между буквами

На приведенном выше снимке с экрана интервал между символами был увеличен на одинаковую величину. Хотя это помогло разделить A и S, интервал между W и A теперь стал слишком большим. Свойство интервала между буквами в CSS трудно использовать эффективно, в связи с его свойством либо все, либо ничего, и поэтому лучше использовать его с осторожностью.

Со всеми разговорами о мире печати, очень важно помнить о том, что Web не является печатью. Поэтому, там, где дизайнер печати не должен беспокоиться о том, что конечный зритель изменит размер текста, или может не иметь требуемый набор шрифтов, или не использовать требуемое подавление помех дискретизации, и часто существует искушение проверить определенный дизайн на зрителе — исправление, например, жесткого размера текста, или размещение текста в контейнерах фиксированного размера, или даже замена целых фрагментов текста изображениями. Однако отсутствие контроля не должно быть проблемой — необходимо просто привыкнуть к идее, что люди будут читать контент на множестве различных устройств в различных рабочих средах различным образом. Вы не должны пытаться остановить их, или создавать для них трудности — если они хотят прочитать ваш контент, то это должно делаться как можно проще. Они могут захотеть прочитать его на своем мобильном устройстве, когда они едут домой; они могут предпочесть распечатать и прочитать все на бумаге, а не на экране; они могут быть слабовидящими и нуждаться в некотором увеличении размера шрифта. Именно поэтому при стилевом оформлении текста в Web в действительности вы предоставляете указания для всех различных устройств просмотра, как вы предпочитаете представить текст. Устройства могут, конечно, все это проигнорировать, но это нормально — имеет значение то, что вы не пытаетесь навязать свои проектные решения всей аудКак полиграфия реализуется в Web? Полиграфия в Web полностью управляется с помощью CSS, и используя CSS, вы получаете большие возможности контроля: не только над выбором размера, цвета и гарнитуры шрифта, но также над высотой строки, интервалом между буквами, и уровнем использования заглавных букв (все заглавные, начальные заглавные, малые заглавные, отсутствие заглавных вообще) и даже контроль над тем, как стилистически оформляется первая буква или первая строка текста. При оформлении содержащего блок текста можно также контролировать уровень выравнивания текста и длины строки. Но не только это, вы должны также создавать правила стилевого оформления только в одном месте — в таблице стилей — чтобы эти правила применить ко всему тексту, по всему Web -сайту (или можно быть более конкретным и нацелиться на определенные параграфы, или области на странице). Более того, если вдруг понадобится увеличить размер текста Web -сайта, или изменить шрифт основного текста, нужно будет изменить значение только в таблице стилей.

Ниже представлены некоторые рекомендации по использованию полиграфии в Web.

Хорошей практикой считается включение резервных вариантов выбора при определении предпочтительного шрифта вывода. Поэтому вместо того, чтобы просто определить "Georgia", можно задать "Georgia, Cambria, Times New Roman, Times, serif". В этом случае браузер сначала попытается использовать шрифт с именем Georgia, но если этот шрифт не установлен, он попытается использовать Cambria, затем Times New Roman, а затем Times, после чего тот шрифт, который операционная система задала для ключевого слова "serif".

Чтобы повысить удобочитаемость, средняя длина строки текста в охватывающем блоке должна быть около 40-60 символов на строку, хотя это может варьироваться в зависимости от аудитории (дети предпочитают более короткие строки, взрослые предпочитают более длинные). Идеальная длина строки показана на рисунке 11.5:

Рис. 11.5. 60 символов на строку - идеальная длина строки

Текст на снимке с экрана содержит примерно 60 символов на строку. Немного больше этого значения, и читатель начнет двигать глазами — или даже головой — чтобы следовать за текстом, что может увеличить напряжение на глаза и сделать текст более трудным для восприятия.

Высота строки относится к вертикальному пространству между строками, и можно сделать свой шрифт более читаемым, увеличивая его немного относительно используемого в браузере значения по умолчанию (что также создает дополнительное пространство для символов нижних и верхних индексов) — сравните два параграфа на рисунке 11.6:

Рис. 11.6. Высота строки может создать большое различие во внешнем виде текста

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

Определяя псевдо-элемент первой буквы как p:firstletter { }, можно представить первую букву отлично от остальных — такое оформление называется обычно буквицей, когда первая буква занимает примерно 3-4 строки текста — см. рисунок 11.7.

Часто шрифты поставляются с вариантом капители — множеством прописных букв, которые находятся в верхнем регистре, но имеют примерный размер варианта строчной буквы. Это полезно в тех случаях, когда вы хотите записать что-то прописными буквами, но не хотите привлекать к этому слишком много внимания, например, это может использоваться для сокращений. Даже если система не имеет варианта капители указанного шрифта, все будет нормально — браузер сгенерирует свою собственную версию, используя полноразмерные прописные символы и затем сокращая символы примерно на 70-80% от их обычного размера. Рисунок 11.8 показывает разницу между полноразмерными прописными буквами и капителью.

Можно использовать хороший полиграфический эффект, если предложение начинается со знака кавычки. Свойство CSS (text-indent) для отступа текста с отрицательным значением — применяя значение в em (-10em), пунктах (-10pt), пикселях (-10px) или процентах (-10%) — позволяет сдвинуть символ кавычки влево, сохраняя левую вертикальную линию блока текста, как показано на рисунке 11.9:

Полиграфически-правильная пунктуация и другие вопросы

Можно сделать свой текст более профессиональным и элегантным, используя множество имеющихся полиграфических объектов HTML, таких как "кривые" кавычки и короткие (-) и длинные (—) тире. Большая часть программного обеспечения поддержки блогов и обработки текста автоматически делают это во время ввода текста, превращая обычные прямые кавычки в полиграфически правильный изогнутый вариант, и превращая строки тире в короткие или длинные тире. На рисунке 11.10 можно видеть примеры полиграфически правильной пунктуации.

Рис. 11.10. Полиграфически правильная пунктуация

Если вы начнете улучшать свой основной текст развитой пунктуацией, текст может выглядеть значительно более элегантным и профессиональным — в большей степени похожим на текст книги или журнала, чем на текст в сети. Помните, однако, что такая пунктуация может выглядеть немного пикселизированной для людей с более старыми экранами или при отключении сглаживания, поэтому старайтесь использовать ее с осторожностью. Кроме того существуют объекты, задаваемые специальным кодом HTML, которые можно вставлять в основной текст для генерации специальных символов, обычно отсутствующих на клавиатуре. Рисунок 11.11 показывает ряд таких объектов:

Их можно ввести вручную, но часто программное обеспечение управления контентом может легко преобразовать или вставить такие объекты.

Врезки являются небольшими цитатами из текста, которые размещают на странице, используя символы большего размера, и иногда другой шрифт, чтобы привлечь к нему внимание. Вы видели их почти в любом журнале, который читали, и они являются эффективным способом разбиения текста и выделения ключевых мыслей или фраз — и они также легко создаются в Web с помощью простой разметки и стилевого оформления. Сделайте просто текст больше, задайте, возможно, другой шрифт, разместите его так, чтобы обычный текст обтекал его, и все готово. Существует также несколько более развитых решений, которые включают выбор выделенного текста с помощью JavaScript и автоматическое заполнение с его помощью врезки, что может исключить необходимость дважды писать один и тот же текст в коде разметки.

Таким образом, существует полиграфия, и существует полиграфия в Web. Мы видели, что текст в сети не должен быть ограничен чем-то одним, например, Verdana, small, #333333 — существует широкий набор полиграфических приемов, которые могут помочь сделать текст отличным от других. Большинство Web -сайтов люди посещают для того, чтобы прочитать написанное авторами, поэтому имеет смысл сделать это чтение насколько возможно приятным.

· В чем различие между кернингом и трекингом, и что из них доступно для Web-дизайнера?

· Как можно избежать "потоков пробелов" стекающих по тексту?

· Назовите четыре различных типа использования прописных букв, доступных с помощью CSS.

· Какая длина строки будет оптимальной для основного текста, и какие факторы могут влиять на это?

· В чем различие между шрифтом с засечками и без засечек? Приведите пример каждого из них.

· Чем висящая пунктуация отличается от обычной пунктуации?

· Если вы хотите вставить символ copyright в основной текст, вы используете объект HTML. Сделайте просмотр страниц в Интернет и попробуйте найти все другие объекты HTML. Существует около 250 таких объектов!

Аннотация: Лекция знакомит с основами языка HTML - что это такое, что он делает, кратко история его появления, и немного о том, как выглядит структура документа HTML

В этой лекции мы познакомимся с основами языка HTML — что это такое, что он делает, его историей вкратце, и как выглядит структура документа HTML. Следующие лекции будут рассматривать каждую отдельную часть HTML со значительно большей глубиной. Лекция имеет следующую структуру:

· Элементы блочного уровня и строковые элементы

Большинство настольных приложений, которые читают и записывают файлы, используют специальный формат файлов. Например, Microsoft Word понимает файлы ".doc", а Microsoft Excel понимает ".xls". Эти файлы содержат инструкции о том, как восстановить документ, когда вы откроете его в следующий раз, каково содержимое документа, и " метаданные " статьи, такие как автор, дата последней модификации документа, даже такие вещи, как список сделанных изменений, чтобы можно было перемещаться между различными версиями. HTML (" Язык разметки гипертекста") является языком описания содержимого документов Web. Он использует специальный синтаксис, содержащий маркеры (называемые " элементами "), которые охватывают текст в документе, чтобы указать, как агенты пользователя должны интерпретировать эту часть документа. Здесь используется технический термин "агенты пользователя", а не "браузеры Web ". Агент пользователя является любым программным продуктом, который используется для доступа к страницам Web от имени пользователей. Здесь необходимо сделать важное различие — все типы программ браузеров настольных компьютеров (Internet Explorer, Opera, Firefox, Safari, и т.д.) и альтернативные браузеры для других устройств (такие как Интернет -канал Wii и браузеры мобильных телефонов, такие как Opera Mini и WebKit на iPhone) являются агентами пользователей, но не все агенты пользователей являются программами-браузерами. Автоматические программы, которые компании Google и Yahoo! используют для индексирования Web для использования в своих поисковых системах, также являются агентами пользователей, но ни одно человеческое существо не управляет ими непосредственно.

HTML является просто обычным текстовым представлением содержимого и его общего смысла. Например, код заголовка "Что такое HTML " выше выглядит следующим образом:

Часть "<h2>" является маркером (который мы называем " тегом "), который означает "то, что следует далее, должно рассматриваться, как заголовок второго уровня". "</h2>" является тегом для указания, где находится окончание заголовка второго уровня (который мы называем "закрывающий тег "). Открывающий тег, закрывающий тег и все, что между ними называются " элементом ". Однако многие люди используют термины элемент и тег взаимозаменяемо, что не совсем строго правильно.

В большинстве браузеров имеется функция "Исходный текст" или "Просмотр исходного текста", обычно в меню "Вид". Если такая функция имеется, выберите ее и уделите некоторое время изучению исходного кода HTML страницы.

В "лекции 2", "История Интернет и Web ", вы немного узнали о том, как появилась современная сеть Web. Когда Тим Бернерс-Ли изобрел World Wide Web, он создал первые Web -сервер и Web - браузер и первую версию HTML (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html). Хотя HTML значительно изменился с тех пор, большая часть содержимого современного HTML реализована в этом первом документе и более половины " тегов ", описанных в исходном документе " Теги HTML " по прежнему существуют. По мере того как все больше людей начали создавать Web -страницы и альтернативные варианты исходной программы браузера, все больше свойств добавлялось в HTML. Многие были признаны повсеместно (такие как элемент img, используемый для вставки изображения в документ, реализованный впервые в браузере NCSA Mosaic). Некоторые были более частными и использовались реально только в одном или двух браузерах. Возникла настоятельная потребность в стандартизации — чтобы авторы других программ Web -браузеров имели документ (называемый "спецификацией"), который окончательно описывал для них, как выглядит HTML, чтобы они могли оценить, пропустили они или нет при реализации некоторые части HTML. IETF (Internet Engineering Task Force - орган стандартизации, занимающийся взаимодействием в Интернет) опубликовал черновик предложения по стандарту HTML в 1993. Он утратил силу, не став стандартом в 1994 г., но стимулировал IETF на создание рабочей группы для создания стандарта HTML. В 1995 г. был написан " HTML 2.0", использовавший идеи из исходного черновика HTML. Дейв Раггетт написал также альтернативное предложение, названное HTML +, которое использовалось в качестве основы для многих новых элементов, реализованных в браузерах (такие как метод вставки изображений в документы, предложенный впервые в браузере NCSA Mosaic). Черновик HTML 3.0 появился позже в этом же году, но работа над этой версией была прервана, в связи с отсутствием поддержки со стороны производителей браузеров. HTML 3.2 потерял многие новые свойства 3.0, и вместо этого принял многие разработки популярных в то время браузеров Mosaic и Netscape Navigator. В 1997 консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Это было сделано, помечая различные элементы как исключенные — что означает, что элементы устарели и хотя они еще существуют в этой версии, они будут удалены в последующем. Это должно было стимулировать лучшее и более семантическое использование HTML в документах (что описано более подробно в "лекции 4", Модель стандартов Web). Версия HTML 4.01 была опубликована в 1999 г., и с некоторыми исправлениями опечаток в 2001 г. Это самая последняя версия HTML, хотя в настоящее время готовится черновик версии HTML 5. В 2000 г., консорциум W3C опубликовал также спецификацию XHTML 1.0, которая была реструктуризацией HTML, чтобы сделать его действительным документом XML.

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: