Creating Legal List Numbering only using CSS

If you want to create lists with legal style numbering, here's a way to do it. It's quick, clean, and tidy. It results in lists that automatically do this sort of thing:

1. Section

1.1 Clause

   1.1.1 Sub-Clause

     1.1.1.1 Sub-Sub-Clause

And here's some sample HTML Code:

<html>
  <header>
    <title>Sample of Legal List using CSS</title>
    <link type="text/css" rel="stylesheet" href="./legal-lists.css" />
  </header>
  <body id="legal-list">
    <h1>Sample of Legal List Numbering using CSS</h1>
    <h2>Section One</h2>
    <ol>
      <li>Clause One</li>
      <li>Clause Two
        <ol>
          <li>Clause Two sub One</li>
          <li>Clause Two sub Two</li>
          <li>Clause Two sub Three</li>
        </ol>
      </li>
      <li>Clause Three</li>
    </ol>
    <h2>Section Two</h2>
    <ol>
      <li>Clause One</li>
      <li>Clause Two</li>
      <li>Clause Three
        <ol>
	  <li>Clause Three sub One
            <ol>
              <li>Clause Three sub One sub One </li>
              <li>Clause Three sub One sub Two</li>
              <li>Clause Three sub One sub Three</li>
            </ol>
          </li>
          <li>Clause Three sub Two</li>
          <li>Clause Three sub Three</li>
        </ol>
      </li>
    </ol>
  </body> 
</html>

The key thing to note with the above content is that the ID "legal-list" is on the "body" tag in this case - that means all ordered lists on this page will be numbered this way. If you want to limit it, just put the ID in the block containing the list you want to number.

The CSS looks like this:

  /* legal list styles */
  #legal-list {
    counter-reset: section;
  }
  #legal-list h2:before {
    counter-increment: section;
    content: counter(section) ". ";
    margin: 0 0.5em 0 0;
  }
  #legal-list ol {
    counter-reset: clause;
    list-style: none outside none;
    text-indent: -2em;
  }
  #legal-list ol li {
    counter-increment: clause;
  }
  #legal-list ol li:before {
    content: counter(section) "." counters(clause, ".") ". ";
    margin: 0 0.5em 0 0;
  }

And here's what it should look like (in this case, I put the id="legal-list" the div block surrounding the list):

To try this, just download the attached files (or copy and paste the blocks above into your own files with the same names) and open the legal-list-sample.html file in your browser.

For a working example of a legal document, see the Terms and Conditions on this site.

No comment...

I've suspended commenting on this site because I'm not happy with the proprietary Disqus platform I have been using as it is antithetical to much of the site's content and my own stated positions.

I originally chose Disqus because it helped to minimise the spam commenting that, previously, required a lot of administration time. I justified its use based on the idea that I always use Free and Open Source Software if a viable option exists in a particular domain. I haven't yet found something comparable that works with Drupal... but still, the cognitive dissonance of requiring people wanting to comment on my posts to sacrifice their freedom to do so became too onerous.

If you have a comment (or a suggestion on a Drupal 7-friendly, spam resistant commenting process with good admin and commenter notification recipes! - I recently tried isso, and it's cool, but sadly, not well suited to Drupal, although given it's open source, I might have a go at changing that) - get in touch!