STIKHOI

Developer
Den McHenry
Size
7,122 Kb
Views
18,216
  1. STIKHOI Previews
  2. STIKHOI HTML Codes
  3. STIKHOI CSS Codes
  4. STIKHOI JS Codes

How do I make an stikhoi?

STIKHOI: Displaying Greek & Latin Verse on the WebThis 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.. What is a stikhoi? How do you make a stikhoi? This script and codes were developed by Den McHenry on 02 November 2022, Wednesday.

STIKHOI Previews
IQ Test

STIKHOI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>STIKHOI</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

STIKHOI - Script Codes CSS Codes

/* 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;
}

STIKHOI - Script Codes JS Codes

// 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'} ); });
});
STIKHOI - Script Codes
STIKHOI - Script Codes
Home Page Home
Developer Den McHenry
Username denmch
Uploaded November 02, 2022
Rating 3
Size 7,122 Kb
Views 18,216
Do you need developer help for STIKHOI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Den McHenry (denmch) Script Codes
Name
Pomodoro Timer
Boredom
Drawing a Face in Pure HTML
Responsive ecommerce banner
Nervous Morty
Perfectly Scaling Page Header
Wikipedia Search and Previewer
Updating CSS Variables with JS
A Facelift for Camper News
Simon
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!