Styling notes list

I use a description list to display notes on home and archive pages, whose markup is as follows:

<!-- HTML mark-up to show notes list (clean, preferred) -->
<dl class=two>
  <dt>Title of post one</dt>
  <dd>Description of post one.</dd>

  <dt>Title of post two</dt>
  <dd>Description of post two.</dd>
  ...
</dl>

To display notes, I use a two-column layout — for screens wider than a handheld device — to make best use of the available white space.1 In column style, content typically flows in the direction of ↓↗↓, i.e., from left-top to left-bottom, followed by right-top to right-bottom.

/* Using column style (not good for longer lists) */
.two {
   -webkit-columns: 2;
      -moz-columns: 2;
           columns: 2;  
-webkit-column-gap: 2em;
   -moz-column-gap: 2em;
        column-gap: 2em;
}

For content exceeding the screen view, this poses a problem for the readers as they need to go back and forth between top and bottom of the page. To fix this issue, as the preferred reading would be in the direction of →↙→, I switched list style from column (above) to grid as shown below.

/* Using grid style (ideal for longer lists) */
.two {
  display: grid;
  grid-template-columns: repeat(2, 49%); /* 1% gap */
  justify-content: space-between;
}

Here’s how CSS grid works: For three paragraphs in sequence in a (n rows × 2 column) grid layout, the first two will appear side by side, while the third one appears below the first. Now, displaying paragraphs like this is obviously a bad idea, but it is tidy for lists.

The problem is that for the given html markup, the grid style gets applied to every <dl> child html element. In other words, this would mean title and its corresponding description would be positioned side-by-side. To avoid this, it then becomes necessary to introduce a grouping <div> element (to group <dt> and <dd> together) as shown below:

<!-- Mark-up for grouping (avoid if possible) -->
<dl class=two>
  <div> <!-- extra markup -->
    <dt>Title of post one</dt>
    <dd>Description of post one.</dd>
  </div> <!-- extra markup -->

  <div> <!-- extra markup -->
    <dt>Title of post two</dt>
    <dd>Description of post two.</dd>
  </div> <!-- extra markup -->
  ...
</dl>

The extra markup grows quickly. For every note, there’s a pair of <div> tags. But I dislike tag soup in page source — even if it’s acceptable semantically. To eliminate them in page-source, I added the following JavaScript (in the <head> section) together with CSS grid styling to pages that display lists.

<script>
window.onload = dldiv;
function dldiv() {
  document.body.innerHTML=document.body.innerHTML.replace(/\<dt\>/g, '<div>$&');
  document.body.innerHTML=document.body.innerHTML.replace(/\<\/dd\>/g, '$&</div>');
}
</script>

The script dynamically inserts <div> tags needed at places to keep the grouping on page load, but without modifying the page-source, thereby keeping it clean.2


  1. For handheld devices with narrower content width, the content follows responsive design philosophy to fold lists neatly back in the sequential order. Try reducing browser window width while on home page or the archive page to see this effect, and notice notes in the correct reverse chronological order. 

  2. It is loosely based on the small-caps plug-in I released a decade ago.