08. Оформление текста

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

На этой странице:

• Текстовые ссылки и цитаты (CITE, BLOCKQUOTE)
• Выделения
  • Основные выделения (EM, STRONG)
  • Выделение терминов (DFN)
  • Выделение компьютерного кода (CODE)
  • Основные рекомендации
• Изменение размера шрифта (BIG, SMALL, size)
• Авторское форматирование (PRE)
• Выравнивание
• Специальные символы
  • Кодирование символов
  • Тире и кавычки
  • Неразрывный пробел

Текстовые ссылки и цитаты (CITE, BLOCKQUOTE)

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

Большие цитаты лучше выделять из основного текста при помощи блочного элемента BLOCKQUOTE. Браузер отображает цитату с большими, чем у обычного текста, левым и правым отступами.

Выделения

Основные выделения (EM, STRONG)

Часто кроме заголовков, выделяемых с помощью блочного элемента Hn (n — уровень заголовка, цифра от 1 до 6), требуется выделить в тексте отдельные слова и фразы, чтобы подчеркнуть их значение, сконцентрировать на них внимание пользователя.

Для простого выделения в HTML зафиксирован строчный элемент EM (по умолчанию курсив). Для более сильного — строчный элемент STRONG (по умолчанию полужирное начертание).

Каждое написанное слово кажется важным. Поэтому выделить хочется всё. Но когда выделений слишком много, получается обратный эффект — внимание привлекает невыделенное место:

В этом тексте выделены все слова, кроме слова липучка. Но именно это слово и привлекает внимание!

Среди всех способов выделений самое употребительное — курсив:

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

Выделение жирностью используют для установки сильных акцентов. “Жирное” слово пользователь прочитает сразу, перед чтением всего текста, так оно бросается в глаза:

В этом тексте жирностью выделено слово магнит. Это слово притягивает внимание пользователя.

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

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

Размер заголовка играет важную роль — он задает иерархическую структуру текста и кодируется при помощи блочного элемента Hn:

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

Выделения с использованием элементов EM и STRONG — самые распространённые. Чаще используют EM, реже — STRONG.

Ниже приводятся элементы, которые можно использовать для специфических выделений.

Выделение терминов (DFN)

Для выделения терминов предусмотрен специальный строчный элемент DFN.

Браузер, как правило, показывает этот элемент на экране курсивом. Но стиль экранного образа всегда можно переопределить при помощи CSS.

Важно, чтобы в коде HTML-программы элементы использовались по их логическому и структурному назначению. Используя стилевые указания CSS, разработчик может задать собственное визуальное представление для любого элемента. Основы CSS излагаются на страницах темы 2.

Выделение компьютерного кода (CODE)

Для выделений фрагментов компьютерного кода внутри обычного текста используется строчный элемент CODE. Браузер выводит элемент на экран моноширинным шрифтом.

Основные рекомендации

Пользуйтесь выделениями в соответствии с заранее принятыми для вашего текста стилевыми соглашениями.

Старайтесь не делать в тексте слишком много выделений — текст будет лучше читаться.

Многочисленные выделения

Для выделения используют:

• шрифт;
• размер шрифта;
• цвет (не рекомендуется);
• курсив;
• жирность.

Но не всё сразу! Очень важно не “пережать” выделение, иначе оно будет “бить” по глазам читателя.

Это пример ужасного выделения.

НЕ СЛЕДУЕТ ВЫДЕЛЯТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО ФРАГМЕНТА ВЕСЬМА ЗАТРУДНИТЕЛЬНО.

Выделять цветом и (или) подчёркиванием не рекомендуется. Ведь так традиционно выделяются ссылки.

Это выделение очень похоже на ссылку.

А это практически неотличимо от ссылки.

Не надо дополнительно выделять гиперссылки.

В них уже два выделения (цвет, подчёркивание). Накладывать третье (размер), четвёртое (жирность), пятое (курсив) совсем ни к чему.

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

Ещё несколько примеров плохих выделений:

Программа, которая позволяет смотреть гипертекстовые документы, называется БРАУЗЕРОМ.	Курсив, жирность, заглавные буквы.
Программа, которая позволяет смотреть гипертекстовые документы, называется браузером.	Шрифт, размер, цвет.
Программа, которая позволяет смотреть гипертекстовые документы, называется б р а у з е р о м.	Разрядка, подчёркивание и цвет (похожие на гиперссылку).

Как выделять правильно

Самое лучшее выделение — курсив. Оно мягкое, не утомляет глаза:

Программа, которая позволяет смотреть гипертекстовые документы, называется браузером.

Если курсивное начертание кажется слишком слабым, используют повышенную жирность:

Программа, которая позволяет смотреть гипертекстовые документы, называется браузером.

При выделении текстовых фрагментов пользуйтесь следующими правилами:

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

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

Если вы решили выделять новые термины курсивом, так и делайте до конца приложения. Не переходите время от времени на жирность или цвет.

И главное: используйте для выделений элементы в соответствие с их логическим назначением:

