Правила вёрстки текста для сайта

Новиков М.Г.
13.03.2004

Слава Кпсс — это вовсе не человек,
А Карл, Маркс, Фридрих и Энгельс — это 2 разных человека, а не 4.
(Из анекдота про чукчу)

Содержание:

Вступление

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

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

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

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

По причине вышеизложенного, возможность строго следовать требованиям ГОСТа в Интернете отсутствует. Поэтому здесь сложилось несколько разных традиций верстки, каждая из которых по-своему стремится приблизиться к истине. О наиболее логичной из них я расскажу в этой статье.

[Вернуться в начало]

Правила верстки текстов, предназначенных для публикации в Интернете.

Существует 2 основных вида интернет-верстки.

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

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

В этой статье будет излагается второй вариант, адаптированный к шрифтам «Arial», «Times New Roman» и к большинству других распространенных компьютерных шрифтов.

[Вернуться в начало]

Дефис, тире, короткое тире и минус — это 4 разных знака!

Дефис (-) [код 002D], единственный из знаков описываемой группы, имеющийся на клавиатуре] от разделяемых слов или частей слов пробелами не отбивается. Применяется: для соединения составных конструкций (далеко-далеко, фабрика-кухня, два-три раза, встретили хлебом-солью, Наро-Фоминск, во-первых, из-за, 20-го числа, БЭСМ-6 и т.д.); в сокращениях (г-жа); в сжатых перечислениях (аудио- и видеопродукция); в качестве разделителя цифр телефонных номеров; в качестве принудительного знака переноса.

Тире (—) [код 2014] отбивается пробелами с обеих сторон. Если тире стоит в начале абзаца (прямая речь), оно отбивается только неразрывным пробелом справа. Применяется: для разделения предложения на две синтаксические группы (Москва — крупный город); для выделения в составе предложения слов, вставляемых для уточнения или пояснения его содержания (Другое устройство — концентратор — я разместил на стене); в обозначении прямой речи; при описании диапазонов значений, если цифры использовались вместе со словами (1941 г. — 1945 г.); в значении «от — до» (Москва — Одесса).

Короткое тире (–) [код 2013] пробелами не отбивается. В традиционной типографике не используется. В интернет-верстке применяется для описания диапазонов значений, использующихся без слов (1941–1945, 2F79–C4DA, а–я), ибо при применении обычного тире такие диапазоны становятся трудно воспринимаемыми.

Минус (−) [код 2212] применяется для обозначения математических действий (вычитание, декремент), а также для обозначения отрицательных чисел. По правилам, минус, как и другие подобные математические знаки, пробелами не отбивается, однако в случае написания исходного кода программы в целях повышения удобочитаемости это делать просто необходимо. (В этом случае следует отбивать и все остальные математические знаки.)

[Вернуться в начало]

Правила расстановки пробелов

Пробелы бывают двух видов — обычные и неразрывные.

Обычные пробелы [код 0020] доступны с клавиатуры и ставятся:

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

Неразрывный пробел [код 00A0] ставится там, где нельзя изменять расстояние между словами при выравнивании текста по ширине и переносить слово на новую строку:

  • После тире, если оно стоит в начале абзаца (чтобы заглавные буквы первых слов располагались на одной прямой).
  • Между инициалами и фамилией (В.В. Иванов).
  • Между сокращением и относящимся к нему словом (г. Москва).
  • После знаков «№», «§» (№ 12, § 124).
  • Между числом и размерностью (25 кВт).
  • Между тройными группами разрядов числа, начиная с пятизначных чисел (25 000).
  • В списках между номером (маркером) списка и первым словом.

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

Пробелы не ставятся:

  • Перед знаками препинания (точка, запятая, двоеточие, точка с запятой, многоточие, вопросительный знак, восклицательный знак).
  • Перед знаками %, °, показателем степени (2), подстрочным индексом (2).
  • Между целой и дробной частью числа 157, 0,17.
  • После открывающей и перед закрывающей скобками.
  • После открывающей и перед закрывающей кавычками.
  • В сокращениях типа «и т.д., и т.п.» (где используется два и более однобуквенных сокращения), в том числе и между инициалами.

