Старый добрый DL

Автор статьи: Азат Разетдинов

Как-то понадобилось мне сверстать список, в котором элементами нумерации являлись буквы русского алфавита. Следует заметить, что обычными средствами такое чудо не только в HTML, но даже в вездесущем Word’е сотворить не удаётся. И если в последнем всё решает табуляция с ручной расстановкой буковок, то в HTML, на первый взгляд, без таблицы не обойтись.

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

<DL>
<DT>Наборщик <DD>Человек, который любити уважает текст.
<DT>Дизайнер <DD>Человек, который любити уважает глаза.
</DL>

Имеем:

Расположение, мягко говоря, не самое удачное. Лучше бы определение dd находилось справа от термина dt, а не под ним. По-моему, именно из-за этой мелочи тэг dl почти не используется на страницах.

Впрочем, существует атрибут compact, который, по спецификации, «намекает браузеру, что данный список надо бы отрендерить покомпактнее», а как — уж его, браузера, собачье дело. IE в данном случае, как нам и хотелось, располагает определения справа от терминов. Правда, при условии, что длина dt не превышает трёх-четырёх символов. Для имитации буквенного списка это, безусловно, годится, однако ни NN, ни Opera атрибут compact не понимают. Винить их не в чем, так как в спецификации HTML 4 он уже числится устаревшим.

Затею пришлось оставить. Снова ходил я понурый, пока в голову не пришла светлая идея подключить CSS. Что нам мешает в качестве значения margin-top тэга dd указать отрицательное значение?

DD {margin-top: -1.1em}

Величина margin-top должна быть противоположной значению line-height (по умолчанию равному 1.1em) и указываться в относительных единицах. В таком случае dd будет на одной линии с dt даже при изменении размера шрифта в IE и N6 или масштаба в Opera. Слава те господи, все три браузера одинаково рендерят такое чудо:

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

Создание настоящего списка определений потребует регулирования «табуляции», то бишь свойства margin-left тэга dd (если заметили, значение по умолчанию 2.5em великовато для буквенного списка). С этой целью я добавил в таблицу стилей следующие строки:

DD {margin-left: 2em; margin-top: -1.1em}
DL.r DD {margin-left: 4em}
DL.ri DD{margin-left: 6em}
DL.rig DD {margin-left: 8em}
DL.righ DD {margin-left:10em}
DL.right DD {margin-left: 12em}

Перечисленных видов списков хватает на все случаи жизни:

<DL class=ri>
<DT>Наборщик <DD>Человек, который любити уважает текст.
<DT>Дизайнер <DD>Человек, который любити уважает глаза.
</DL>

Вуаля:

Да здравствует старый добрый DL!

Автор статьи: Азат Разетдинов

Примечание автора сайта. Прошу обратить внимание, что IE5.x неправильно (в отличие от IE6, NN6 и даже Opera) отображает задуманное Азатом именно на моём сайте. Дело в том, что CSS стили, указанные в статье пересекаются со стилями, заданними на сайте. Я пытался разрешить проблему, но пока не удалось… :-/.

UPDATE 23.11.2002 (Азат). Замеченные баги:

1. В IE 5.x теги dt таинственным образом исчезают. Происходит это в том случае, когда в CSS-свойстве background-color какого-нибудь родительского элемента указан определённый цвет (по умолчанию присвоено значение transparent), что делает все дочерние тэги непрозрачными. Указание background-color: transparent для промежуточного родителя не решает проблемы. Что примечательно, изменение фонового цвета средствами HTML (то бишь с помощью атрибута bgcolor) ни влияет на отображение тэгов dt. Это и является решением проблемы.
2. В Opera ссылки в первых строках тэгов dd не работают: отображаются, но не нажимаются. После ряда экспериментов было выяснено, что «фантом» тэга dt перекрывает область справа от него и забирает себе любые события (в т. ч. click). Проблема решается указанием соответствующей ширины для тэгов dt:
   
   DT {width: 2em}
DL.r DT {width: 4em}
DL.ri DT {width: 6em}
DL.rig DT {width: 8em}
DL.righ DT {width: 10em}
DL.right DT {width: 12em}