7

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 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
1.2 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
    (a) this list is completely for demonstration and should  not be construed as legal language in any way, nor should make sense in that
    (b) should the indentation take  more than:
        i) this many lines it would be overly big
        11) legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block
        iii) 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.

Sorry its so wordy, need this to show the example. 2. Second Clause Heading 2.1 and so it continues thus
I've found the examples for decimal numbering but they do not create a block out to the right of the number, and they carry on with multiple decimals rather than alpha and roman sub clauses.

4 Answers 4

8

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:

enter image description here

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:

enter image description here

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

1

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>

1

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)
css numbered lists for legal documents using counter styles

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.)

1
  • This is very close, thanks Nick. If I add style="text-indent: -30px; padding-left: 35px;" to the ol li ol li part of the style sheet it seems to work. Not perfect, but a whole lot better. May 23, 2011 at 23:14
1

With CSS pseudo-element ::marker (not supported on all browsers yet) and use of implicit list-item counter, you can get it with relatively simple rules:

ol>li::marker {
 content:counter(list-item) ".\A0"
}
ol>li ol>li::marker {
 content:counters(list-item,".") "\A0"
}
ol>li ol>li ol>li::marker {
 content:counter(list-item,lower-alpha) ".\A0"
}
ol>li ol>li ol>li ol>li::marker {
 content:counter(list-item,lower-roman) ".\A0"
}

No class on the uppermost ol as it is handled by child specific selection (> selector).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.