В последнем пункте использование пробела даже фиксированной ширины неоправданно далеко разносит отдельно стоящие буквы.

[Вернуться в начало]

Правила переноса целых слов на новую строку

  • Однобуквенные слова, с которых начинается предложение, не должны стоять в конце строки.
  • Тире, стоящее в середине предложения, не должно стоять в начале строки.
  • Не должны разрываться конструкции, описанные в разделе о неразрывном пробеле.

Для связки разных элементов предложения в неразрывную конструкцию есть два способа. Можно использовать неразрывный пробел, если расстояние между элементами предложения не должно изменяться при выключке текста по ширине (см. раздел о неразрывных пробелах). В остальных случаях лучше использовать теги <nobr></nobr>, хотя они и не документированы стандартом HTML. Можно применить и стандартизированный приём — создать стиль:

.nobr {white-space: nowrap;}

и применять его к нужному фрагменту текста:

<span class="nobr">это неразрывная конструкция</span> 

[Вернуться в начало]

Правила расстановки точек и запятых

Точка не ставится:

  • После заголовков и подзаголовков, отделенных от основного текста.
  • После подписей к рисункам и таблицам.
  • В конце колонтитулов.
  • После сокращений, обозначающих систему мер: кг, м, см, мкм, кг, г, кВт и т.п.
  • В сокращенных обозначениях, использующих знак «/» (тел/факс, б/у).

Запятые и точки ставятся после скобок. (Исключение составляет случай, когда в скобки заключено всё предложение, но я не рекомендую его использовать по причине его неблаговидности.) Если точка стоит до скобки, то после скобки точка уже не ставится.

[Вернуться в начало]

Правила использования кавычек

В русской типографике используется 2 вида кавычек. Основные — это «елочки» [коды 00AB и 00BB], а для кавычек внутри кавычек используют „лапки“ [коды 201E и 201C]. Других видов кавычек в русском языке не существует. Единственное исключение — исходные тексты программ и другие подобные структуры, которые публикуются в том виде, в котором они существуют в оригинале. Как правило, такие тексты заключаются в теги <pre></pre>, что позволяет отобразить их один к одному в том виде, в котором они находятся в тексте HTML.

При выделении всего содержимого кавычек (например, другим цветом), выделяются и сами кавычки (в отличие от скобок, которые в этом случае не выделяются). При написании названия фирмы, кавычки чаще всего расставляются следующим образом: ОАО «ЦНИТИ «Техномаш». Согласно правилам русской типографики, в последнем случае предпочтительнее использовать следующую форму: ОАО «ЦНИТИ „Техномаш“». Но в таких распространённых шрифтах, как Verdana и Tahoma закрывающая русская кавычка нарисована неправильно, что вы и можете наблюдать выше. Поэтому использование „лапок“ должно соотноситься с применяемым шрифтом.

Кавычками выделяются:

  1. Цитаты.
  2. Слова, употребляемые не в своем обычном значении; слова, употребляемые иронически; слова, впервые предлагаемые или, наоборот, устарелые и необычные и т.п.
  3. Кавычками выделяются названия литературных произведений, газет, журналов, предприятий, пароходов и т.п., являющиеся условными наименованиями, например: «Капитал» Маркса; «Война и мир»; газета «Правда»; колхоз «Путь к коммунизму»; шахта «Мария»; линкор «Парижская коммуна».

Кавычками не выделяются названия, в состав которых входят слова «имени…», «памяти…», например:

Государственный академический театр драмы имени А. С. Пушкина.
Больница памяти 26 комиссаров.

[Вернуться в начало]

Еще несколько правил

Русский формат даты — «15.10.1970». Дни недели пишутся со строчной буквы.

Русский формат времени — «15:32:45»

Дробная часть числа в русском тексте отделяется запятой, а не точкой («3,14», а не «3.14»).

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

[Вернуться в начало]

Полезные ссылки:

Русский язык. Портал Грамота.ру.
Словари, правила, бесплатная справочная служба русского языка:

http://www.gramota.ru/

Русские правила постановки тире изложены здесь:

http://rus.1september.ru/article.php?ID=200202402