Границы, а не подчеркивания, с помощью acronym и abbr

Среди некоторых дизайнеров популярно изменение представления элементов acronym и abbr, чтобы они выглядели на первый взгляд как будто с подчеркиванием точками. Однако этот эффект на самом деле реализуется с помощью значения border-bottom.

Пример таблицы стилей 10

Удаляем подчеркивание ссылки.

Новые правила

.source a { text-decoration: none; }

Регулировка просвета (интерлиньяж) и line-height

Хорошо известно, что добавление некоторого интервала между строками текста улучшает его читаемость, так как увеличенное пространство гарантирует, что надстрочные и подстрочные элементы (см. рисунок 29.2 для пояснения) на смежных строках не будут конкурировать за визуальное внимание.

Рис. 29.2.  Надстрочные элементы являются частями букв, которые поднимаются над средней линией текста (mean); подстрочные элементы являются частями букв, которые опускаются ниже базовой линии (base), на которой располагается текст.

Существует тесная связь между font-size (размером шрифта) элемента и его line-height (высотой строки), но по умолчанию все агенты пользователей вставляют небольшой просвет в каждую строку текста — обычно 10-15% высоты самих букв. Так как это значение по умолчанию изменяется для различных гарнитур шрифта, то свойство line-height поддерживает значение normal, кроме числовых значений.

Стоит также отметить, что в отличие от большинства свойств CSS, line-height принимает также числовые значения без единиц измерения, которое затем интерпретируется как доля значения по умолчанию.

Пример таблицы стилей 11

Добавляем в отрывок подходящей величины просвет

Новые правила

p { line-height: 1.5; }

.attribution { line-height: 1.5; }

Вытеснение pre и br: свойство white-space

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

Элемент pre предназначен для разрешения таких проблем, хотя он создает свои собственные проблемы, именно поэтому CSS предлагает свойство white-space. Поддерживаемые им значения, которые перечислены в таблице 29.3, позволяют стилисту выбрать, будет или нет браузер учитывать пробелы и разрывы строк, добавленные в исходную разметку или вставленные как генерируемый контент.

Рекомендация CSS 2.1 содержит исчерпывающие подробности о предложенной реализации и использовании свойства white-space (http://www.w3.org/TR/CSS21/text.html#white-space-prop).

Заключение

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

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