cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1 class="title">Stikhoi</h1>
<div class="note"><p>This is a method for displaying snippets (or whole poems) in classical Greek and Latin meters on the web, with proper line numbering and indentation. It was originally developed for my blog at <a href="//thecampvs.com" target="_blank">theCAMPVS.com</a>.</p>
<p class="sig">&#8212 Den McHenry</p>
</div>

<hr>

<article>
<h1>Hexameter</h1>
<h2>Vergil, <em>Aeneid</em> 6.845&#8211;50</h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse" start="845"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong> that starts on line <strong>845</strong>.</p>

  <ol class="verse" start="845">
    <li>quo fessum rapitis, Fabii? Tu Maxumus ille es,</li>
    <li>unus qui nobis cunctando restituis rem.</li>
    <li>Excudent alii spirantia mollius aera,</li>
    <li>credo equidem, vivos ducent de marmore voltus,</li>
    <li>orabunt causas melius, caelique meatus</li>
    <li>describent radio, et surgentia sidera dicent:</li>
  </ol>

<h2>Apollonius, <em>Argonautica</em> 1.1&#8211;7</h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong>. (It starts on line 1, but that's assumed by default, so there's no need to specify.)</p>

<ol class="verse">
  <li>Ἀρχόμενος σέο, Φοῖβε, παλαιγενέων κλέα φωτῶν</li>
    <li>μνήσομαι, οἳ Πόντοιο κατὰ στόμα καὶ διὰ πέτρας</li>
    <li>Κυανέας βασιλῆος ἐφημοσύνηι Πελίαο</li>
    <li>χρύσειον μετὰ κῶας ἐύζυγον ἤλασαν Ἀργώ.</li>
    <li>Τοίην γὰρ Πελίης φάτιν ἔκλυεν, ὥς μιν ὀπίσσω</li>
    <li>μοῖρα μένει στυγερή, τοῦδ' ἀνέρος, ὅν τιν' ἴδοιτο</li>
    <li>δημόθεν οἰοπέδιλον, ὑπ' ἐννεσίηισι δαμῆναι.</li>
</ol>

<h1>Elegiac</h1>
<h2>Propertius, <em>Elegiae</em> 3.9.19 &#8211; end</h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse couplet" start="19"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong> arranged in <strong>couplets</strong>. It starts on line <strong>19</strong>.</p>

  <ol class="verse couplets" start="19">
    <li>Nunc sine me sit nulla Venus, sed lege Dianae,</li>
    <li>caste puer, casta retia tange manu:</li>
    <li>et, quaecumque meo furtim subrepit amori,</li>
    <li>incidat in saeuas diripienda feras.</li>
    <li>At tu uenandi studium concede parenti,</li>
    <li>et celer in nostros ipse recurre sinus.</li>
  </ol>

<h2>A.E. Housman, <em>Sodali Meo</em></h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse couplet" start="14"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong> arranged in <strong>couplets</strong>. It starts on line <strong>14</strong>.</p>

<ol class="verse couplets" start="14">
  <li>scriptoris nomen vix tenuere sui.</li>
  <li>non ego mortalem vexantia sidera sortem</li>
  <li>aeternosve tuli sollicitare deos,</li>
  <li>sed cito casurae tactus virtutis amore</li>
  <li>humana volui quaerere nomen ope,</li>
  <li>virque virum legi fortemque brevemque sodalem</li>
  <li>qui titulus libro vellet inesse meo.</li>
  <li>o victure meis dicam periturene chartis,</li>
  <li>nomine sed certe vivere digne tuo,</li>
  <li>haec tibi ad auroram surgentia signa secuto</li>
  <li>hesperia trado munera missa plaga.</li>
  <li>en cape: nos populo venit inlatura perempto</li>
  <li>ossa solo quae det dissoluenda dies</li>
  <li>fataque sortitas non immortalia mentes</li>
  <li>et non aeterni vincla sodalicii.</li>
</ol>

