Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

typography/capitals-transition.html

Go to file
 
 
Cannot retrieve contributors at this time
387 lines (350 sloc) 17.8 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Capitals transition to rustic capitals</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Capital Transition to Rustic Capitals">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png"><!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/deck.css">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/5e541f73d9.js" crossorigin="anonymous"></script>
<script>const subsections = ["Find Handwritten Letters", "Rustic Capitals", "The Grid and Order of Rustics", "How Were Rustics Used?"];</script>
<!-- Preloads -->
<style>
.deck .card.disabled {
opacity: 0.3;
}
.deck .card.match {
border-color: green;
opacity: 1;
}
.deck .card.unmatched {
border-width: 3px;
}
#overlay--rustic .imgSet {
position: relative;
padding-top: 50%;
overflow: hidden;
}
#overlay--rustic img {
top: 0;
position: absolute;
transition: transform 0.7s ease-in, opacity 0.3s ease-in;
transform-origin: top left;
}
.imgSet.zoom img {
transform: scale(3);
}
</style>
</head>
<body class="preload">
<a href="#accessibility-settings" class="sr-only">Jump to accessibility settings</a>
<a href="#content" class="sr-only">Jump to content</a>
<nav class="lesson">
<div class="nav--meta open-toggle" aria-pressed="false">
<i class="fas fa-bars"></i>
<h1>Capitals Transition • <span id="steps--currentName">Subsection Name</span></h1>
<ul id="steps--dots">
<li class="step--seen"></li>
<li class="step--unseen"></li>
<li class="step--unseen"></li>
<li class="step--unseen"></li>
</ul>
</div>
<a href="index.html" id="return">« Return to lessons</a>
<ul id="steps--list">
<li class="step--seen"><a></a></li>
<li class="step--unseen"><a></a></li>
<li class="step--unseen"><a></a></li>
<li class="step--unseen"><a></a></li>
</ul>
</nav>
<main class="steps" id="content">
<div class="step show noanim section" id="subsection1">
<!-- Step 1 -->
<div class="activity">Activity</div>
<h2>Choose the letterforms written by hand.</h2>
<div class="card-game">
<div class="feedback inset hidden"></div>
<ul class="deck random" id="card-deck">
<li class="card" type="monumental" tabindex="0">
<img src="img/rustic-capitals/rustic-1.png" alt="">
</li>
<li class="card" type="monumental" tabindex="0">
<img src="img/rustic-capitals/rustic-2.png" alt="">
</li>
<li class="card" type="monumental" tabindex="0">
<img src="img/rustic-capitals/rustic-3.png" alt="">
</li>
<li class="card" type="monumental" tabindex="0">
<img src="img/rustic-capitals/rustic-4.png" alt="">
</li>
<li class="card" type="rustic" tabindex="0">
<img src="img/rustic-capitals/rustic-5.png" alt="">
</li>
<li class="card" type="rustic" tabindex="0">
<img src="img/rustic-capitals/rustic-6.png" alt="">
</li>
<li class="card" type="rustic" tabindex="0">
<img src="img/rustic-capitals/rustic-7.png" alt="">
</li>
<li class="card" type="rustic" tabindex="0">
<img src="img/rustic-capitals/rustic-8.png" alt="">
</li>
</ul>
</div>
</div>
<button class="next hidden" id="advance--past-match">»</button>
<div class="step">
<h2>Rustic Capitals</h2>
<figure><img src="img/rustic-capitals/capitals-comparison.jpg" alt=""></figure>
<p>You can tell the difference between constructed letterforms and handwritten letterforms. The look of letterforms changes with the technology used to form a letter.</p>
</div>
<button class="next step--major">See more about these handwritten Roman letters</button>
<!-- Step 2 -->
<div class="step section" id="subsection2">
<figure><img src="img/rustic-capitals/rustic-ex.png" alt="Rustic capitals example"></figure>
<p>This image is an example of what are called <em>rustic capitals</em> (<span class="tooltipTrigger" aria-describedby="rusticLatin" tabindex="0">Latin: littera capitalis rustica <i class="fas fa-info-circle"></i></span>).
<span class="popover" id="rusticLatin">literally rural capital letter</span>
</div>
<button class="next">Next step</button>
<div class="step">
<p>Writing capitals in stone (<span class="tooltipTrigger" aria-describedby="capitalLatin" tabindex="0">Latin: capitalis monumentalis <i class="fas fa-info-circle"></i></span>) lends itself to geometric letterforms. As writing evolves, the same letters written by ink and pen soften and become rounded due to the organic nature of their creation.</p>
<span class="popover" id="capitalLatin">literally monumental capitals</span>
<!-- <img src="img/chistle-pen.png" alt="Visual example of both a chistle and pen"> -->
<video src="video/rustic-cap-angle.mp4" controls autoplay loop muted style="margin-bottom: 2rem;"></video>
<p>Writing with a pen is much quicker than stone carving. To speed the process even more, the flat tip brush is held at a consistent angle for every stroke. The technology influences the style. Thousands of years later, this style is still with us, as consistently angle strokes is how most calligraphy is done today.</p>
</div>
<button class="next">Next step</button>
<div class="step">
<!-- <p>TK animation of sourced comparison of stone capital letter size ratio to rustic capital</p> -->
<p>Concerns about a resource may also cause the form of letters to change. In the ancient world, parchment or papyrus was rare and sometimes difficult to obtain. The condensed width of rustic capital letterforms meant a writer could fit anywhere from 25% to 50% more writing in the same space over using capitalis monumentalis.</p>
</div>
<button class="next step--major">See similarities and differences between types of capitals</button>
<!-- Step 3 -->
<div class="step section" id="subsection3">
<div class="activity">Activity</div>
<h2>Examine the grid and stroke order of rustic capitals.</h2>
<label for="overlay--lines">Overlay grid lines</label>
<input type="checkbox" id="overlay--lines" autocomplete="off"><br>
<label for="overlay--stroke-order">Overlay stroke order</label>
<input type="checkbox" id="overlay--stroke-order" autocomplete="off">
<section class="overlay" id="overlay--rustic" style="margin: 2rem 0;">
<div class="imgSet">
<img src="img/rustic-capitals/overlay-base.jpg" class="base" alt="">
<img src="img/rustic-capitals/overlay-lines.png" alt="" class="opacity-none">
<img src="img/rustic-capitals/overlay-strokes.png" alt="" class="opacity-none">
</div>
</section>
<p>Square capitals and rustic capitals still have huge similarities. Rustic capitals continue to fully fit between two lines, the letterform taking up the whole space.</p>
<p>However, with the technological change to pen and ink, the stroke order and stroke direction is important in a way it was not in stone.</p>
</div>
<button class="next step--major">Not all ancient writing was in rustic capitals</button>
<!-- Step 4 -->
<div class="step section" id="subsection4">
<h2>How Were Rustics Used?</h2>
<figure>
<img src="img/rustic-capitals/virgil.jpg" alt="Scan of the Vatican Virgil manuscript using rustic capitals">
<figcaption>Rustic capitals are used in this manuscript known as the Vergilius Vaticanus or Vatican Virgil, from 400 AD. It's a rare surviving example of an ancient manuscript written using rustic capitals. Because books of this nature were so rare, this manuscript is thought to have been made for a wealthy noble. <a href="https://digi.vatlib.it/mss/detail/210481">Source</a></figcaption>
</figure>
<p>Rustic capitals were a handwritten script, comparable to our modern calligraphy. They were not often used for day-to-day writing, but used in official documents or books. Rustic capitals likely began to be used around the 1st century AD and were in regular use until around 700 AD.</p>
</div>
<button class="next">Next step</button>
<aside id="complete" class="step bg-confetti">
<h1>Lesson complete</h1>
<h2>To review:</h2>
<ul>
<li>Letterforms change form when the tools used to create them changes.</li>
<li>When Romans began to write letterforms with pen and ink instead of on stone carvings, the letters became condensed. These are called <em>rustic capitals</em>.</li>
</ul>
</aside>
</main>
<!-- Accessibility options -->
<aside class="accessibility" id="accessibility-settings">
<div class="open-toggle" aria-label="Accessibility panel open button" role="button" aria-pressed="false" tabindex="0"><i class="fas fa-universal-access"></i></div>
<h1>Accessibility settings</h1>
<label for="font-style">Font style:</label>
<select name="font-style" id="font-style" autocomplete="off" style="margin-bottom: 1rem;">
<option value="">Default</option>
<option value="opendyslexic">OpenDyslexic</option>
<option value="lato">Lato</option>
<option value="verdana">Verdana</option>
</select>
<label for="high-contrast">High contrast:</label>
<input type="checkbox" name="high-contrast" id="high-contrast" autocomplete="off">
<button style="margin-top: 1rem;" id="print">Print lesson</button>
</aside>
<style>
/* Override deck.css since it doesn't make sense here */
.deck .card.match::after {
content: none;
}
</style>
<script>
let overlayRustic = document.getElementById('overlay--rustic').children[0];
// Feedback result
let feedback = document.querySelector(".feedback");
function feedbackResult(type, feedbackContent, timeOut) {
feedback.classList.add(type);
feedback.innerHTML = feedbackContent;
feedback.classList.toggle('hidden');
if (timeOut !== undefined) {
setTimeout(function () {
feedback.innerHTML = "";
feedback.classList.remove(type);
feedback.classList.toggle('hidden');
}, timeOut);
}
}
document.getElementById('overlay--lines').addEventListener("change", overlayLines);
document.getElementById('overlay--stroke-order').addEventListener("change", overlayStrokeOrder);
function overlayLines() {
overlayRustic.children[1].classList.toggle('opacity-none');
}
function overlayStrokeOrder() {
overlayRustic.children[2].classList.toggle('opacity-none');
overlayRustic.classList.toggle('zoom');
}
// cards array holds all cards
let card = document.getElementsByClassName("card");
let cards = [...card];
// deck of all cards in game
const deck = document.getElementById("card-deck");
// Variable to measure matched cards
let matchedCount = 0;
// @description shuffles cards
// @param {array}
// @returns shuffledarray
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
// @description shuffles cards when page is refreshed / loads
document.body.onload = startGame();
// @description function to start a new play
function startGame() {
// empty the openCards array
openedCards = [];
// shuffle deck
cards = shuffle(cards);
// remove all exisiting classes from each card
for (var i = 0; i < cards.length; i++) {
deck.innerHTML = "";
[].forEach.call(cards, function (item) {
deck.appendChild(item);
});
cards[i].classList.remove("show", "open", "match", "disabled");
}
}
// @description add opened cards to OpenedCards list and check if cards are match or not
function cardOpen(e) {
if (a11yClick(e) === true) {
openedCards.push(this);
// Is this a rustic capital?
if (openedCards[0].type !== 'rustic') {
unmatched();
feedbackResult('negative', 'Nope! This is a stone-carved capital.<br>', 3000)
return;
} else {
matched(e);
}
openedCards = [];
}
};
// @description when cards match
function matched(e) {
openedCards[0].classList.add("match", "disabled");
openedCards[0].setAttribute("tabindex", "-1");
openedCards[0].classList.remove("show", "open", "no-event");
// Move focus to the next card if using the keyboard, otherwise remove focus entirely.
if (e.type !== 'click') {
openedCards[0].nextSibling.focus();
} else {
openedCards[0].blur();
}
matchedCount++;
openedCards = [];
}
// description when cards don't match
function unmatched() {
openedCards[0].classList.add("unmatched");
setTimeout(function () {
openedCards[0].classList.remove("show", "open", "no-event", "unmatched");
openedCards = [];
}, 1100);
}
// Check if the experiment is finished
function congratulations(e) {
if (a11yClick(e) === true) {
if (matchedCount === 4) {
feedbackResult('positive', 'You got them all!');
for (var i = 0; i < cards.length; i++) {
cards[i].classList.add('disabled');
cards[i].setAttribute("tabindex", "-1");
}
document.getElementById("advance--past-match").classList.remove("hidden");
document.getElementById("advance--past-match").focus();
}
}
}
// loop to add event listeners to each card
for (var i = 0; i < cards.length; i++) {
card = cards[i];
card.addEventListener("click", cardOpen);
card.addEventListener("click", congratulations);
card.addEventListener("keydown", cardOpen);
card.addEventListener("keydown", congratulations);
card.addEventListener('keydown', keyboardMove);
};
function focusCheckNext(inputDiv) {
if (inputDiv.classList.contains('disabled')) {
//console.log(inputDiv.nextSibling);
focusCheckNext(inputDiv.nextSibling);
} else {
inputDiv.focus();
}
}
function focusCheckPrev(inputDiv) {
if (inputDiv.classList.contains('disabled')) {
console.log(inputDiv.previousSibling);
focusCheckPrev(inputDiv.previousSibling);
} else {
inputDiv.focus();
}
}
function keyboardMove(e) {
e.preventDefault();
if (e.keyCode === 39) {
focusCheckNext(this.nextSibling);
} else if (e.keyCode === 37) {
focusCheckPrev(this.previousSibling);
} else if (e.keyCode === 38) {
this.previousSibling.previousSibling.previousSibling.previousSibling.focus();
} else if (e.keyCode === 40) {
this.nextSibling.nextSibling.nextSibling.nextSibling.focus();
}
}
</script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/nav.js"></script>
<script src="js/lesson.js"></script>
<script src="js/main.js"></script>
</body>
</html>