Search code examples
htmlsemantic-markup

How do I override the numbering for one specific li in an ordered list


I'm transcribing legal documents that come with ordered lists, but there's a catch. Law-makers are lazy and when adding a new clause between clauses 2, and 3, they name it 2A.

As an example, here's some original text:

6 High treason
(1) Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
(2) Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.
(2A) An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.
(3) Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.

When coverted to HTML, it's marked up as:

<article>
  <div>
    <div>6&mdash;<em>High treason</em></div>
  </div>
  <div>
    <ol type="1">
    <li>Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.</li>
    <li>Any person aiding or abetting  or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.</li>
    <li>An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.</li>
    <li>Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.</li>
    </ol>
  </div>
</article>

It renders (obviously) as:

6—High treason
  1. Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
  2. Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.
  3. An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.
  4. Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.

Question: How can I override the number on a specific li and restart the count from the next onwards?

I.e, how do I change 3rd item in the ol to be 2A, and 4th to be 3.

Here's a JS fiddle to make it easy to get started! :)


Solution

  • I would suggest not to use ol, nor another list element.

    Just because content is numbered, doesn’t mean that ol has to be used (nor that it’s necessarily appropriate to use it). Semantically, it could be represented as a numbered sequence of paragraphs. Using ol could be warranted if you have a hierarchy (i.e., nested lists), but that doesn’t seem to be the case here.

    Even if ol is semantically appropriate: If you can’t represent the numbering with start and value (and it seems that you can’t, in your case), the content only makes sense in combination with CSS. But we shouldn’t rely on CSS for conveying the meaning of the content. A user agent without CSS support (or a user agent applying a user-specific style sheet that overwrites the relevant part) would get a different numbering. When making references to these list items, it can lead to misunderstandings, possibly critical ones (especially in the case of legal documents).

    So I would go with something like this:

    <section>
      <h2>6 High treason</h2>
    
      <p>(1) Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.</p>
      <p>(2) Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.</p>
      <p>(2A) An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.</p>
      <p>(3) Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.</p>
    
    </section>
    

    This would also allow you to use a for the numbers so that specific clauses can be linked:

    <section id="6">
      <h2>6 High treason</h2>
    
      <p id="6-1">
        <a href="#6-1">(1)</a>
        Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
      </p>
    
      <p id="6-2">
        <a href="#6-2">(2)</a>
        Any person aiding or abetting or collaborating the acts mentioned in clause <a href="#6-1">(1)</a> shall likewise be guilty of high treason.
      </p>
    
      <p id="6-2A">
        <a href="#6-2A">(2A)</a>
        An act of high treason mentioned in clause <a href="#6-1">(1)</a> or clause <a href="#6-2">(2)</a> shall not be validated by any court including the Supreme Court and a High Court.
      </p>
    
      <p id="6-3">
        <a href="#6-3">(3)</a>
        Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.
      </p>
    
    </section>