Overthinking the display of durations

dabblet.css

/**
 * Overthinking the display of durations
 */
 
html {
	font-size: 1em;
	color: black;
	font-family: -apple-system;
}

table {
	margin: 2em;
	border-collapse: collapse;
}

h1 {
	font-weight: normal;
}


th, td {
	/*outline: 1px solid gray;*/
	padding: 0.5em 0;
	vertical-align: top;
}

td:nth-child(1),
td:nth-child(3) {
	text-align: right;
	padding-left: 0.5em;
	font-variant-numeric: tabular-nums;
}

td:nth-child(2),
td:nth-child(4) {
	color: gray;
	/*font-style: italic;*/
}

td:nth-child(4) {
	padding-right: 2em;
}

td:nth-child(5) {
	font-variant-numeric: tabular-nums;
	padding: 0.5em 3em;
	text-align: right;
	color: darkblue;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
}

td:nth-child(6) {
	padding: 0.5em 0.5em 0 3em;
	line-height:1.3;
	max-width: 25em;
}

dabblet.html

<h1>Overthinking the display of durations.</h1>


<table>

  <tr>
    <td>1 <td>h <td>45 <td>m
    <td>01:45:56
    <td>First stab. No seconds. Because in the context of podcasts one
      never cares about those. I like the de-emphasing of the unit symbols in gray
      because after the first look the eye concentrates on the positions of major and minor
      unit.
  </tr>
    
  <tr>
    <td>1 <td>h <td>41 <td>m
    <td>01:41:56
    <td>One could use a proportional font. But alignment of the numbers in either major
      or minor scale in a list context is rather nice. So tabular numerals, San Francisco has
      those and we can use them in CSS.
  </tr>
  
  <tr>
    <td>1 <td>h <td>1 <td>m
    <td>01:01:56
    <td>What if we lose leading zeroes like a human would do?<br> If it is simple text,
      the alignment would be out of wack. But if the hours and minutes are in fixed
      positions thanks to table cells like here, the alignment is still intact.

  <tr>
    <td> <td> <td>5 <td>m
    <td>00:05:67
    <td>We can remove empty values and their units.
   
  <tr>
    <td>2 <td>h <td> <td>
    <td>02:00:00
    <td>And we could do this …
  
  <tr>
    <td>2 <td>h <td>0 <td>m
    <td>02:00:00
    <td>… or this.
  
  <tr>
    <td> <td> <td>17 <td>sec
    <td>00:00:17
    <td>Sometimes there are only seconds left. I would display them in the minor position
      of the duration display. But I would not use the <b>s</b> abbreviation but the (legal!)
      longer one of <b>sec</b> to distinguish them visually from the <b>m</b> for minutes.

  <tr><td>1<td>h<td>2<td>m<td>01:02:03<td rowspan="4">Marco's test values
  <tr><td>1<td>h<td>23<td>m<td>01:23:45<td>
  <tr><td><td><td>1<td>m<td>01:35<td>
  <tr><td>1<td>h<td>45<td>m<td>01:45:56<td>


</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}