Re: Outline Numbered Lists

On Wed, Jun 17, 2009 at 6:37 PM, Dylan Just<dylan.just@ephox.com> wrote:
> 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.

As Giovanni suggested, you can used <style scoped>, defined in HTML5,
relatively soon.  I don't know which browsers, if any, support it yet,
but it'll appear at least as quickly as a few new properties for a
list-style.

Alternately, just make sure that the component being editted is
wrapped in a <div> with a suitably unique ID (perhaps using a guid),
then just insert a normal <style> and preface all your rules with that
#id to manually scope them.  That will work interoperably today.

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

As noted, this isn't necessary if you use a <style> block properly.

> - We'd have to put "display:block" on each ol - I'm not even really sure
> why this is required.

As Giovanni notes, it's there to prevent generation of ::marker, as
not everyone supports it yet.  display:block and ::before have greater
interop at the moment.  In time you'll be able to drop the li rule
entirely and just use the ol and li::marker rules.

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

Yup, you can't.  So you just have to use a <style> properly.

> We'd have to tell customers to manually add in this outline list style.

Perhaps.  I don't know how your tool works.  Can't you just make this
one of the choosable options?  There's no reason for the users of your
tool to know the internals behind the list display.

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

If you want them to automatically inherit, then add a "ol.outline ol"
selector to each of those three blocks (I notice that Giovanni also
noted this).  That means, though, that you'll probably need to mark
all your non-outline lists specially to shut down the production of
the outline counter.

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

True, but most of your problems seem to arise from implementation
issues on your end, not a failing of CSS.  The difference is pretty
small, and shouldn't require your users to understand that a
difference even exists.

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

You should be able to present an identical interface to your users
with the existing CSS abilities.

~TJ

Received on Thursday, 18 June 2009 16:37:02 UTC