: Numbered list with subclauses I'm trying to create a legal document with decimal numbered subclauses, then alpha and roman subsub and subsubsub clauses. (whew!) `1. MAIN HEADING 1.1 This is an

@Angie530

You can achieve almost all your requirements with nested ordered lists and simple CSS to set alpha bullets (a, b, c) or roman numerals (i, ii, iii).

This mark-up:

<ol class="main">
<li>MAIN HEADING
<ol>
<li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
<li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block. See below for the remaining clauses
<ol>
<li>this list is completely for demonstration and should not be construed as legal language in any way, nor should make sense in that</li>
<li>should the indentation take more than:
<ol>
<li>this many lines it would be overly big</li>
<li>legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block</li>
<li>and continue the formatting on to the next line but be underneath the body of the the text and not begin directly below the number itself. In this example the text carries out to the right but I need it to wrap around underneath.</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Second Clause Heading
<ol>
<li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
<li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block. See below for the remaining clauses</li>
</ol>
</li>
</ol>


And this basic CSS

ol.main > li > ol > li > ol {list-style-type:lower-alpha}

ol.main > li > ol > li > ol > li > ol {list-style-type:lower-roman}


Achieves this affect:



The key thing missing though are the decimal numbered subclauses, but we can use the counter-reset, counter-increment and content properties to add these. Be aware though these properties are not recognised by IE6 or IE7.

This is the additional CSS to use:

ol.main > li {
counter-increment: root;
}

ol.main > li > ol {
counter-reset: subsection;
list-style-type: none;
}

ol.main > li > ol > li {
counter-increment: subsection;
}

ol.main > li > ol > li:before {
content: counter(root) "." counter(subsection) " ";
}


The first three selectors allocate names to the list items and count how many are being used. The final selector adds the numbers to the beginning of the list item, i.e. 1.1, 1.2, 2.1, 2.2 etc is [root number] [full stop] [subsection number] [space].

The final screen will look like this:



Here is a demo - blog.ajcw.com/demo/lists.html

Vote Up Vote Down

@Harper822

Counter styles will let you display decimal lists, and the list-style-type CSS property will style your subclauses using alpha and roman characters:

Result (image)


HTML

<div id="example">
<ol>
<li class="heading">Main Heading
<ol>
<li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
<li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.
<ol>
<li>Second-level clause</li>
<li>Second-level clause two
<ol>
<li>First third-level clause.</li>
<li>Second third-level clause.</li>
</ol>
</li>
</ol>
</li>

</ol>

</li><!-- "Main Heading" ends -->

</ol>
</div>


CSS

div#example{
width:400px;
}

ol {
counter-reset: item;
}

li.heading{
margin-bottom:20px;
}

ol li{
font-weight:bold;
text-transform:uppercase;
list-style-position:outside;
}

ol li:before{
content: counters(item,".") ". ";
counter-increment: item;
display:marker;
}

ol li ol li{
font-weight:normal;
text-transform:none;
}

ol li ol li ol li{
margin-left:2.5em;
list-style-type:lower-alpha;
}

ol li ol li ol li:before{
content:none;
}

ol li ol li ol li ol li{
list-style-type:lower-roman;
}


Live demo
See the working demo here.

Hanging indents
Unfortunately, this doesn't give you the hanging indents you want (where text is wrapped and floated to the right of the list number) for top-level clauses, but it will work for the sub-level (roman and alpha numbered) clauses.

Consider unnumbered lists instead
In short, numbered nested lists are a pain to format, write, and read with HTML/CSS, which is why companies such as Amazon and Netflix don't bother; they convert legal documents to use unnumbered lists when displaying them on the Web. (See Amazon's privacy policy here and the Netflix terms here.)

Vote Up Vote Down

@Goswami781

I think this is as close as you can get with CSS. It doesn't do the legal numbering and the alpha numbering only has one bracket, but it does most of what you want.

<html>
<head>
<style type="text/css">
ol.a {list-style-type:decimal;}
ol.b {list-style-type:lower-alpha;}
ol.c {list-style-type:lower-roman;}
</style>
</head>

<body>
<ol class="a">
<li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
<li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block. See below for the remaining clauses</li>
<ol class="b">
<li>this list is completely for demonstration and should not be construed as legal language in any way, nor should make sense in that</li>
<li>should the indentation take more than:</li>
<ol class="c">
<li>this many lines it would be overly big</li>
<li>legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block</li>
<li>and continue the formatting on to the next line but be underneath the body of the the text and not begin directly below the number itself. In this example the text carries out to the right but I need it to wrap around underneath.</li>
</ol>
</ol>
</ol>

</body>

Vote Up Vote Down