4. XHTML output

4.1. XHTML design considerations

It is all very well and good to say that CSS will handle the formatting of the taxonomic headings on the index page, but there is a subtle design problem that must be addressed.

In practice, all my work with bird classification has used the same set of taxonomic ranks: order, family, subfamily, genus, species, and subspecific form. To display taxa as an outline, we could just leave the order lines unindented; indent family lines one increment; indent subfamily lines two increments; and so on.

However, technically, in the underlying system for representing bird taxonomy, one can select a different set of ranks.

So the question is how much flexibility to build into the Web design to accommodate different sets of ranks. Also, where should this flexibility reside? To put the latter question differently, what software must change when the set taxonomic ranks changes?

The author's preference is to place the dependency in the CSS stylesheet. The XHTML generation step can tag the taxonomic heading lines with the rank code (e.g., “-f” for subfamily), so the logic that generates the XHTML does not have to be changed when the rank set changes. If the CSS gets out of synch with the rank set, the worst that can happen is the heading won't be formatted correctly; it will, however, still appear. This decision, in the author's opinion, minimizes the impact of using a different rank set.

4.2. XHTML for the index page

Here is the top-level XHTML for the index page. Details of the content of the body element are discussed below.

<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>Shipman's bird photo index</title>
    <link rel='stylesheet' href='birdindex.css' type='text/css'/>
  </head>
  <body>
    <h1>Shipman's bird photo index</h1>
    ...body here...
  </body>
</html>

The link element points at the stylesheet; see Section 5, “Styling with CSS”.

The body of the page will consist of a sequence of div elements, one for each taxonomic heading, and one for each form name.

The div elements for taxonomic headings will be tagged with an attribute “class='head-X'”, where X is the taxonomic rank code (e.g., 'g' for genus or '-f' for subfamily).

Here's an example of a taxonomic heading for Subfamily Anserinae:

<div class='head--f'>
Subfamily Anserinae: Geese and Swans  
</div>

Also, taxonomic names at or below genus rank should be italicized according to the standard biological conventions. The parts to be italicized will be wrapped in a span element tagged with class='genus'. Here is an example:

<div class='head-g'>
<span class='genus'>Lanius</span>
</div>

When a higher taxon has at least one photo referred to it, but those photos all use the same name, the heading will also serve as a link to the form page. For example, here is a heading for genus Empidonax. Note that form pages live in subdirectory “form/” under the index page, since there may be quite a number of them. For the file naming conventions of form pages, see Section 4.3, “XHTML for the form page”.

<div class='head-g'>
  <a href='form/empido.html'>
    <span class='genus'>Empidonax</span>
  </a>
</div>

Finally, when multiple English names are referred to the same taxon, there will be a line for each form, containing a link to the form page for that name. Such lines are packaged into a div element of class name-line. Here is an example of a link for a species pair, Downy or Hairy Woodpecker:

<div class='name-line'>
  <a href='form/dowwoo-o-haiwoo.html'
  >Woodpecker, Downy/Woodpecker, Hairy</a>
</div>

4.3. XHTML for the form page

Each form page displays all the catalog entries for archived photos that use the same English name.

Because there may be hundreds of form pages, they reside in subdirectory “form/” under the directory where the index page lives.

The name of each form file will be derived from the “bird ID” string corresponding to that name. In most cases, this will be just the six-letter bird code. For example, the page for American Robin will live at “form/amerob.html”.

There are two complications, however. Each possible compound (hybrid or species-pair) form will have its own page. The name of this page will be based on the composite bird code (e.g., “mallar^amewig?”). However, as this example shows, the special characters used in composite bird codes (^|?) have special meanings in Unix shells. So these three characters are translated according to this table:

`^`	`-x-`
`\|`	`-o-`
`?`	`-q`

Here are some examples:

English name	Code	File name
Ou	`ou`	`form/ou.html`
Wigeon, American×Wigeon, European	`amewig^eurwig`	`form/amewig-x-eurwig.html`
Flycatcher, Dusky/Flycatcher, Hammond's	`dusfly\|hamfly`	`form/dusfly-o-hamfly.html`
Warbler, Orange-crowned?	`orcwar?`	`form/orcwar-q.html`

The bulk of the form page is one large table with three columns:

The thumbnail image.
The image size, as a percentage of a 24mm×36mm frame.
The rest of the width of the table consists of a vertical stack of boxes. The first box contains the catalog number (whose first 10 digits are also the date), the state, and the locality. At this writing, only the note element will be shown in the next box. Eventually the other elements such as desc and film will get their own boxes.

Here is a mockup showing the table and one entry.

<table border='4' cellspacing='4'>
  <colgroup>
    <col align='center'/>
    <col align='right' valign='top'/>
    <col align='left' valign='top'/>
  </colgroup>  
  <thead>
    <tr>
      <th align='center'>Thumbnail</td>
      <th align='center'>Size</td>
      <th align='center'>Data</td>
    </tr>
  </thead>
  <tbody>

Here is the first column of a sample table row. Note the redundant align and valign attributes. Even though they are the same values from the colgroup header, they are repeated here because some contemporary browsers do not properly handle colgroup.

    <tr>
      <td valign='top' align='center'>
        <img src='../thumb/2005-02-18a0005.jpg' alt='thumbnail'/>
      </td>

The second column displays the image size in two ways: as a percentage of full frame, and using its pixel dimensions. Because the “Size” column has very little information in it, we want to keep that column narrow by stacking these three numbers vertically, using plain div elements. The “×” character is the multiplication symbol “×”.

      <td valign='top' align='right'>
        <div>26.37%</div>
        <div>2018</div>
        <div>&#x00d7;2796</div>
      </td>

The third column contains all the other data. Paragraphs are vertically stacked using div elements.

      <td valign='top' class='cat-info'>
        <div class='ident'>
          <span class='cat-no'>2005-02-18a0005</span>
          NM: Bosque del Apache NWR
        </div>
        <div> <!--Minor data-->
          taking off, wings up, !!
        </div>
      </td>
    </tr>
  </tbody>
</table>

Note the links to CSS rules:

div.ident: The box containing the catalog number and location.
span.cat-no: Highlights the catalog number.
td.cat-info: Formats the information block.

See Section 5, “Styling with CSS” for the corresponding CSS rules.

catweb: A Web-based bird photo catalog

4. XHTML output

4.1. XHTML design considerations

4.2. XHTML for the index page

4.3. XHTML for the form page