Текстовые выделения

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

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

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

Спецсимволы

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

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

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

• Длинное тире (англ. em dash) как знак препинания не имеет ничего общего с дефисом (hyphen) — в идеале оно должно выглядеть именно так, как в этом предложении. Из кодировок кириллицы (стр. 16) длинное тире есть только у Unicode, CP1251 и кодировки Макинтоша, поэтому им нельзя пользоваться в текстах, автоматически перекодируемых из/в КОИ8 или СР866. Хотя в Windows почти все шрифты (как с кириллицей, так и без) имеют длинное тире по адресу 151 (шестнадцатеричное 97), пользоваться им на законных основаниях нельзя и в английских текстах — в официально предписанной для HTML кодировке Latin-1 (как и в Unicode) это знакоместо объявлено «неиспользуемым» (стр. 17). Увы, пока что единственный стопроцентно надежный способ воспроизвести длинное тире в HTML-тексте — набрать два или три дефиса подряд: -- или ---.

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

• То же самое можно сказать и о коротком тире (англ. еп dash). В русской типографской традиции этого символа не было, но в английском наборе им принято пользо­ваться для численных интервалов, например: 1998-2000 (короткое тире не только чуть короче длинного, но и приподнято над строкой до середины высоты ци­фровых символов). В Windows большинство шрифтов имеют этот символ по адресу 150 (шестнадцатеричное 96); в HTML, однако, его приходится опять-таки имити­ровать одиночным или двойным дефисом. Надо сказать, что в HTML 4 уже предусмотрены символь­ные коды — и – для длинного и короткого тире соответственно. Однако ссылаются они на кодо­вые позиции этих символов в Unicode — и увы, ни MSIE, ни NC в четвертых версиях еще и не думают эти коды поддерживать (хотя MSIE понимает их числовые Unicode-подстановки — и –).

• Кавычки — тема, заслуживающая отдельной книги. Всего существует четыре типа кавычек: «французские» (иначе называемые «елочки»), „немецкие" („лапки"), "англий­ские обычные, или двойные," и 'английские одинарные.' В русском языке традиционно применяются француз­ские «елочки», а для «кавычек „внутри" кавычек» — немецкие „лапки". В английском языке пользуются "английскими двойными" для кавычек первого уровня и 'английскими одинарными' для "кавычек 'внутри' ка­вычек." Соответственно, английские кавычки в русском тексте, так же как и обозначение дюйма " вместо по­лагающихся кавычек в английском тексте, — следствие либо каких-то технических ограничений при наборе, либо (увы, чаще) необразованности того, кто этот текст оформлял.

К сожалению, в HTML вам вряд ли удастся щегольнуть знанием всех кавычечных тонкостей. В Latin-1 предусмо­трены только французские «елочки», для вызова которых стандартный HTML имеет мнемонические подстановки « и ». Однако на практике этими кодами нельзя пользоваться именно там, где они больше всего нужны, — в русском языке: из всех кодировок кирилли­цы «лапки» есть только в Unicode, CP1251 и в кодировке Макинтоша. И хотя в теории броузер обязан относить мнемонические подстановки к набору символов язы­ка HTML (т. е. Latin-1), а не к текущей кодировке документа, на практике мысль украсить русский текст «елочками» можно оставить до тех пор, пока все бро­узеры не научатся правильно разбираться с кодировками и мнемоническими подстановками.

Еще печальнее ситуация с немецкими и английскими кавычками. Их нет даже в Latin-1, и надеяться оста­ется лишь на Unicode, — точнее, на ссылающиеся на символы Unicode подстановки „ („), “ ("), ” ("), ‘ (') и ’ ('). Эти символьные коды введены в HTML 4, но еще не поддерживаются графическими броузерами.

Кстати, имейте в виду, что в английском языке точки и запятые при­нято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: "так," а не "так".

• Сравнительно неплохо обстоят дела с символами автор­ского права (©) и параграфа (§) — они есть и в Latin-1, и в большинстве шрифтов (как с кириллицей, так и без). Для их вызова из HTML можно пользоваться

символьными кодами &сору; и &sect; соответственно. Напротив, символ торговой марки (™), также присут­ствующий в большинстве шрифтов, в Latin-1 отсут­ствует, так что вместо &trade; предпочтительнее писать <SUP><SMALL>tm</SMALL></SUP>.

• Знак номера (№) был заимствован в русский язык из французского, так что в нерусифицированных шрифтах (чей набор символов ориентирован больше на англо­язычную типографию) он отсутствует. (В Unicode он есть, но символьного кода в HTML 4 для него не предусмотрено.) Тем не менее символ этот присутствует во всех кодировках русского языка, и если вы ориенти­руетесь только на русскоязычную аудиторию и при этом вполне уверены в способности автоматического переко­дировщика на вашем сервере правильно обрабатывать этот символ, им можно пользоваться просто как буквой (т. е. вставлять его в текст напрямую, без каких бы то ни было конструкций языка HTML).

Позиционирование

Последний

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

Эстетические принципы построения композиции, показы­вающие зависимость восприятия элемента и его отношений с другими элементами от положения на странице, — иными словами, ответы на вопрос «почему» — были предметом гл. II. Здесь нам остается ответить на вопрос «как», поль­зуясь техническими сведениями, которые вы почерпнули из гл. I (и, вероятно, из вашего личного опыта). Сле­дующая же глава будет целиком посвящена внутреннему устройству графических элементов, имеющих множество своих собственных технических «как» и эстетических «по­чему».

Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измере­ниям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользовать­ся графикой). Характерно, что дизайнер Дэвид Сигель (www.dsiegel.com) — вероятно, самый известный из популяризаторов визуального подхода к веб-дизайну — прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF'a (стр. 237).

Таблицы и распорки

Простейший механизм размещения мате­риала, доступный в обоих визуальных броузерах (в Netscape начиная с версии 2 и в MSIE с версии 3), — это ис­пользование таблиц, чаще всего не имеющих разлиновки и фоновой заливки ячеек и потому невидимых (видимо только их содержание, единственно ради позиционирова­ния которого и вводится таблица). Прием этот позволяет регулировать расстояния между элементами с точностью до пиксела, что является важнейшим — хотя и практически единственным — достоинством этой технологии.

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

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

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

поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, вы начнете следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что броузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь <NOBR>... </NOBR>.

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