Re: [css3-lists] [css3-speech] Interaction between list-style-type and speak properties

On Sun, May 1, 2011 at 3:53 PM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> Tab Atkins Jr.:
>> <ol>
>>   <li><span class=marker>A.</span> foo
>>   <li><span class=marker>B.</span> bar
>> </ol>
>>
>> .marker { display: marker; }
>> ol { list-style-type: inline; }
>
> Should this or something like it work, too?
>
>  <ol>
>    <li value="A."> foo
>    <li value="B."> bar
>  </ol>
>
>  li[value]::before {content: attr(value); display: marker; }
>  ol { list-style-type: inline; }

To expand on what I said, please don't do this.  It's unnecessary
complicated for no reason, as far as I can tell.  If you need the
marker to be part of the content, so it's robust against CSS failure,
do this:

<ol>
 <li><span>A.</span> foo
 <li><span>B.</span> bar
</ol>
<style>
ol { list-style: none; list-style: inline inside; }
li > span { display: marker; }
</style>

This is robust against CSS failure (you'll just get both a number and
an inline marker), and against a reasonable set of non-supporting
browsers.  You can also use a different list-style-position value and
emulate it by positioning the span, if you don't want "inside".

If the marker doesn't have to be part of the content, just do this:

<ol>
 <li>foo
 <li>bar
</ol>
<style>
ol { list-style: upper-alpha; list-style: my-counter; }
</style>

This is similarly robust.  In the case of CSS failure, the <ol> will
render as 'decimal' (the default).  In the case of non-supporting
browsers, it'll get upper-alpha, which I'm assuming is the closest 2.1
equivalent to your style.  In supporting browsers, you get exactly
what you want.

~TJ

Received on Monday, 2 May 2011 20:16:20 UTC