Дмитрий Кирсанов - Веб-дизайн

Для больших по объему таблиц нужны визуальные средства, подчеркивающие их табличную структуру и помогающие взгляду скользить по строкам и столбцам. К сожалению, предлагаемая для этого стандартным HTML разлиновка ячеек (атрибут border) имеет два больших недостатка. Во–первых, линейки невозможно провести выборочно — либо в таблице нет ни одной линейки, либо каждая ее ячейка заключена в рамку со всех четырех сторон. И, во–вторых, сами эти линейки в визуальных броузерах, так же как и разделители HR и границы фреймов, имеют вид псевдотрехмерных бороздок, о неприемлемости которых в серьезном дизайне уже достаточно говорилось на стр.203.

Отказавшись от громоздкой и вызывающей приступы клаустрофобии разлиновки по умолчанию, дизайнер может воспользоваться тем, что для каждой ячейки таблицы можно задать свой цвет фона, отличный от фона всей страницы и даже закрывающий на территории этой ячейки фоновое изображение (если оно есть). Заливкой фона можно выделять заголовки и боковики в таблицах; популярен также прием подсветки через одну строк с основными данными (такие полосатые таблицы, например, используются для списков книг на сайте books.ru, пример 15). Кроме того, с помощью изменения цвета фона можно имитировать и частичную разлиновку — например, вставив после боковика узкую ячейку, простирающуюся по всей высоте таблицы, и закрасив ее каким–то цветом, мы получим вертикальную линейку, избавленную от обоих упомянутых выше недостатков стандартной разлиновки.

Спецификация HTML 4.0, принятая в начале 1998 года, значительно расширила, по сравнению с предыдущими версиями, набор средств для разметки таблиц. Большинство новых тегов и атрибутов предназначены для более адекватной структурной разметки таблиц и для более гибкого представления табличной информации в невизуальных броузерах. Есть, однако, и усовершенствования в средствах визуального форматирования — в частности, атрибуты frame и rules позволяют выборочно проводить линейки между ячейками и вокруг таблицы.

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

Многие дизайнеры относятся с недоверием (вполне, надо признать, обоснованным) ко всем технологиям, выходящим за пределы HTML и GIF, не желая подвергать свое хрупкое творение «капризам погоды» на компьютере пользователя и пользуясь графикой для передачи любого текста, чье оформление небезразлично для производимого страницей художественного впечатления. С точки зрения таких авторов, идеальным форматом для распространения информации в Интернете является не HTML (с этим, впрочем, вряд ли кто–то будет спорить) и не XML, a PDF (стр. 58), у которого нет нескольких конкурирующих программ просмотра, но зато есть полная свобода в использовании шрифтов и оформлении текстовых элементов.

Чаще всего графические вставки применяются для заголовков (о них мы уже говорили на стр.200), кнопок на панелях навигации, а также для выделенных фрагментов текста, таких как рекламные лозунги, вводные абзацы статей или «выдернутые» цитаты (англ. pull–out quotes, пример 7). Эстетическое воздействие аккуратно сверстанного графического текста, к сожалению, бывает сильно подпорчено конфликтом с расположенным рядом обычным текстом, почти всегда имеющим на компьютере пользователя не тот кегль, на который рассчитывал дизайнер. Но безусловно самое ужасное, что только может сделать дизайнер в этой ситуации, — это отлить в графику текст с ошибками или даже просто с опечатками: по вполне объяснимым причинам неаккуратность в подготовке «кускового» текста раздражает во много раз сильнее, чем огрехи в обычном тексте «россыпью».

Перенос текста в графику откровенно противоречит идеологии открытости информации, принятой в HTML и особенно в XML. Тем не менее нельзя сказать, что такой «окаменевший» текст навсегда потерян для неграфических броузеров и автоматических сборщиков информации: специально для текстового эквивалента графического изображения предназначен атрибут alt тега IMG, в котором вы обязаны дословно воспроизвести весь зашитый в графику текст (стр. 35).

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

Расстановка пробелов.Я заранее прошу прошения у тех, кто всегда соблюдал приведенные ниже правила, особо над ними не задумываясь, — опыт подсказывает мне, что внятно сформулировать эти правила будет все же не лишне. Итак, в русскоязычном наборе пробел обязательно ставится:

после, а не до запятой, точки, точки с запятой, двоеточия, вопросительного или восклицательного знака (и их сочетаний), многоточия в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;

до, а не после, открывающей скобки, открывающей кавычки и многоточия в начале предложения;

и до, и после длинного тире (в английском языке, наоборот, длинное тире не окружается пробелами).

Никогда не ставится пробел между скобкой или кавычкой и каким–либо другим знаком препинания, кроме длинного тире.

Неразрываемые пробелы.Значительно интереснее вопрос о расстановке не обычных, а неразрываемых пробелов. Последовательность символов интерпретируется броузером как пробел, не позволяющий разорвать в этом месте строку, и помимо применения в качестве визуальной распорки (стр. 238) должна использоваться для предотвращения неблагозвучных или затрудняющих чтение межсловных переносов. А именно, неразрываемый пробел ставится: