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

Go to file
 
 
Cannot retrieve contributors at this time
172 lines (156 sloc) 6.54 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Ligatour • Phoenician Translation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Phoenician Transliteration">
<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>
<script src="https://kit.fontawesome.com/5e541f73d9.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Egyptian+Hieroglyphs&family=Noto+Sans+Phoenician&display=swap" rel="stylesheet">
<style>
.slab {
margin-top: 2rem;
background-color: #F0633726;
padding: 2rem;
}
#phoenician {
font-family: 'Noto Sans Phoenician', sans-serif;
}
.controls {
border: 2px solid #ccccca;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
padding: 2rem;
gap: 1rem
}
#submit {
background-color: var(--tomato);
-webkit-appearance: none;
border: 0;
color: white;
padding: 1rem;
margin-right: auto;
}
</style>
</head>
<body>
<span class="sr-only">Warning! This app is visually heavy as allows a user to scale a letter and examine the details of form and counterform.</span>
<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" aria-pressed="false">
<div class="nav--meta">
<i class="fas fa-bars"></i>
<h1>Phoenician Translation</h1>
</div>
<a href="index.html" id="return" style="margin-bottom: 20px">« Return to lessons</a>
</nav>
<main id="content">
<h1>Phoenician Translation</h1>
<p>This tool will translate any text into Phoenician! Actually, this is <strong>transliterating</strong>: each character input is converted to its Phoenician ancestor. <em>A</em> becomes <em>aleph</em>, <em>B</em> becomes <em>bet</em>, and so on. Spaces and punctuation will be ignored as <a href="letterform-development">Phoenician didn't have those characters.</a> Your message will also appear "mirrored" as Phoenician was written right-to-left.</p>
<form class="controls">
<label for="text">Type in any text: </label>
<input type="text" id="text">
<input type="submit" value="Submit" id="submit">
</form>
<div class="slab">
<p id="phoenician" dir="rtl" style="word-wrap: anywhere;"></p>
</div>
</main>
<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">
</aside>
<script>
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: '𐤆',
" ": '',
// ".": '',
",": '',
"-": '',
"\"": '',
"\'": '',
}
// 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;
};
document.querySelector("#submit").addEventListener('click', writeTransliteration);
function writeTransliteration(e) {
e.preventDefault();
let message = document.querySelector("input#text").value;
message = message.toLowerCase();
message = message.replace(/[0-9]/g, '');
message = message.split('.').join("");
if (message != null) {
document.getElementById("phoenician").innerHTML = transliterate(message, phoenician);
} else {
document.getElementById("phoenician").innerHTML = "You need to enter text!"
}
}
</script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/nav.js"></script>
</body>
</html>