Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Lists with parentheses
2,187 views
Skip to first unread message
David Stone
Feb 21, 2012, 10:02:59 AM2/21/12
to
Looking at
http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
Is there a way to have a list styled lower-alpha, but with (a)
instead of the default a. presentation? In other words, something
that looks like this:
The options are:
(a) Do this thing
(b) Do that thing
(c) Do something else
(d) Do nothing
instead of
The options are:
a. Do this thing
b. Do that thing
c. Do something else
d. Do nothing
http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
Is there a way to have a list styled lower-alpha, but with (a)
instead of the default a. presentation? In other words, something
that looks like this:
The options are:
(a) Do this thing
(b) Do that thing
(c) Do something else
(d) Do nothing
instead of
The options are:
a. Do this thing
b. Do that thing
c. Do something else
d. Do nothing
Jonathan N. Little
Feb 21, 2012, 10:33:45 AM2/21/12
to
Note * No support in IE until version 8
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>counters</title>
<style type="text/css">
ol.alpha_list {
counter-reset: item; list-style: none;
}
ol.alpha_list li:before {
content: "(" counter(item, lower-latin) ") ";
counter-increment: item;
}
</style>
</head>
<body>
<ol class="alpha_list">
<li>Do this thing</li>
<li>Do that thing</li>
<li>Do something else</li>
<li>Do nothing</li>
</ol>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jonathan N. Little
Feb 21, 2012, 10:39:28 AM2/21/12
to
Jonathan N. Little wrote:
> David Stone wrote:
>> Looking at
>> http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
>>
>> Is there a way to have a list styled lower-alpha, but with (a)
>> instead of the default a. presentation? In other words, something
>> that looks like this:
>>
>> The options are:
>> (a) Do this thing
>> (b) Do that thing
>> (c) Do something else
>> (d) Do nothing
>>
A little refinement while we are at it to pretty-up the list left-edge...
> David Stone wrote:
>> Looking at
>> http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
>>
>> Is there a way to have a list styled lower-alpha, but with (a)
>> instead of the default a. presentation? In other words, something
>> that looks like this:
>>
>> The options are:
>> (a) Do this thing
>> (b) Do that thing
>> (c) Do something else
>> (d) Do nothing
>>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>counters</title>
<style type="text/css">
ol.alpha_list {
counter-reset: item; list-style: none;
}
ol.alpha_list li:before {
width: 2em;
Jukka K. Korpela
Feb 21, 2012, 10:41:09 AM2/21/12
to
2012-02-21 17:02, David Stone wrote:
> Is there a way to have a list styled lower-alpha, but with (a)
> instead of the default a. presentation?
Yes, with the usual CSS caveats. You can suppress the normal
> Is there a way to have a list styled lower-alpha, but with (a)
> instead of the default a. presentation?
browser-generated numbers and generate your own numbering, using a
counter and generated content:
ol { list-style-type: none; }
ol { counter-reset: cnt; }
ol li { display: block; }
ol li:before {
content: "(" counter(cnt, lower-alpha) ")";
padding-right: 0.5em;
counter-increment: cnt;
}
This will fail badly on old browsers that don't support generated
content and counters. That's rather old browsers by today's standards,
but still.
Generally, it is safest to generate the numbering so that it is part of
the content, via preprocessing or server-side scripting. Or just type
them by hand if there are not too many of them.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
David Stone
Feb 21, 2012, 2:00:31 PM2/21/12
to
In article <ji0dr7$d3f$1...@dont-email.me>,
Thanks to you and Yukka for the suggestions. I was afraid it would
turn out to be something like that! Normally I wouldn't bother at
all, but I had to post a correction to something in a pdf document,
and I wanted the presentation to match the original. Since it's a
one-off, I used an in-line style for the lower-alpha rather than
add to the CSS file. The above is a little bit much for that, though!
turn out to be something like that! Normally I wouldn't bother at
all, but I had to post a correction to something in a pdf document,
and I wanted the presentation to match the original. Since it's a
one-off, I used an in-line style for the lower-alpha rather than
add to the CSS file. The above is a little bit much for that, though!
Jonathan N. Little
Feb 21, 2012, 2:39:20 PM2/21/12
to
<ol style="list-style: none;">
<li>(a) Do this thing</li>
<li>(b) Do that thing</li>
<li>(c) Do something else</li>
<li>(d) Do nothing</li>
</ol>
Jukka K. Korpela
Feb 21, 2012, 3:15:24 PM2/21/12
to
2012-02-21 21:39, Jonathan N. Little wrote:
> Well there is always:
>
> <ol style="list-style: none;">
> <li>(a) Do this thing</li>
And, even simpler, and more reliably,
> Well there is always:
>
> <ol style="list-style: none;">
> <li>(a) Do this thing</li>
<blockquote>
<div>(a) Do this thing</div>
etc.
(Runs for cover. See The HTML Anarchist’s leaflet,
http://www.cs.tut.fi/~jkorpela/pragmatic-html.html8 )
Should you wish to avoid having the list indented when CSS is off, you
can always replace <blockquote> by <div class=whatever>.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
BootNic
Feb 22, 2012, 12:11:39 AM2/22/12
to
On Tue, 21 Feb 2012 10:33:45 -0500
loosing the item list.
Change to HTML5 or perhaps 4.01 transitional just to get validation for the
type attribute on the OL.
<!DOCTYPE html>
> <html>
add lang attribute to the opening html
<html lang="en">
> <head>
>
>
> <title>counters</title>
Just a little more css
<style type="text/css">
: lang(en) [class~='alpha_list'] > li {
list-style: none;
position: relative;
}
: lang(en) [class~='alpha_list'] > li:before {
content: "(" counter(item,lower-alpha) ")";
counter-increment: item;
position: absolute;
right: 100%;
top: 0.3em; /* li padding-top */
padding-right: 0.3em;
}
ol,ol li {
margin: 0;
padding: 0;
}
ol.alpha_list {
counter-reset: item;
margin: 0.5em;
}
ol.alpha_list li {
margin: 0.3em 0.3em 0.3em 2.5em;
padding: 0.3em;
<ol class="alpha_list" type="a">
> <li>Do this thing</li>
> <li>Do that thing</li>
> <li>Do something else</li>
> <li>Do nothing</li>
> </ol>
>
> </body>
> </html>
--
BootNic Wed Feb 22, 2012 12:11 am
"There is a wicked pretense that one has been informed. But no such thing has
truly occurred! A mere slogan, an empty litany. No arguments are heard, no
evidence is weighed. It isn't news at all, only a source of amusement for
idlers."
*Gibson-Sterling, The Difference Engine*
> David Stone wrote:
>> Looking at
>> http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
>>
>> Is there a way to have a list styled lower-alpha, but with (a)
>> instead of the default a. presentation? In other words, something
>> that looks like this:
>>
>> The options are:
>> (a) Do this thing
>> (b) Do that thing
>> (c) Do something else
>> (d) Do nothing
>>
>> instead of
>>
>> The options are:
>> a. Do this thing
>> b. Do that thing
>> c. Do something else
>> d. Do nothing
>
>
> Counters*
>
> Note * No support in IE until version 8
Just a little more css would help it degrade over a few more versions without
>> Looking at
>> http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
>>
>> Is there a way to have a list styled lower-alpha, but with (a)
>> instead of the default a. presentation? In other words, something
>> that looks like this:
>>
>> The options are:
>> (a) Do this thing
>> (b) Do that thing
>> (c) Do something else
>> (d) Do nothing
>>
>> instead of
>>
>> The options are:
>> a. Do this thing
>> b. Do that thing
>> c. Do something else
>> d. Do nothing
>
>
> Counters*
>
> Note * No support in IE until version 8
loosing the item list.
Change to HTML5 or perhaps 4.01 transitional just to get validation for the
type attribute on the OL.
<!DOCTYPE html>
> <html>
add lang attribute to the opening html
<html lang="en">
> <head>
>
>
> <title>counters</title>
Just a little more css
<style type="text/css">
: lang(en) [class~='alpha_list'] > li {
list-style: none;
position: relative;
}
: lang(en) [class~='alpha_list'] > li:before {
content: "(" counter(item,lower-alpha) ")";
counter-increment: item;
position: absolute;
right: 100%;
top: 0.3em; /* li padding-top */
padding-right: 0.3em;
}
ol,ol li {
margin: 0;
padding: 0;
}
ol.alpha_list {
counter-reset: item;
margin: 0.5em;
}
ol.alpha_list li {
margin: 0.3em 0.3em 0.3em 2.5em;
padding: 0.3em;
}
</style>
> </head>
> <body>
>
>
> <ol class="alpha_list">
add type attribute to OL
</style>
> </head>
> <body>
>
>
> <ol class="alpha_list">
<ol class="alpha_list" type="a">
> <li>Do this thing</li>
> <li>Do that thing</li>
> <li>Do something else</li>
> <li>Do nothing</li>
> </ol>
>
> </body>
> </html>
--
"There is a wicked pretense that one has been informed. But no such thing has
truly occurred! A mere slogan, an empty litany. No arguments are heard, no
evidence is weighed. It isn't news at all, only a source of amusement for
idlers."
*Gibson-Sterling, The Difference Engine*
0 new messages