David Jones wrote:
> Is there a way to align roman numeral list numbers left, instead of
> right-aligned on the period?
In theory, yes. In practice, currently not in CSS if you use the logical
<ol> markup; you would have to use e.g. table markup instead of list
markup to create the desired rendering
> Example:
> I. List item 1
> II. List item 2
>
> Instead of:
> I. List item 1
> II. List item 2
Assuming that you want the list items themselves aligned to the left,
this could by the specs be achieved by using something like the
following:
ol { list-style-type: none;
counter-reset: itemnr; }
ol li:before {
content: counter(itemnr, upper-roman) ".";
display: inline-block;
width: 1.5em;
counter-increment: itemnr; }
That is, you suppress the normal browser-generated list item numbers and
use generated content to create numbers the way you like. Here the
essential difference would be that your generated numbers are
left-aligned, because that's the default for HTML elements, including
pseudoelements, in general.
And Opera supports this. But most other browsers don't. Worse still,
they implement the part they understand - suppressing the normal numbers
but creating no replacement, i.e. the list appears with no numbers
whatsoever.
As a workaround, you can insert the numbers into the document content
proper and use an HTML table, with the numbers in one column, items in
the second:
<table class="ol">
<tr><td>I.</td> <td>List item 1.</td></tr>
<tr><td>II.</td> <td>List item 2.</td></tr>
</table>
This gives roughly the right rendering even without CSS, but you can
fine-tune it, especially by adding some left margin:
table.ol { margin-left: 2em;
border-collapse: collapse; }
table.ol td { padding: 0 0.5em 0 0; }
table.ol td+td { padding: 0; } /* this rule doesn't work on old IEs, but
no big deal */
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
