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/projection.html

Go to file
 
 
Cannot retrieve contributors at this time
284 lines (252 sloc) 9.44 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Ligatour • Projection Screen</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Projection Screen">
<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">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Egyptian+Hieroglyphs&family=Noto+Sans+Phoenician&display=swap" rel="stylesheet">
<style>
:root {
--document-point-size: 2.5rem;
}
html {
cursor: none;
background-color: black;
}
body {
padding-top: 0;
}
main {
max-width: 70vw; margin: 0 0 0 auto;
}
h1, main > p {
color: white;
}
.slab {
background: url(img/slab.png) no-repeat;
background-size: 100% 100%;
padding: 3rem 6rem;
}
.slab > * {
margin-bottom: 1em;
word-break: break-all;
}
#egyptian {
font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
}
#phoenician {
font-family: 'Noto Sans Phoenician', sans-serif;
}
#greek {
font-family: 'Noto Sans', sans-serif;
}
.qr {
filter: invert(1)
}
</style>
</head>
<body></body>
<main>
<h1 style="font-size: 5rem; text-transform: capitalize; margin: 0 2rem 0 0; display: inline;">Ligatour</h1>
<p style="display: inline;"><span style="font-size: 1.5rem; padding-bottom: 2rem;">A tour of typography's history.</span></p>
<div class="slab">
<p id="egyptian">Egyptian</p>
<p id="phoenician">Phoenician</p>
<p id="greek">Greek</p>
<p id="roman" style="word-break: keep-all;">Roman</p>
</div>
<div class="qr" style="margin-top: 2rem">
<p style="font-size: 1.1em;">Scan this QR code to translate your own message here.</p>
<img src="img/qr-code.png" alt="" style="max-width: 150px; margin-left: 0;">
</div>
</main>
<script>
const egyptian = {
a: '𓄀',
b: '𓉐',
c: '𓌙',
d: '𓆛',
e: '𓀠',
f: '',
g: '',
h: '𓈈',
i: '𓂝',
j: '',
k: '𓂧',
l: '𓋿',
m: '𓈖',
n: '𓆓',
o: '𓁹',
p: '𓂋',
q: '𓎗',
r: '𓁶',
s: '',
t: '',
u: '',
v: '',
w: '',
x: '',
y: '',
z: '',
" ": '',
// ".": '',
",": '',
"-": '',
}
const phoenician = {
a: '𐤀',
b: '𐤁',
c: '𐤂',
d: '𐤃',
e: '𐤄',
f: '𐤍',
g: '',
h: '𐤇',
i: '𐤉',
j: '',
k: '𐤊',
l: '𐤋',
m: '𐤌',
n: '𐤍',
o: '𐤏',
p: '𐤐',
q: '𐤒',
r: '𐤓',
s: '',
t: '𐤕',
u: '',
v: '',
w: '',
x: '',
y: '𐤅',
z: '𐤆',
" ": '',
// ".": '',
",": '',
"-": '',
}
const greek = {
a: 'A',
b: 'B',
c: 'Γ',
d: 'Δ',
e: 'E',
f: 'F',
g: '',
h: 'H',
i: 'I',
j: '',
k: 'K',
l: 'L',
m: 'M',
n: 'N',
o: 'O',
p: 'Π',
q: 'Ϙ',
r: 'P',
s: '',
t: 'T',
u: 'Y',
v: 'Y',
w: 'Y',
x: 'X',
y: 'Y',
z: 'Z',
" ": '',
// ".": '',
",": '',
"-": '',
}
// https://medium.com/digital-linguistics/transliteration-in-javascript-99d306996752
function transliterate(string, substitutions) {
// save the string to a new variable for readability
let str = string;
// remove punctuation
str = str.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
// get the list of substitutions
Object.entries(substitutions)
// for each substitution...
.forEach(([input, replacement]) => {
// create a regular expression that searches globally for the string to replace
const regexp = new RegExp(input, 'gu');
// then replace all matched instances of the regular expression with the new string
str = str.replace(regexp, replacement);
});
// return the string with the substitutions made
return str;
};
// Formspree ignores the username, but expects the password to be either the master key or public API key for your form.
let authString = 'foo:d48727ad6bb6cd3856fbee3126c71da00d3526a9';
let headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(authString))
setInterval(function () {
console.log('Fetch GET ran');
fetch('https://formspree.io/api/0/forms/xjvlwwnd/submissions?limit=1', {
method: 'GET',
headers: headers,
body: JSON.stringify()
})
.then((response) => response.json())
.then((submissions) => {
// parse the date of the most recent submission
let subDate = Math.floor(Date.parse((submissions.submissions[0]._date)) / 1000);
// calculate how many seconds it's been since submission
let seconds = Math.floor(((new Date().getTime() / 1000) - subDate));
console.log("seconds since last submission: " + seconds);
// If it was less than two minutes ago, display the message
if (seconds < 120) {
let message = submissions.submissions[0].message;
if (message != null) {
let mesLower = message.toLowerCase().substring(400, length);
document.getElementById("egyptian").innerHTML = transliterate(mesLower, egyptian);
document.getElementById("phoenician").innerHTML = transliterate(mesLower, phoenician);
document.getElementById("greek").innerHTML = transliterate(mesLower, greek);
document.getElementById("roman").innerHTML = message;
}
} else {
writeTransliteration('Ligatour is a browser-based application to learn about typography. In this prototype, three lessons are built out, and the table of lessons contains possible lessons to be built. The focus of Ligatour is to teach typographic concepts using interactive, self-guided learning rooted in the historical order and context of typography.');
}
});
}, 15000);
// https://medium.com/digital-linguistics/transliteration-in-javascript-99d306996752
function transliterate(string, substitutions) {
// save the string to a new variable for readability
let str = string;
// get the list of substitutions
Object.entries(substitutions)
// for each substitution...
.forEach(([input, replacement]) => {
// create a regular expression that searches globally for the string to replace
const regexp = new RegExp(input, 'gu');
// then replace all matched instances of the regular expression with the new string
str = str.replace(regexp, replacement);
});
// return the string with the substitutions made
return str;
};
function writeTransliteration(message) {
if (message != null) {
let mesLower = message.toLowerCase().substring(400, length);
document.getElementById("egyptian").innerHTML = transliterate(mesLower, egyptian);
document.getElementById("phoenician").innerHTML = transliterate(mesLower, phoenician);
document.getElementById("greek").innerHTML = transliterate(mesLower, greek);
document.getElementById("roman").innerHTML = message;
}
}
</script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
</body>
</html>