This week at the office I’ve been on a coding hiatus and just doing a lot of copy placement and markup. The client requested having a numbered list of categories separated by type headers.

I added markup as such:

  %ul
    %li
      %h2 Video
      %ol
        %li Animation
        %li Documentary
        %li Music Video
        %li Narrative
        %li Poetry/Experimental
        %li Collaboration
        %li UNICEF Challenge

    %li
      %h2 Print
      %ol
        %li Photo Collection/Digital Story/Photo Essay
        %li Poster/Collage/Campaign

Output:

  • Video
    1. Animation
    2. Documentary
    3. Music Video
    4. Narrative
    5. Poetry/Experimental
    6. Collaboration
    7. UNICEF Challenge
  • Print
    1. Photo Collection/Digital Story/Photo Essay
    2. Poster/Collage/Campaign

The problem with this was it restarted the second group of categories numbering.

After a quick google and a /facepalm I learned that the <OL> tag has had a start attribute since… The era of mammoths.

I quickly got the desired result by adding start:

  %h2 Print
  %ol{:start => 8}
    %li Photo Collection/Digital Story/Photo Essay
    %li Poster/Collage/Campaign

Output:

  • Video …
    1. UNICEF Challenge
  • Print
    1. Photo Collection/Digital Story/Photo Essay
    2. Poster/Collage/Campaign

A decade of web development under my belt and I can still pick up some very basic tips.