noteweb: Rendering bird field notes for the Web

Here is the body content for the index page.

    <h1>John W. Shipman's field notes</h1>
    <p>
      Notes are grouped according to the reporting seasons for
      <cite>Audubon Field Notes</cite>.
    </p>
    <p>
      See
      <a href='conventions.html'>How to read Shipman's field notes</a>
      for notational conventions and the author's contact information.
    </p>
    ...index table...

The referenced conventions.html page is hand-built and outside the scope of this script.

Here is the wrapper for the index table. Its class='seasons' attribute links it to the stylesheet rule described in Section 5.3, “table.seasons”.

    <table border='5' cellpadding='5' class='seasons' width='100%'>
      <colgroup align='right'/>
      <colgroup span='12' align='left' width='*'/>
      <thead>
        <tr class='year-row'>
          <th>Year</th>
          <th class='winter' colspan='2'>Winter</th>
          <th class='spring' colspan='3'>Spring</th>
          <th class='summer' colspan='2'>Summer</th>
          <th class='fall' colspan='4'>Fall</th>
          <th class='winter'>Winter</th>
        </tr>
      </thead>
      <tbody>
        ...rows for years here...
      </tbody>
    </table>

The columns of the table are color-coded by season, and the winter season occurs both at the beginning and ending of the year. The months are assigned to seasons by the reporting requirements of Audubon Field Notes: winter is December–February; spring is March–May; summer is June–July; and fall is August–November The color-coding is handled by CSS rules; see Section 5.4, “Seasonal column markup rules: th.winter, etc.”.

Here is the XHTML for a table row for the year 1990. This illustrates the treatment of months that have no data. The class='year-group' attribute appears periodically on the tr element to add a heavier ruled line under the row (other tr elements have class='year-row'). This is a very important user-friendliness feature: without a bold line under a row every so often, and the color-coded columns, the reader's eye can get lost in the grid. The frequency of the year-group attribute is given by Section 10.11, “YEAR_GROUP_FREQUENCY”. For the style markup of table rows, see Section 5.5, “CSS rules for rows of the index table”.

        <tr class='year-group'>
          <th class='row-label'>1990</th>
          <td class='winter'><a href='1990/1990-01.html'>January</a></td>
          <td class='winter'>&nbsp;</td>
          <td class='spring'><a href='1990/1990-03.html'>March</a></td>
          <td class='spring'>&nbsp;</td>
          <td class='spring'><a href='1990/1990-05.html'>May</a></td>
          <td class='summer'>&nbsp;</td>
          <td class='summer'>&nbsp;</td>
          <td class='fall'>&nbsp;</td>
          <td class='fall'>&nbsp;</td>
          <td class='fall'>&nbsp;</td>
          <td class='fall'><a href='1990/1990-11.html'>November</a></td>
          <td class='winter'>&nbsp;</td>
        </tr>

The year number is in a th element styled by a CSS rule described in Section 5.6, “th.row-label: The row label”. The table cells are in the usual td element, marked up with one of the seasonal style rules discussed in Section 5.4, “Seasonal column markup rules: th.winter, etc.”. Each cell contains a link to the month file if there is one, or a non-breaking space   placeholder if there is no corresponding month page.