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

Напоминаю, все тексты этой рубрики, как должно быть понятно из ее названия - не мои. Этот цикл статей взят с Хабра.

Списки бывают упорядоченные (<ol>) и неупорядоченные (<ul>). Упорядоченные, обычно, отображаются с нумерованным арабскими цифрами маркером. Неупорядоченные могут быть с маркерами вида: закрашенный кружочек, незакрашенный кружочек, закрашенный квадратик (как вижу, так и называю) или любой другой рисунок.

Начнём, с того, что уясним, что же такое список. Проведём аналогию с рукописным текстом. Если в тексте имеется перечисление, то это можно назвать списком. Причём если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то этот список является неупорядоченным. Если же от перестановки перечисленных элементов ломается смысл, то такой список называется упорядоченным.

Отображение списка в несколько строк предназначено для более удобного и наглядного восприятия. Для списка слегка меняются правила орфографии и пунктуации, но не на столько кардинально. Знаки препинания должны ставиться так, как-будто бы этот список написан в предложении в одну строчку:

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

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

XHTML 1.0 запрещает использование списков внутри абзаца (<p>). На мой взгляд, это является нелогичным. В упомянутых примерах списки относятся к абзацам с началом текста. Если бы список был самостоятельной логической единицей текста, то его логично отделять от абзацев. Но он может быть также продолжением предложения. Для обозначения визуального отношения списка к абзацу следует использовать отрицательные отступы сверху, чтобы убрать лишний отступ от абзаца.

Следует подумать и решить, какой из списков будет чаще использоваться. Самостоятельный или как продолжение предложения? В результате мозгоштурма у вас в CSS-файле появится один из классов: standalone или relative (можно назвать и по-другому, не возбраняется). Соответственно, если элемент <ul> будет использоваться для списков относящихся к предложению, то для класса standalone следует убрать сверху отрицательный отступ. Или наоборот.

Заметьте, отступы мы поставили одинаковые, что сверху, что снизу, а визуально список чуть ближе к нижнему абзацу. Всё из-за того, что маркеры списков вертикально центрированы по строчным буквам. Кроме того, близость к следующему абзацу добавляет подчёркивание, если в списке присутствуют ссылки. Исправить ситуацию можно добавив снизу расстояние в два—три пикселя.

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

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

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

Статьи по теме:

• Дизайн текста: часть четвертая
• Дизайн текста: часть пятая
• Дизайн текста: часть вторая
• Дизайн текста: часть первая
• Требования к контенту