RE: Outline Numbered Lists

> It's already included in CSS 2.1... The relevant part of the standard
is
> http://www.w3.org/TR/CSS21/generate.html#counters

Counters are a great general solution and very flexible, but I think
they're over-complicated for this common list type. A new
list-style-type value or list-style-outline:outline would be much
simpler for someone to code by hand, and easier for us to set in a
wysiwyg editor. 

Compare:
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") " "; counter-increment: item
}

To
ol { list-style-type:outline-numbered; }

or
ol { list-style-outline:outline; }


Our product is a wysiwyg editing component for CMSs, and we usually have
to put formatting in inline styles, rather than in a stylesheet, which
we usually don't have control over. As such, we set list types as, e.g.
<ol style="list-style-type:decimal">, based on what the user selected in
a dialog. This is not easy to do for the outline-numbered counters
solution.

If we were to apply counters with inline styles, going on the above CSS:
- We'd have to put "counter-reset: item" on each ol in that style. This
introduces complications in adding nested lists and list items.
- We'd have to put "display:block" on each ol - I'm not even really sure
why this is required. 
- Then there's the issue of the "li:before" - I'm not aware of a way to
add pseudo-class styles inline.

So, this means we'd have to add to the stylesheet, which is problematic
for us, but let's roll with it for a minute.

We'd have to tell customers to manually add in this outline list style.
Ideally, this style would be applied like this: <ol class="outline">.
So, then, what would the stylesheet entry be?

ol.outline { counter-reset: item }
ol.outline li { display: block }
ol.outline li:before { content: counters(item, ".") " ";
counter-increment: item }

The only problem with this is inheritance (maybe i'm doing something
wrong?). I have to add the class="outline" to each <ol> in the nested
list (tested in Firefox 3). Again, this is do-able, but it's just one
more complication. 

With the new list-style-type value or list-style-outline:outline
suggestion, all we'd have to do is change one css attribute on the <ol>.


For the list-style-type, we'd add an "outline numbered" option to our
list type dialog. For the list-style-outline, we'd add an "outline"
checkbox to the dialog. The editing model and the resultant content is
very simple.

Received on Wednesday, 17 June 2009 23:38:13 UTC