Re: Outline Numbered Lists

2009/6/18 Dylan Just <dylan.just@ephox.com>:
>> 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; }

When using tool, only the tool developers have to deal with CSS
complexities, general authors just click a few buttons

>
> 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..

You could output a style fragment as a scoped style element inside the
main container (see the HTML5 redefinition of style element), or you
could output the stylesheet in a CMS specific data structure. This is
an implementation issue, I guess.

> 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
I don't see how... "counter-reset" is especially for nested lists

> - We'd have to put "display:block" on each ol - I'm not even really sure
> why this is required
Actually, there are two ways to go:
- keep "display:list-item" (the default for <li>) and use "::marker"
instead of "::before" (two colons for pseudo-elements!)
- use "display:block", preventing the generation of "::marker" pseudo-element
using "display:list-item" sets ::marker to "content:
counter(listitem,<value of list-style-type>)", so it would be rendered
twice if ::before is also used

> - Then there's the issue of the "li:before" - I'm not aware of a way to
> add pseudo-class styles inline.

You cannot.

> 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.

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

> 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>.

Changing "style" or changing "class" is not that different


Giovanni

Received on Thursday, 18 June 2009 14:27:50 UTC