Дизайн текста 3: Списки
Списки бывают упорядоченные (<ol>) и неупорядоченные (<ul>). Упорядоченные, обычно, отображаются с нумерованным арабскими цифрами маркером. Неупорядоченные могут быть с маркерами вида: закрашенный кружочек, незакрашенный кружочек, закрашенный квадратик (как вижу, так и называю) или любой другой рисунок.
Начнём, с того, что уясним, что же такое список. Проведём аналогию с рукописным текстом. Если в тексте имеется перечисление, то это можно назвать списком. Причём если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то этот список является неупорядоченным. Если же от перестановки перечисленных элементов ломается смысл, то такой список называется упорядоченным.
Отображение списка в несколько строк предназначено для более удобного и наглядного восприятия. Для списка слегка меняются правила орфографии и пунктуации, но не на столько кардинально. Знаки препинания должны ставиться так, как-будто бы этот список написан в предложении в одну строчку:
Отступ от левого края текстового блока до маркера лучше всего задать немного большим, чем высота строки. Отступ от маркера до текста в списке можно оставить по-умолчанию, а можно слегка увеличить.
Упорядоченный список больше подходит для текста технической направленности. Но можно и художественный текст представить в виде упорядоченного списка, только придётся его привести к более строгому виду.
XHTML 1.0 запрещает использование списков внутри абзаца (<p>). На мой взгляд, это является нелогичным. В упомянутых примерах списки относятся к абзацам с началом текста. Если бы список был самостоятельной логической единицей текста, то его логично отделять от абзацев. Но он может быть также продолжением предложения. Для обозначения визуального отношения списка к абзацу следует использовать отрицательные отступы сверху, чтобы убрать лишний отступ от абзаца.
Следует подумать и решить, какой из списков будет чаще использоваться. Самостоятельный или как продолжение предложения? В результате мозгоштурма у вас в CSS-файле появится один из классов: standalone или relative (можно назвать и по-другому, не возбраняется). Соответственно, если элемент <ul> будет использоваться для списков относящихся к предложению, то для класса standalone следует убрать сверху отрицательный отступ. Или наоборот.
Заметьте, отступы мы поставили одинаковые, что сверху, что снизу, а визуально список чуть ближе к нижнему абзацу. Всё из-за того, что маркеры списков вертикально центрированы по строчным буквам. Кроме того, близость к следующему абзацу добавляет подчёркивание, если в списке присутствуют ссылки. Исправить ситуацию можно добавив снизу расстояние в два—три пикселя.
С упорядоченными списками дело обстоит лучше, поскольку в качестве маркеров используются цифры, высота которых, как правило, равна высоте прописной буквы.
Но, опять же, при использовании ссылок в списке, получаем визуальный сдвиг вниз на пару пикселей. Так что, для упорядоченных списков тоже можно добавить снизу такое же расстояние.
Казалось бы, какие мелочи! А эти мелочи, всё равно чувствуются. В ряде однотипных элементов сдвиньте один из них хоть на пиксель — пользователь может и не увидит, но почувствует дискомфорт. Человеческий глаз на много чувствительней, чем вы думаете. Небольшой дисбаланс в общем ровном ряду элементов раздражает глаз и заставляет обращать на него внимание. В большинстве случаев, это выглядит не как контраст, а как небрежность.
]]>Артём Курапов]]>Меня больше интересует как можно легко стилизовать булеты для внутренних элементов (list-style-image) – я
»ul li li li не работает
]]>Sam]]>Списки бывают не только упорядоченные и неупорядоченные. Есть ещё dl.
»]]>Никита]]>Sam, как ни странно, я это знаю.
Ещё успею об этом написать.
»]]>Алик Кириллович]]>Списки лучше называть не “упорядоченный” и “неупорядоченный”, а “нумерованный” и “маркированный”. Такая терминология, в частности, используется в офисных пакетах, например MS Office или OpenOffice.org
Дело в том, что нумерованные списки используют также и тогда, когда важен не ПОРЯДОК элементов, а их КОЛИЧЕСТВО.
Например, список “Океаны Земли”:
»1. Атлантический океан
2. Индийский океан
3. Северный Ледовитый океан
4. Тихий океан
5. Южный Ледовитый океан
сделали нумерованным, чтобы подчеркнуть, что океанов на Земле именно ПЯТЬ.
]]>Lev]]>спасибо за подсказки
»]]>Никита]]>Алик Кириллович, упомянутая мною терминология — дословный перевод (ordered list, unordered list). Насчёт количества элементов я не подумал, действительно удобно. Но первоочерёдное назначение упорядоченных списков — собственно порядок. А упомянутое вами свойство уже побочный эффект.
Если список связан с номерами параграфов описывающих каждый элемент списка, то в этом случае необходима нумерация. Если нужно просто перечислить, как в вашем примере, названия океанов, то можно написать так:
Земной шар насчитывает пять океанов:
»* Атлантический океан
* Индийский океан
* Северный Ледовитый океан
* Тихий океан
* Южный Ледовитый океан
]]>Дмитрий Пленкин]]>Артём Курапов, list-style-image нужно задавать для ul, а не li. Т.е. будет что-то типа:
ul ul ul {list-style-image: url(/img/my_cool_marker.png)}
Но вообще, я давно отошел от практики использования list-style-image, т.к. маркер невозможно позиционировать по-человечески. И каждый браузер норовит его по-своему разместить. Поэтому рекомендую для подобных целей использовать background-image.
Никита, вот, кстати, и тема образовалась для еще одной заметки
»]]>Никита]]>У меня уже в драфте пост об этом лежит
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Дизайн текста 3.5: Вложенные списки, маркеры, списки терминов]]>[...] В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в CSS была добавлена строка «margin: -16px 0 16px 0;» для элемента ul. Теперь, для внутренних списков нужно убрать этот отрицательный отступ: ul ul { margin: 0; } [...]
»]]>Обзор №5, Март — Апрель 2008 | 0995]]>[...] Дизайн текста 3: СпискиДизайн текста 3.5: Вложенные списки, графические маркерыПара содержательных постов о тонкостях оформлении списков в HTML. [...]
»]]>Обзор №5, Март — Апрель 2008 – Design For Masters]]>[...] Дизайн текста 3: Списки Дизайн текста 3.5: Вложенные списки, графические маркеры Пара содержательных постов о тонкостях оформлении списков в HTML. [...]
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Дизайн текста 2: Цитаты]]>[...] Продолжение: Списки Дата: 20.03.2008 » Комментарии (10) Категории: CSS | Usability | Web‑дизайн | xhtml/xml | Типографика Поместить пост в закладки » [...]
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Дизайн текста 3.5: Вложенные списки, графические маркеры]]>[...] В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в CSS была добавлена строка «margin: -16px 0 16px 0;» для элемента ul. Теперь, для внутренних списков нужно убрать этот отрицательный отступ: ul ul { margin: 0; } [...]
»