Technical notes

This volume of Verba Africana Digital Materials complies with at least the following specifications and guidelines:

The following list details the most important markup-related choices that have been made for the Verba Africana Digital Materials Project.

XHTML

  1. All pages have been coded in semantically correct, standards compliant XHTML + CSS. XHTML 1.0 strict (served as text/html) was chosen above HTML 4.01 for future compatibility and because it is easier to maintain. A strict separation of structure (XHTML) and presentation (CSS) was maintained throughout, resulting in the following advantages:

    • The code is transparent and intuitive
    • Pages load fast
    • All pages are accessible to people with disabilities
    • Maintenance is easy and the overall flexibility is improved because possible future changes in the design need only be made in one place
    • Standards-based web design complies with the specifications set by the World Wide Web Consortium (W3), thereby ensuring future compatibility

  2. The xml:lang attribute is used to indicate the language of element's contents. This helps alternative output devices like screenreaders to use the right pronunciation. It also enables web crawlers to categorize web content based on the language it is in, something which brings us closer to usable online corpora of linguistic data.

  3. Texts and translations are marked up using <dl>'s (description lists); usually, the original text is given in the <dt> element and the English translation in the <dd> element. Rationale: <dl> is a generic HTML element that can be used to pair up pieces of information related to each other. Use for dialogues is explicitly mentioned as one possible use in the W3C HTML 4 specification. Indeed, the pairing of a sentence and its translation maps quite well onto the pairing of a term (<dt>) and its definition (<dd>). While several purists have argued that this is not entirely semantically valid (<dl> being one of the three list types, and dialogues being not really similar to lists), I prefer to think of XHTML as a tool to be used to achieve sensible and lean markup, and the <dl> element allows me to mark up these texts in a meaningful way. Thus, every passage gets its own <dl>, every line gets its own <dt> and every translation the corresponding <dd>.

    Textual notes that belong to a certain line of text are marked up as a second <dd> (with class="note") accompanying the corresponding <dt>, thus making use of the possibility to associate more than one <dd> with a <dt>. Textual notes that pertain to a paragraph as a whole are given the first <dt>/<dd> pair in the <dl> defining that paragraph. The content of the <dt> in that case is simply 'Note'.

  4. The text-analysis is marked up as a two-column <table> containing text and translation (marked up as above) in one column and the per-paragraph analysis in the other column. For some, a nested <dl> structure might seem more appropriate, as a logical extension of the choice for <dl> above. In this case, there seems to be no clear structural or semantic advantage of one element over the other; the <table> element was chosen because the resulting markup is more easily to parse for screen readers than nested <dl> elements. An added advantage is that most browsers repeat column headers (<th>) on top of every printed page.

  5. Short inline quotes are marked up using the <q> element. According to the specification, “the q element must be rendered with the appropriate quotation marks around the quote, and authors must refrain from adding quotation marks themselves.” Modern browsers get this right, but it is well-known that Internet Explorer doesn't.

    Often, a scripting solution is used to make IE comply with the specs, but since Verba Africana is authored primarily for use in offline environments, it is not a good idea to rely on any scripting. Therefore, standards compliant browsers are told to suppress their quotation marks and these are hardcoded in the HTML instead.

  6. Video files are encoded using the <object> element, avoiding the widespread but invalid (proprietary) <embed> element. Cross-browser testing provides the following results:

    • Internet Explorer 5.5 works like a charm (provides a WMP control)
    • Internet Explorer 6.0 plays (WMP), although post-Eolas versions have the annoying 'press OK to continue loading this page' prompt
    • Internet Explorer 7.0 plays after 'activate this control' (WMP)
    • Firefox 1.0 plays just fine (Quicktime).
    • Firefox 2.0 plays just fine (Quicktime).
    • Opera 9.0 plays just fine (Quicktime).

CSS

  1. Elements with non-English content are tagged with a class attribute taking the ISO 639-2 code of the language as its value (e.g. class="ewe" for Ewe). In case of languages with orthographies outside the basic Latin range, this selector is used to specify the most widely distributed Unicode font, Lucida Sans Unicode, for display of the text. It is also used to italicize single non-English words in otherwise English paragraphs. (Note that we wouldn't need this class if all browsers supported the [att=val]-selector.)

  2. Browsers differ in the way they render HTML + CSS. Especially the render engine of Microsoft's Internet Explorer is notoriously aberrant in its interpretation of the CSS specifications. To attain the same look and feel for the Verba Africana Digital Materials Project across browsers, some specific CSS declarations were needed to cater for different versions of Internet Explorer. Instead of relying on so-called parser bugs and other hacks, style declarations specifically targeted at Internet Explorer were placed in separate CSS files, which are loaded using the 'conditional comments'-method. For example:

    <!-- [if lt IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->

    Standards compliant browsers ignore these comments because they are formatted as HTML comments, whereas different versions of Microsoft Internet Explorer interpret them as conditionals and parse the code if the conditional is satisfied.

  3. Because it is likely that some users will want to make printouts, a separate stylesheet is specified for printing. This stylesheet, print.css, lays out the page in a way that is suitable for print, and removes all elements from the page that do not make sense outside the context of on-screen display.

    Additionally, an alternate logo for print is specified. Because most browsers do not print background images by default, the alternate logo has to be present in the markup (in the form of an <img> element) and is hidden on-screen via style.css.

Mark Dingemanse