CSS3 и "угловая, ступенчатая" структура списка

[kvesda]

Помогите, пожалуйста, с помощью CSS3 свойств сделать список углового, ступенчатого вида (одноименные элементы должны располагаться один под другим):

a. A

b. B

c. C

     d. D

c. C

b. B

a. A

Я так понимаю, что здесь будут участвовать 3 списка:

1. Список из 3-х элементов, нумерация от "a" до "c".

2. Список из одного элемента "d".

3. Список из 3-х элементов с обратной нумерацией от "c" до "a".

Обратную нумерацию могу для 3-го Списка сделать с помощью "counter-reset: reverse 4" и "counter-increment: reverse -1". Но КАК расположить ступеньками элементы всех этих 3-х списков?

[Softlink]

Я так делал http://jsfiddle.net/Softlink/NCTQg/

p.s. любопытно посмотреть на "нумерацию" из букв

[Cryolite]

Немного топорно, но можно так... http://jsfiddle.net/bk4Kr/1/

Edited January 11, 2013 by Cryolite

[kvesda]

Я так делал http://jsfiddle.net/Softlink/NCTQg/

Немного топорно, но можно так... http://jsfiddle.net/bk4Kr/1/

Спасибо, после выходных посмотрю...

p.s. любопытно посмотреть на "нумерацию" из букв

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

Т.е., фраза "a" синонимично параллельна фразе "a' ", фраза "b" - фразе "b' " и т.д. А самое главное, ради чего такой произведение составлялось как хиазм "находится" как раз посередине. Все остальное поясняет это...

Это - лирическое отступление от главное темы

Спасибо за помощь. Буду рад еще вариантам программирования таких структур с помощью css.

Посмотрю после выходных.

[kvesda]

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

Вот полная структура списка:

a. A

b. B

c. C

d. D

c'. C'

b'. B'

a'. A'

Спасибо, есть от чего оттолкнуться. Если у кого еще есть какие варианты - буду благодарен.

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

В любом случае - спасибо всем, кто отозвался и еще откликнется.

[Cryolite]

А ступенька всегда состоит из одного элемента?

http://jsfiddle.net/bk4Kr/2/

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

Edited January 14, 2013 by Cryolite

[kvesda]

А ступенька всегда состоит из одного элемента?

http://jsfiddle.net/bk4Kr/2/

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

Да, ступенька всегда состоит только из одного элемента.

Я посмотрел результат вашего кода - это именно тио, что нужно! Спасбо!

Сейчас буду смотреть ваш код.