<h1>Sapphic</h1>
<h2>Catullus, <em>carmen</em> 51.9 &#8211; end</h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse indent-D" start="9"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong> that's <strong>indented on line D</strong>. It starts on line <strong>9</strong>.</p>

  <ol class="verse indent-D" start="9">
    <li>lingua sed torpet, tenuis sub artus</li>
    <li>flamma demanat, sonitu suopte</li>
    <li>tintinant aures, gemina teguntur</li>
    <li>lumina nocte.</li>
    <li>otium, Catulle, tibi molestum est:</li>
    <li>otio exsultas nimiumque gestis:</li>
    <li>otium et reges prius et beatas</li>
    <li>perdidit urbes.</li>
  </ol>

<h1>Alcaic</h1>
<h2>Horace, <em>Odes</em> 1.9. 14&#8211;24</h2>

<pre>
  <code><strong>Sample code:</strong> &lt;ol class="verse from-B indent-C-D" start="14"&gt;</code>
</pre>

<p><strong>What the code means:</strong> This is a list of <strong>verse</strong> cited <strong>from line B</strong> of a four line strophe (ABCD). It's <strong>indented on lines C & D</strong>. The quote opens on line <strong>14</strong>.</p>

  <ol class="verse from-B indent-C-D" start="14">
    <li>quem fors dierum cumque dabit, lucro</li>
    <li>adpone nec dulcis amores</li>
    <li>sperne, puer, neque tu choreas,</li>
    <li>donec uirenti canities abest</li>
    <li>morosa. Nunc et Campus et areae</li>
    <li>lenesque sub noctem susurri</li>
    <li>composita repetantur hora,</li>
    <li>nunc et latentis proditor intumo</li>
    <li>gratus puellae risus ab angulo</li>
    <li>pignusque dereptum lacertis</li>
    <li>aut digito male pertinaci.</li>
  </ol>
</article>
            
          
!
            
              /* STIKHOI v.4: CSS for rendering verse snippets
   on the web, with a special eye toward Greek &
   Latin poetry. Use stikhoi.js for prettier numbers.

   Author: Den McHenry
*/

* {
  box-sizing: border-box;
  max-width: 100% !important;
}

body {
  font-family: Times, TimesNewRoman, "Times New Roman", georgia, serif;
  width: 40em;
  margin: 0 auto;
  padding: 0 1em;
  font-size: 1.2em;
  background: rgba(248, 236, 194, .2);
}

.title {
  color: #ddd;
  font-size: 5em;
  margin: .25em 0 0 0;
  text-align: center;
}

h1 {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 3em;
  margin: 1em 0 0 0;
}

h1,
.note,
.signature p {
  font-family: 'avenir next', avenir, helvetica, 'helvetica neue', arial, sans-serif;
}

.note {
  color: #888;
  background: white;
  font-size: smaller;
  width: 25em;
  margin: 0 auto;
  padding: 1em;
  margin-bottom: 3em;
  box-shadow: .1em .1em 1em rgba(0,0,0,.3);
  font-style: italic;
}

.note p {
  margin: 0;
}

.sig {
  text-align: right;
  padding-top: .75em;
}

h2 {
  color: #c00;
  letter-spacing: .025em;
  margin: .5em 0;
}

h2 em {
  font-weight: normal;
}

pre {
  color: #7a7;
  background: #333;
  padding: 1em;
  box-shadow: inset 0 0 .5em #ccc;
  font-family: Consolas, monaco, monospace;
}

pre strong {
  color: #aaa;
}

hr {
  background: rgba(204,0,0,.25);
  max-width: 65%;
  height: 2px;
  border: 0;
}


.signature {
  text-align: center;
  margin: 3.5em 0;
}

.signature p {
  color: #aaa;
  font-size: .68em;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: .2em;
  margin: 0;
  padding: 0;
}

.signature img {
  width: 320px;
  max-width: 50vw;
}

ol {
}

/* STIKHOI begins here */
/* Suppress line numbers. */

ol.verse {
  margin-left: 2em;
  padding-left: 0.5em;
}

ol.verse li {
  list-style-type: none;
  padding: 0.1em 0;
}
/* Reveal line numbers conditionally based
	on the value of the start attribute. */

[start$="1"] li:nth-child(5n),
[start$="2"] li:nth-child(5n+4),
[start$="3"] li:nth-child(5n+3),
[start$="4"] li:nth-child(5n+2),
[start$="5"] li:nth-child(5n+1),
[start$="6"] li:nth-child(5n),
[start$="7"] li:nth-child(5n+4),
[start$="8"] li:nth-child(5n+3),
[start$="9"] li:nth-child(5n+2),
[start$="0"] li:nth-child(5n+1) {
  list-style-type: decimal;
}
/* Indent even numbered lines. */

