Adds official reference sheet with text entry (#1)

* Adds build documentation * Adds docs section, woff2 builder
3 years ago · 75c8807a99
4 changed files with 165 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -5,3 +5,22 @@ Mawkin Sans is a self-flipping font.
				@@ -5,3 +5,22 @@ Mawkin Sans is a self-flipping font.
 An example of text can be seen here:

 ![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
+```
+
--- a/build.sh
+++ b/build.sh
@ -13,3 +13,11 @@ convert -background white -fill black \
				@@ -13,3 +13,11 @@ 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" \
          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
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,138 @@
				@@ -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>
--- a/docs/mawkin_sans.woff2
+++ b/docs/mawkin_sans.woff2