Skip to content

Instantly share code, notes, and snippets.

@gorbiz
Last active February 18, 2016 12:10
Show Gist options
  • Select an option

  • Save gorbiz/d55ed8c9a7c0c2487a39 to your computer and use it in GitHub Desktop.

Select an option

Save gorbiz/d55ed8c9a7c0c2487a39 to your computer and use it in GitHub Desktop.
Interactive Latin book...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>latin2</title>
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
</head>
<body>
<ol class="evolving-header">
<!-- CONSIDER: A phrase with J & U in it, to get a chance to mention that they don't exist yet (perhaps also a W-sound). -->
<!-- <li>
TODO Write in https://en.wikipedia.org/wiki/Roman_cursive first
</li> -->
<li>
<p class="hand-written">DICOSALVE</p>
<p class="comment">
These are <mark>Rustic capitalis</mark>, the likes you might find in (fairly well written?) papyrus from ? BCE -- ? CE (in Roman aristocracy / high society(?)).
<!-- TODO: Add photo of rustic writing -->
</p>
</li>
<li>
<p class="hand-written">DICO·SALVE</p>
<p class="comment">
Let’s add a word divider; an <mark>interpunct</mark>.<br>
Common in classical Latin, but fell out of use ~200 CE.
</p>
</li>
<li>
<p class="hand-written">DICO SALVE</p>
<p class="comment">
<mark>Spaces</mark> was used by students in learning (to differentiate words?), but was <mark>considered childish</mark>
</p>
</li>
<li>
<p class="inscription">DICO·SALVE</p>
<p class="comment">
Inscriptions often used <mark>Roman square capitals</mark>.<br>
See: inscriptions on Pantheon &amp; Trajan's Column.</p>
<!-- TODO: Add photo of an inscription -->
</li>
<li>
<p>Dico Salve</p>
<p class="comment">
Lower case wasn't around for more than 1 000 years...
</p>
</li>
<li>
<p>Dico: “Salve!”</p>
<p class="comment">
Colon, quotation marks &amp; exclamatn mark, ...also new.
</p>
</li>
<li>
<p>Dīcō: “Salvē!”</p>
<p class="comment">
While we are at it; macrons showsus where to put the stress.
</p>
</li>
</ol>
<section>
TODO: Go on to describe etymology / cognates to make the actual words understandable.
</section>
</body>
</html>
@font-face {
font-family: 'Roman Rustica';
src: url('https://dl.dropboxusercontent.com/u/7449985/fonts/Roman-Rustica.ttf');
}
body {
background: #ffe;
color: #222;
}
p { font-family: serif; }
.hand-written { font-family: 'Roman Rustica'; }
.inscription { font-family: 'Cinzel'; }
.evolving-header { font-size: 1.25em; }
.evolving-header .comment {
}
.evolving-header li .comment {
background: wheat;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
padding: 0.5em;
font-size: 0.8em;
margin-right: 1em;
}
@gorbiz

gorbiz commented Feb 18, 2016

Copy link
Copy Markdown
Author

Make these huge?
Each variant ~fills a screen?
-- get the proper focus from the Educon!

  • Let's do it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment