Browse Source

Adds official reference sheet with text entry (#1)

* Adds build documentation

* Adds docs section, woff2 builder
main
Bryan Elliott 3 years ago committed by GitHub
parent
commit
75c8807a99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 19
      README.md
  2. 8
      build.sh
  3. 138
      docs/index.html
  4. BIN
      docs/mawkin_sans.woff2

19
README.md

@ -5,3 +5,22 @@ Mawkin Sans is a self-flipping font.
An example of text can be seen here: An example of text can be seen here:
![The last metroid is in captivity. The galaxy is at peace.](demo.png) ![The last metroid is in captivity. The galaxy is at peace.](demo.png)
## Building
### Prerequisites
* have python3 and imagemagick installed (commands vary per OS)
* Install python scripts:
* `pip3 install fontmake`
* `pip3 install git+https://github.com/silnrsi/pysilfont`
* `python3 -m pip install fonttools[ufo,lxml,woff,unicode]`
### Run builder
This will build the font and generate the title and demo.
```bash
./build.sh
```

8
build.sh

@ -13,3 +13,11 @@ convert -background white -fill black \
convert -background white -fill black \ convert -background white -fill black \
-font './mawkin_sans.otf' -pointsize 60 label:"the last metroid\n. .is in captivity\nthe galaxy\n. .is at peace\n\n\nMawkin\n. .Sans" \ -font './mawkin_sans.otf' -pointsize 60 label:"the last metroid\n. .is in captivity\nthe galaxy\n. .is at peace\n\n\nMawkin\n. .Sans" \
demo.png demo.png
# Convert OTF to WOFF2 for webfont
python3 <<PY
from fontTools.ttLib import TTFont
f = TTFont('mawkin_sans.otf')
f.flavor='woff2'
f.save('docs/mawkin_sans.woff2')
PY

138
docs/index.html

@ -0,0 +1,138 @@
<!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>

BIN
docs/mawkin_sans.woff2

Binary file not shown.
Loading…
Cancel
Save