[start$="1"].couplets li:nth-child(2n),
[start$="2"].couplets li:nth-child(2n+1),
[start$="3"].couplets li:nth-child(2n),
[start$="4"].couplets li:nth-child(2n+1),
[start$="5"].couplets li:nth-child(2n),
[start$="6"].couplets li:nth-child(2n+1),
[start$="7"].couplets li:nth-child(2n),
[start$="8"].couplets li:nth-child(2n+1),
[start$="9"].couplets li:nth-child(2n),
[start$="0"].couplets li:nth-child(2n+1) {
  text-indent: 1em;
}
/* STROPHES */
/* Proper indentation for strophes. This varies depending
	upon which line in the pattern begins the citation.
	Lines within a strophe are given letters: A, B, C, & D. */

ol:not(.from-B):not(.from-C).indent-C li:nth-child(3n+3),
.from-B.indent-C li:nth-child(3n+2),
.from-C.indent-C li:nth-child(3n+1),
ol:not(.from-B):not(.from-C):not(.from-D).indent-D li:nth-child(4n+4),
.from-B.indent-D li:nth-child(4n+3),
.from-C.indent-D li:nth-child(4n+2),
.from-D.indent-D li:nth-child(4n+1) {
  text-indent: 1em;
  padding-bottom: 1em;
}

ol:not(.from-B):not(.from-C).indent-C-D li:nth-child(4n+3),
.from-B.indent-C-D li:nth-child(4n+2),
.from-C.indent-C-D li:nth-child(4n+1),
.from-D.indent-C-D li:nth-child(4n) {
  text-indent: 1em;
}

ol:not(.from-B):not(.from-C):not(.from-D).indent-C-D li:nth-child(4n+4),
.from-B.indent-C-D li:nth-child(4n+3),
.from-C.indent-C-D li:nth-child(4n+2),
.from-D.indent-C-D li:nth-child(4n+1) {
  text-indent: 2em;
  padding-bottom: 1em;
}
/* JAVASCRIPT-DEPENDENT STYLES */
/* A CSS counter that replaces the native
   numbering of ordered lists. */
/* Conceal line numbers in each ordered list. */

ol.verse.jQuery li {
  list-style-type: none;
}
/* Replace the OL with a CSS counter. */

ol.verse.jQuery {
  counter-reset: poem;
  display: inline-block;
}
/* Each line item is counted. */

ol.verse.jQuery li {
  counter-increment: poem;
}
/* Prepare to display the counter after each line. */

ol.verse.jQuery li:after {
  content: counter(poem);
  float: right;
  padding-left: 3em;
  color: #666;
  font-size: 0.8em;
  padding-top: 0.2em;
}
/* Suppress the counter. */

ol.verse.jQuery li:after,
ol.verse.jQuery li:after {
  visibility: hidden;
}
/* Reveal counter where appropriate. */

[start$="1"].jQuery li:nth-child(5n):after,
[start$="2"].jQuery li:nth-child(5n+4):after,
[start$="3"].jQuery li:nth-child(5n+3):after,
[start$="4"].jQuery li:nth-child(5n+2):after,
[start$="5"].jQuery li:nth-child(5n+1):after,
[start$="6"].jQuery li:nth-child(5n):after,
[start$="7"].jQuery li:nth-child(5n+4):after,
[start$="8"].jQuery li:nth-child(5n+3):after,
[start$="9"].jQuery li:nth-child(5n+2):after,
[start$="0"].jQuery li:nth-child(5n+1):after {
  visibility: visible;
}
            
          
!
            
              // jQuery. For use with stikhoi.css to improve the
// appearance of line numbers in classical verse.

$(document).ready(function(){
  $("ol.verse").addClass('jQuery').each(function() {
    $('ol.verse').not('[start]').attr('start', '1');
    var start = $(this).attr('start');
    $(this).attr(
      { style: "counter-reset: poem " + (start - 1)  || '1'}
    );
  });
});
            
          
!
999px
Loading ..................

Console