Stylesheets - lower-alpha with a twist. Help please.

Author

lower-alpha with a twist. Help please.

Jean-François Michaud

2007-07-16, 6:19 pm

Hello,

We have a requirements of being able to produce enumerators that range
from a-zz.

>From what I understand, the lower-alpha facility that's permited under
CSS, doesn't allow control over how lower-alpha behaves other than
specifying this particular bullet behavior.

lower-alpha loops back to a when z is reached.

The enumerators that we would need to output have the form a, b, c,
d, ..., z, aa, ab, ac, ad, ... , az, ba, ... (this is a breaze under
XSLT/XSL:FO)

I've did research a while back to try and emulate that behavior
somehow under CSS but I came to the conclusion back then that it
wasn't possible given CSS by itself.

The only solution I could think of (inelegant and cumbersome) would be
to use custom bullets (we would need a drawing for each individual
bullets so that we can simulate a numbered list), and to have our
application output, in an attribute, the correct custom bullet to
display, making sure that resequencing occurs when a list item is
inserted in between other list items.

Under CSS, I would then take whatever is in the attribute and would
use the image to display as a custom bullet for that list.

I'm not 100% certain the idea would work as I expect; I'd have to test
it out, but I'm definitely running out of ideas.

Any help would be greatly appreciated.

Regards
Jean-Francois Michaud

Jean-François Michaud

2007-07-16, 6:19 pm

On Jul 16, 5:15 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit Jean-Fran=E7ois Michaud:
>
>
> You are out of luck with CSS. Use content generation methods that insert =
the
> numbering as actual content (and use list-style-type: none to suppress
> CSS-generated bullets or nubers).

Doh. Yeah, that's kindda what I figured. Bullets in lists might be
possible, but to give you a bit more context, we are dealing with XML
as opposed to HTML (I didn't choose this combo, but now we have to
live with it).

