You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.7 KiB
138 lines
3.7 KiB
3 years ago
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
<head>
|
||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
||
|
<style type="text/css">
|
||
|
@font-face {
|
||
|
font-family: 'mawkin_sansregular';
|
||
|
src: url('./mawkin_sans.woff2') format('woff2');
|
||
|
font-weight: normal;
|
||
|
font-style: normal;
|
||
|
}
|
||
|
html, body, div, span, applet, object, iframe,
|
||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||
|
a, abbr, acronym, address, big, cite, code,
|
||
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||
|
small, strike, strong, sub, sup, tt, var,
|
||
|
b, u, i, center, dl, dt, dd, ol, ul, li,
|
||
|
fieldset, form, label, legend, table,
|
||
|
caption, tbody, tfoot, thead, tr, th, td
|
||
|
{margin: 0;padding: 0;border: 0;outline: 0;
|
||
|
font-size: 100%;vertical-align: baseline;
|
||
|
background: transparent;}
|
||
|
body {line-height: 1;}
|
||
|
ol, ul {list-style: none;}
|
||
|
blockquote, q {quotes: none;}
|
||
|
blockquote:before, blockquote:after,
|
||
|
q:before, q:after {content: ''; content: none;}
|
||
|
:focus {outline: 0;}
|
||
|
ins {text-decoration: none;}
|
||
|
del {text-decoration: line-through;}
|
||
|
table {border-collapse: collapse;border-spacing: 0;}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
body {
|
||
|
color: #000;
|
||
|
background-color: #dcdcdc;
|
||
|
}
|
||
|
|
||
|
|
||
|
#container {
|
||
|
width: 865px;
|
||
|
margin: 0px auto;
|
||
|
}
|
||
|
|
||
|
|
||
|
#main_content {
|
||
|
background-color: #fff;
|
||
|
padding: 20px 20px 20px;
|
||
|
}
|
||
|
#mawkin {
|
||
|
font-family: 'mawkin_sansregular';
|
||
|
}
|
||
|
#transcript, #mawkin {
|
||
|
width: 100%;
|
||
|
height: 4em;
|
||
|
font-size: 24pt;
|
||
|
}
|
||
|
#specimen {
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
flex-direction: row;
|
||
|
}
|
||
|
glyph {
|
||
|
flex: 0 0 auto;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
text-align: center;
|
||
|
margin-bottom: 1em;
|
||
|
font-size: 12pt;
|
||
|
}
|
||
|
glyph:before {
|
||
|
content: '.' attr(map);
|
||
|
width: 75pt;
|
||
|
font-family: 'mawkin_sansregular';
|
||
|
font-size: 72pt;
|
||
|
padding: 0 0 0.125em;
|
||
|
}
|
||
|
glyph:after {
|
||
|
content: attr(map);
|
||
|
font-family: Arial;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<title>Mawkin Sans Reference</title>
|
||
|
</head>
|
||
|
|
||
|
<body>
|
||
|
<div id="container">
|
||
|
<div id="main_content">
|
||
|
<div id="specimen">
|
||
|
|
||
|
<glyph map="A"></glyph>
|
||
|
<glyph map="B"></glyph>
|
||
|
<glyph map="C"></glyph>
|
||
|
<glyph map="D"></glyph>
|
||
|
<glyph map="E"></glyph>
|
||
|
<glyph map="F"></glyph>
|
||
|
<glyph map="G"></glyph>
|
||
|
<glyph map="H"></glyph>
|
||
|
<glyph map="I"></glyph>
|
||
|
<glyph map="J"></glyph>
|
||
|
<glyph map="K"></glyph>
|
||
|
<glyph map="L"></glyph>
|
||
|
<glyph map="M"></glyph>
|
||
|
<glyph map="N"></glyph>
|
||
|
<glyph map="O"></glyph>
|
||
|
<glyph map="P"></glyph>
|
||
|
<glyph map="Q"></glyph>
|
||
|
<glyph map="R"></glyph>
|
||
|
<glyph map="S"></glyph>
|
||
|
<glyph map="T"></glyph>
|
||
|
<glyph map="U"></glyph>
|
||
|
<glyph map="V"></glyph>
|
||
|
<glyph map="W"></glyph>
|
||
|
<glyph map="X"></glyph>
|
||
|
<glyph map="Y"></glyph>
|
||
|
<glyph map="Z"></glyph>
|
||
|
</div>
|
||
|
<textarea id="transcript"></textarea>
|
||
|
<textarea readonly id="mawkin"></textarea>
|
||
|
</div>
|
||
|
</div>
|
||
|
<script>
|
||
|
(() => {
|
||
|
const [transcript, mawkin] = ['transcript', 'mawkin'].map(id => document.getElementById(id));
|
||
|
transcript.value = mawkin.value = localStorage.getItem('lastValue');
|
||
|
transcript.addEventListener('keyup', () => {
|
||
|
localStorage.setItem('lastValue', mawkin.value = transcript.value);
|
||
|
});
|
||
|
})();
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|