user profile image

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.

If, for any reason, either JavaScript or CSS doesn't load, the presentation of the poetry will degrade gracefully to reveal the semantic markup, which retains proper line numbering.

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 start attribute. In the absence of CSS and JavaScript, the list of verses will still display with the proper numbers, but we prefer to display line numbers for each fifth line, rather than every line, and that's a presentation issue.


The stylesheet does the following:

  1. It suppresses line numbers so that they may be conditionally revealed as needed.
  2. It reveals the line numbers based on the value of the start attribute (i.e., only lines ending in 5 or 0 will display, regardless of the start number).
  3. It indents even-numbered lines if a poem is composed in couplets, whether the start line is even or odd.
  4. It provides proper indentation for strophes (verse patterns greater than two lines).

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:

  • .verse ensures that every fifth line is numbered
  • .couplet indents even numbered lines

A few more complex classes cover most strophic poetry:

  • .from-B, .from-C, and .from-D, are used with strophes when a passage is quoted from any but the first line in the ABCD pattern.
  • .indent-C and .indent-D are used when either the C or D needs to be indented
  • .indent-C-D is 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.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.