Also, the XML is used as part of an authoring environment where list
items can be inserted dynamically, which means that if content is
incorporated in the textflow, that we will have to update enumerators
whenever a listitem is inserted between other list items or removed
(we need to resequence all the list items following the insertion.
Worst case of O(n) if each new item is inserted at the beginning of
the list, I would assume an average case of O(n/2).

Also, there is a requirement of having the enumerator not be part of
the wrapped text flow, meaning that we can't have:

(a) awoefijwoeifjeowifj
aowijefowijefoiwjefowi
owijefoiewjfowiejfiejfij

And need this instead:

(a) aowijefowijfeoewijf
aoiwjfeoaiwjfoiwjfo
aowijefwoeifjwoeie

>
> That's correct.
>
> "This specification does not define how alphabetic systems wrap at the end
> of the alphabet. For instance, after 26 list items, 'lower-latin' renderi=
ng
> is undefined. Therefore, for long lists, we recommend that authors specify
> true numbers."http://www.w3.org/TR/CSS2/generate.html#listshttp://www.w3.=
org/TR/CSS21/generate.html#lists
> (That is, CSS 2 - the formal specification - and CSS 2.1 - the mutable dr=
aft
> that is closest to a surrogate for an excuse for a "de facto standard" th=
at
> we have - agree on this point.)
>
>
> It may, or it may not. Actually I would expect "z" to be followed by "=E5=
",
> "=E4", and "=F6", but that's just me and a few millions of other people.
>
>
> That's a strange approach. What's wrong with

On both approach we end up having to resequence all the enumerators
but using CSS to display bullets dissociated the enumerators from the
text flow and allows us to respect this constraint (this approach also
requires a DTD change to accomodate holding the url to the image for
the particular list item being displayed:

(a) aowijefowijfeoewijf
aoiwjfeoaiwjfoiwjfo
aowijefwoeifjwoeie

Your solution doesn't involve a DTD change (which is generally good),
be we have to fall back on other requirements (Wrapping in the
textflow). I'll see if this can be implemented easily. There would be
an additional constraint the those enumerators can't be deleted from
the textflow by people working with the text (oops).

> <ul style=3D"list-style-type:none">
> <li>a. Foo bar.</li>
> <li>b. More foo.</li>
> ...
> <li>z. Yet another foo.</li>
> <li>aa. Still more foo.</li>
> ...
> </ul>
>
> or something like that? (I'd use <ul> instead of the slightly more logical
> <ol>, since when CSS is off, list bullets cause less confusion than 1, 2,=
3
> etc. before the letters.)
>
> If you wish to style the letters separately, you would naturally need to =
add
> extra markup into each <li>, like
>
> <li><span class=3D"num">a.</span> Foo bar.</li>
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Thanks much for the help, it's greatly appreciated :).

Regards
Jean-Francois Michaud

Beauregard T. Shagnasty

2007-07-16, 6:19 pm

Jean-François Michaud wrote:

> Also, there is a requirement of having the enumerator not be part of
> the wrapped text flow, meaning that we can't have:
>
> (a) awoefijwoeifjeowifj
> aowijefowijefoiwjefowi
> owijefoiewjfowiejfiejfij
>
> And need this instead:
>
> (a) aowijefowijfeoewijf
> aoiwjfeoaiwjfoiwjfo
> aowijefwoeifjwoeie

Have you tried:

<li style="text-indent: -3em;">(a) aowijefowijfeoewijf ...

Naturally, if you have more than a couple of these list items, you would
wrap them in a <div> and set the style in your style sheet.

..indent li { text-indent: -3em; }

<div class="indent">
<ul>
<li>(a) aowijefowijfeoewijf ... </li>
</ul>

--
-bts
-Motorcycles defy gravity; cars just suck

Jukka K. Korpela

2007-07-16, 6:19 pm

Scripsit Beauregard T. Shagnasty:

>
> Have you tried:
>
> <li style="text-indent: -3em;">(a) aowijefowijfeoewijf ...

I'm afraid that doesn't quite do what Jean-François had in his mind. The
following might work better in that direction: Use markup like
<li><span class="num">(a)</span> ...</li>
for list elements, and CSS code like

ul { list-style-type: none }
span.num { float: left; margin-left: -2.5em}
ul, li { margin: 0; padding: 0; }
li { margin-left: 2.5em; }

The idea is to make the number float on the left, setting the indentation of
list items so that their lines start at a fixed horizontal position. The
width of 2.5em should be enough for "numbers" like (a) and (zz), for any
commonly used font.

By the way, the format "(a)" is yet another reason for making the "numbers"
part of the content. CSS-generated "numbers" tend to have format like "a."
(not specified in specs, but common browser practice), and there's no way in
CSS to change that. (Well, nothing that works in WWW terms. You could use
generated content and counters, but IE does not support them.)

Of course, if the markup is actually XML, it might be possible (if allowed
by company police^Hy or other higher powers) to use simpler markup, like an
element instead of a class: <li><num>(a)</num>...</li>

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jean-François Michaud

2007-07-17, 6:17 am

On Jul 16, 7:15 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit Beauregard T. Shagnasty:
>
>
>
>
> I'm afraid that doesn't quite do what Jean-Fran=E7ois had in his mind. The
> following might work better in that direction: Use markup like
> <li><span class=3D"num">(a)</span> ...</li>
> for list elements, and CSS code like
>
> ul { list-style-type: none }
> span.num { float: left; margin-left: -2.5em}
> ul, li { margin: 0; padding: 0; }
> li { margin-left: 2.5em; }
>
> The idea is to make the number float on the left, setting the indentation=
of
> list items so that their lines start at a fixed horizontal position. The
> width of 2.5em should be enough for "numbers" like (a) and (zz), for any
> commonly used font.

Fantastic! This seems to do just what I need. We would have to revisit
our DTD to add a mandatory element in front of every list-item (the
mandatory element would contain the application controlled enumerator.

The CSS seems to hold the road and does everything we need to do :).

> By the way, the format "(a)" is yet another reason for making the "number=
s"
> part of the content. CSS-generated "numbers" tend to have format like "a."
> (not specified in specs, but common browser practice), and there's no way=
in
> CSS to change that. (Well, nothing that works in WWW terms. You could use
> generated content and counters, but IE does not support them.)

Yep, we had specific requirements for enumerators that we weren't able
to meet because of CSS, but if we go for a "part of content"
enumerator, then we can use any character supported by the
application.

> Of course, if the markup is actually XML, it might be possible (if allowed
> by company police^Hy or other higher powers) to use simpler markup, like =
an
> element instead of a class: <li><num>(a)</num>...</li>
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Our allowed structure looks like this

<List1>
<Warning><Para/></Warning>
<Caution><Para/></Caution>
<L1Item><Para/></L1Item>
</List>

We'd have to transform it so that we have a mandatory element before
each L1Item

<List1>
<Warning><Para/></Warning>
<Caution><Para/></Caution>
<L1enumerator></L1enumerator>
<L1Item><Para/></L1Item>
</List>

Regards
Jean-Francois Michaud