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

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

WHEN ALL ELSE FAILS

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

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

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

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

ПРАВИЛА НАБОРА ТЕКСТОВ

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

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

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

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

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

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

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

• между двумя инициалами и между инициалами и фамилией: Д. Б. Кирсанов;

• между сокращенными обращениями и фамилией: г-н Кирсанов, а также после географических сокращений типа г. Москва или o-в Крым;

• между знаками номера (№) и параграфа (§) и относящимися к ним числами;

• внутри сокращений «и т. д.», «и т. п.», «т. е.», «ж. д.» и им подобных (хотя английские «e. g.» и «i. e.» пробелами обычно не разделяются);

• между внутритекстовыми пунктами, такими как «а)», «б)» или «I.», «2.», и следующим за ними текстом;

• между числами и относящимися к ним единицами измерения: 200 кг; это же относится и к указаниям дат: XVIII в., 1998 г.;

• перед длинным тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон — неразрываемым слева и обычным справа);

• между классами многозначных чисел, начиная с пятизначных: 1 302 569;

• перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений: Windows 3.1, Windows 95, Windows  NT;

• после однобуквенных предлогов и союзов, особенно в начале предложения или в заголовке.

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

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

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

• знаки препинания, следующие за выделенным фрагментом, должны быть набраны основным начертанием.

Спецсимволы. Отсутствующие непосредственно на клавиатуре символы — постоянный источник неприятностей для веб–дизайнеров. В стандартной для HTML кодировке Latin‑1 (стр. 17) просто нет некоторых позарез нужных для набора даже английского текста символов, а до универсальной поддержки Unicode во всех документах, броузерах, шрифтах и операционных системах пока еще очень далеко. И уж конечно, ничуть не лучше дела обстоят в мире кириллицы с ее многочисленными несовместимыми друг с другом кодировками.

Первым приходящий в голову способ вызвать нужный в тексте, но отсутствующий на клавиатуре символ — посмотреть его номер в каком–нибудь шрифте и сослаться на него из HTML с помощью числовой подстановки (например, написав &#1б 9; для вызова символа копирайта, стр.29). Однако этот метод очень ненадежен — он полагается, во–первых, на то, что у всех шрифтов на всех платформах этот символ расположен в одной и той же позиции (что далеко не всегда соответствует действительности), а во–вторых, на то, что броузер будет интерпретировать код именно как номер символа в текущем шрифте (что, вообще говоря, противоречит стандарту). Поэтому гораздо предпочтительней пользоваться мнемоническими подстановками (например, &сору; для того же символа копирайта). Однако несовершенство броузеров и сложившаяся (так и хочется сказать «порочная») практика русификации HTML-документов накладывает серьезные ограничения и на этот способ.