Элемент	Назначение	Вид (по умолчанию)
CITE	Цитата	Курсив
BLOCKQUOTE	Большая цитата	Блок с отступами
DFN	Термин	Курсив
CODE	Фрагмент кода	Моноширинный шрифт
EM	Выделение	Курсив
STRONG	Сильное выделение	Жирность

Изменение размера шрифта (BIG, SMALL, size)

Выделять фрагменты текста можно изменением размера шрифта. Например, текст объявления “Попал под лошадь” выводится на экран мелким шрифтом, имитирующим нонпарель.

Строчный элемент BIG увеличивает размер шрифта по отношению к текущему, а строчный элемент SMALL — уменьшает его. Элементы могут вкладываться друг в друга, что позволяет увеличивать (или уменьшать) размер в несколько раз.

Возникает вопрос: в каком диапазоне можно изменять размер шрифта? Согласно стандарту, браузер должен поддерживать семь размерных ступеней: –2, –1, 0, +1, +2, +3, +4. (0 обозначает “нормальный” размер, т. е. размер, используемый браузером по умолчанию.)

Размер шрифта можно менять и при помощи атрибута size в теге FONT. Возможные значения атрибута показаны ниже (строки содержат равнозначные варианты):

Как уже говорилось ранее, визуальный элемент FONT, равно как и визуальный атрибут size, относятся к нерекомендаванным. Вместо визуальных элементов и визуальных атрибутов нужно использовать стилевые свойства.

Авторское форматирование (PRE)

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

Из этого правила, однако, есть исключение. Блочный элемент PRE заставляет браузер выводить текст так, как он записан в HTML-коде, — со всеми пробелами и концами строк. Это удобно использовать при отображении сложных страниц.

Начинающим дизайнерам так нравится “стабильное” поведение текста внутри элемента PRE, что они начинают везде использовать его вместо элемента P. Есть серьёзные причины не поступать так:

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

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

Выравнивание

Теги <P> и <Hn>, записанные без атрибутов, выравнивают текст по левому краю страницы (режим умолчания для языков с написанием слева направо). Можно запрограммировать вывод текста с ровным правым краем, выровнять строчки по центру, или выровнять их по ширине.

Код	Комментарий	Пример
<P>	Выравнивает по левому краю
<P align=left>	Выравнивает по левому краю
<P align=right>	Выравнивает по правому краю
<P align=center>	Выравнивает по центру
<P align=justify>	Выравнивает по ширине

Задать выравнивание можно не только для отдельного абзаца или заголовка, но и для целой группу экранных элементов, если поместить их внутрь блочного элемента DIV. В открывающем теге элемента DIV можно использовать атрибут align с теми же значениями, что и для элемента P или элемента Hn.

Приведённые далее два разных кода приводят к одному и тому же результату.

В коде, приведённом ниже, элементы на странице выравниваются по правому краю:

Выравнивание — один из китов качественного дизайна!

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

Выравнивание текста по левому краю является стандартным. Несмотря на рваный правый край, читать комфортнее, по сравнению с чтением текста выровненным справа и даже по ширине (в нешироких окнах).

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

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

К сожалению, приятное значение justify (выравнивание по ширине) тоже имеет недостатки на текстах с длинными словами (русский, немецкий язык). Браузер “не умеет” пока переносить слова по слогам, поэтому на экране при выравнивании по ширине часто образуются большие “дыры”:

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

Специальные символы

Поскольку символы “<” и “>” (угловые скобки) воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране? Ещё вопрос: можно ли вставить в текст абзаца принудительную группу пробелов (ведь браузер игнорирует лишние пропуски)?

Кодирование символов

Для этих символов, а также для некоторых других предусмотрено специальное кодирование. Код строится из символа “&” (амперсанд), фиксированного (мнемонического) имени и завершающего символа “;” (точка с запятой):

&имя;

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

&#код;

Коды некоторых символов приведены в таблице:

Все буквы, составляющие имя специального символа, должны быть строчными (т. е. маленькими). Использование таких обозначений, как &NBSP и &AMP, не допускается!

Тире и кавычки

При создании гипертекста правильно записывайте тире и кавычки. Нередко можно увидеть, как вместо тире на страницах записывают дефис, а вместо кавычек — знак дюйма.

Дефис используется как знак переноса и для соединения частей сложного слова. Тире же, наоборот, вставляет в текст как бы небольшую паузу. Это разные знаки! Тире должно быть длиннее дефиса раза в три!

Ниже показана разница между кавычками и знаком дюйма:

Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.

Код предыдущего абзаца записывается так:

Слева от тире в середине предложения ставится неразрывный 
пробел, а справа — обычный.
      

Неразрывный пробел

Пробел &nbsp; потому и называется неразрывным, что браузеру запрещается использовать его место для разрыва строки при автоматическом форматировании текста.

Вот характерные случаи использования этого символа (рекомендации Дмитрия Кирсанова):

Между инициалом и фамилией:

В многословных сокращениях:

Между знаком номера или параграфа и числом, относящимся к нему:

Между маркером пункта и текстом, следующим за ним:

Между числом и единицей измерения, относящейся к нему:

Перед тире в середине предложения (после тире идет обычный пробел):

Между классами многозначных чисел, начиная с пятизначных:

Перед номерами версий программных продуктов и частями их названий:

вверх