STIKHOI: Displaying Greek & Latin Verse on the Web
This is a method for rendering Greek and Latin verse on the web, designed from the perspective of progressive enhancement using semantic HTML and employing CSS and optional jQuery for presentation.
Why this matters
There hasn't been a standard for citing classical verse on the web in a way that is (1) semantic and (2) aesthetic (i.e., aligned with print conventions). People often copy and paste snippets of poetry within a
blockquote element when citing smaller pieces or painstakingly creating tables with manual line numbers when displaying larger works. Like the makers of every infomercial, I believe there has to be a better way.
Semantics of verse composition
Classical verse is composed in lines, either uniform in meter ("stichic" verse) or varying on a pattern ("strophic" verse).
In either case, a poem (or a passage of a poem) is a list of lines, each with a numbered identifier, following a repeating pattern of varied complexity. Line numbers are part of the meaning of poetry, so in semantic markup the ordered list (
ol element) is most appropriate.
First, I'll briefly explain how the HTML, CSS, and optional jQuery work, and then display several examples of verse of different meters cited from different starting lines, all showing proper line numbering, and where appropriate, consistent indentation.
In HTML, we can identify the starting line number with the ordered list's
The stylesheet does the following:
startattribute (i.e., only lines ending in 5 or 0 will display, regardless of the start number).
In a strophe (e.g., a repeating ABCD pattern), the logic for indentation changes based upon whether the first line is an A, B, C, or D line.
All of this is accounted for by a small number of classes. Two classes cover the vast majority of classical verse:
.verseensures that every fifth line is numbered
.coupletindents even numbered lines
A few more complex classes cover most strophic poetry:
.from-D, are used with strophes when a passage is quoted from any but the first line in the ABCD pattern.
.indent-Dare used when either the C or D needs to be indented
.indent-C-Dis used in the special case where the C line is indented and the D line is indented even further (e.g., Alcaic).
The optional jQuery replaces native numbering with a CSS counter that resembles the types of line numbers used in print. It does so by pulling in the start value from the ordered list and performing a calculation (since CSS counters are zero based), and applying a new set of styles.