CSS Can Get You in Jail

If you've ever actually paid attention to a legal document, rather than breaking your finger from scrolling to the bottom of it, you would've noticed that it has a very specific format. When it comes to displaying such documents on a web page, following front-end best practices might actually pose a legal risk.

The "Right" Approach

Documents such as Terms and Conditions (T&C), Terms of Service (ToS), Privacy Policy, etc. rely heavily on hierarchical numbering to organize information. Like this:

1. Article 1
1.1. Paragraph 1
1.2. Paragraph 2
1.2.1. Clause 1
1.2.2. Clause 2
2. Article 2
2.1. Paragraph 1
...

If you're a decent front-end developer, your immediate instinct would be to use ordered lists(opens in new tab) (<ol>) like so:

<ol>
    <li>
        Article 1
        <ol>
            <li>Paragraph 1</li>
            <li>
                Paragraph 2
                <ol>
                    <li>Clause 1</li>
                    <li>Clause 2</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        Article 2
        <ol>
            <li>Paragraph 1</li>
        </ol>
    </li>
</ol>

…then you would perform swift gymnastics with CSS counters(opens in new tab), like in this codepen(opens in new tab), to display the numbers.

While you might get deeply respected by web nerds and CSS connoisseurs, you might also get proportionately disrespected by lawyers and regulators.

The Problem(s)

First of all, the numbers in these documents exist not only to just make them "pretty" or "readable." They are unique identifiers in the text. More importantly, certain pieces of text within the document refer to other pieces of text using these identifiers. If a given paragraph suddenly gets a different number and another paragraph refers to it, the whole text no longer makes sense and is not legally correct.

Rendering Issues

Basically, by using CSS for displaying the numbers, you put the validity of the documents in the hands of the rendering engine in the user's browser. And if you've been a web developer for a while, you KNOW that there's some freak out there still using Internet Explorer.

But even if we scratch off antique browsers, there was recently a regression in Chromium(opens in new tab) which caused rendering issues related to counter-reset(opens in new tab). To put it simply, this:

1. Article 1
1.1. Paragraph 1
1.2. Paragraph 2
1.2.1. Clause 1
1.2.2. Clause 2

…suddenly turned to this:

1. Article 1
1.1.1. Paragraph 1
1.1.2. Paragraph 2
1.1.2.1.2.1. Clause 1
1.1.2.1.2.2. Clause 2

…which is obviously complete nonsense.

In general, there is absolutely NO guarantee that:

1. Your visitors will be using modern browsers
2. Those browsers will render the lists as expected

Human Issues

Even if there was a guarantee that everything would be rendered correctly, human mistakes do exist.

If the numbering in the document was written by hand, there's a chance that the numbers could jump from 3.4.12 straight to 3.4.14, i.e. skipping 3.4.13. The clause might still be referenced as 3.4.14 and continue to be valid, but if rendered with CSS, that 14 would likely turn to a 13 and the text would suddenly reference a clause that does not exist.

It's true that lawyers are eagle-eyed and would spot such a mistake, but on the off chance that it does happen, you would want to keep the mistake.

All in all, you wouldn't want layers knocking on your door because of a fucking browser regression.

Solution

You should hardcode numbers in legal documents, like so:

<p><strong>1.</strong> Article 1</p>
<p><strong>1.1.</strong> Paragraph 1</p>
<p><strong>1.2.</strong> Paragraph 2</p>
<p><strong>1.2.1.</strong> Clause 1</p>
<p><strong>1.2.2.</strong> Clause 2</p>
<p><strong>2.</strong> Article 2</p>
<p><strong>2.1.</strong> Paragraph 1</p>

This way, text is just text and that's it. But before your second instinct of writing a script to hardcode the numbers kicks in, know that it would still be prone to the human error issue, as your script would not randomly skip numbers, hopefully.

Perhaps the ideal solution is:

1. Give your lawyers a rich text editor on one side of the screen, so they can use regular lists without manually writing the numbers. Apart from being error-prone, manual numbering is also an annoying and shitty thing to ask for.

2. Render the document in real time, with hardcoded numbers on the other side of the screen. This way, the eyes of your lawyers are looking and evaluating the same HTML that would finally be displayed on the web page.

3. When ready, store the rich text in its raw data format (probably JSON) and its final rendered HTML form, as seen by the lawyer. For further editing, load the JSON. In the website, inject the robustly hardcoded and pristine HTML.

Conclusion

Rendering legal documents is deceptively simple. For many people it's just a boring wall of text that they want to ignore anyways. Well, if you want it to also be a legally valid wall of text, it should be boring in terms of its implementation as well. Otherwise your CSS flex might result in a lawsuit…