Add REPL with font selection to fonts page

author: Marshall Lochbaum <mwlochbaum@gmail.com> 2020-11-15 16:26:40 -0500
committer: Marshall Lochbaum <mwlochbaum@gmail.com> 2020-11-15 16:26:40 -0500
commit: 8e9ee17eac0b28c74f6cd684828d0b5e213af7e3 (patch)
tree: d0132419afc6a5db8a09274bdbb597e6c3c9180e
parent: 423aa3c68969135f47a0866a7bd7a89c2a29ff22 (diff)
1 files changed, 62 insertions, 13 deletions
diff --git a/docs/fonts.html b/docs/fonts.html
index 4d9b3e61..d68ec5a0 100644
--- a/docs/fonts.html
+++ b/docs/fonts.html
@@ -6,16 +6,37 @@
   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
   <link href="style.css" rel="stylesheet"/>
   <style>
-    table { margin: 0.4em auto; }
-    div.right { text-align: right; }
-    span.ul { text-decoration: underline; }
+    pre.DejaVu , .DejaVu  *:not(.run) { font-family:BQN,monospace; }
+    pre.BQN386 , .BQN386  *:not(.run) { font-family:BQN386,monospace; }
+    pre.Julia  , .Julia   *:not(.run) { font-family:JuliaMono,monospace; }
+    pre.Fairfax, .Fairfax *:not(.run) { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; }
+    .Fairfax .kb { line-height:1.25; }
+
+    table { margin:0.4em auto; }
+    div.right { text-align:right; }
+    span.ul { text-decoration:underline; }
+
+    textarea { padding:0.2em; }
+    .cont { margin-top:0; }
+    .run { float:right; margin-left:0.4em; }
+    .rslt { border:none; background:none; min-height:8em; }
+
+    .fonts { display:flex; width:100%; }
+    input[type="radio"] { display:none; }
+    label {
+      width:100%; text-align:center; margin-bottom:0.5em;
+      border:1px solid #bdcac4; cursor:pointer;
+    }
+    @media (prefers-color-scheme: dark) { label { border-color:#040509; } }
+    input[type="radio"]:checked + label { background:#475; }
+    label:hover { background:#569; }
   </style>
 </head>
 <body>
 <div class="nav"><a href="https://github.com/mlochbaum/BQN">BQN</a> / <a href="index.html">main</a></div>
 <h1>Fonts for BQN</h1>
 
-<p>This page displays samples of all four free fonts I know of that fully support BQN's character set:</p>
+<p>This page shows samples, and a font-selectable REPL at the end, for all four free fonts I know of that fully support BQN's character set:</p>
 <ul>
   <li><a href="https://github.com/mlochbaum/BQN/blob/master/docs/DejaVuBQNSansMono.ttf">DejaVu Sans Mono BQN</a>, which I adapted from DejaVu Sans Mono</li>
   <li><a href="https://github.com/dzaima/BQN386">BQN386</a>, derived from APL385 by way of APL386</li>
@@ -24,12 +45,12 @@
 </ul>
 <p>Other than DejaVu, the versions embedded on this page are small subsets, and you should get your copy from the links above (unless perhaps you want to use them for embedding as well). In addition to these, <a href="https://www.fsd.it/shop/fonts/pragmatapro/">Pragmata Pro</a> and <a href="https://www.evertype.com/emono/">Everson Mono</a> have full support, but each charges a significant fee for usage and I can't freely embed them here.</p>
 
-<p style="margin-top:3em">The table below shows samples of the whole BQN keyboard (which includes the entire BQN character set plus a few unused characters) and APL characters that don't feature in BQN.</p>
+<p style="margin-top:4em">The table below shows samples of the whole BQN keyboard (which includes the entire BQN character set plus a few unused characters) and APL characters that don't feature in BQN.</p>
 <table>
 <tr>
 <td>
 DejaVu Sans Mono BQN
-<pre><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
+<pre class="DejaVu"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
  <span class='Value'>qwertyuiop</span>[] <span class='Function'>QWERTYUIOP</span><span class='Brace'>{}</span>
  <span class='Value'>asdfghjkl;</span><span class='String'>'</span>\ <span class='Function'>ASDFGHJKL</span><span class='Value'>:</span><span class='String'>&quot;</span><span class='Function'>|</span>
  <span class='Value'>zxcvbnm</span><span class='Separator'>,</span><span class='Number'>.</span><span class='Function'>/</span>   <span class='Function'>ZXCVBNM&lt;&gt;</span><span class='Value'>?</span>
@@ -46,7 +67,7 @@ DejaVu Sans Mono BQN
 
 <td>
 <div class="right">BQN386</div>
-<pre style="font-family:BQN386"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
+<pre class="BQN386"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
  <span class='Value'>qwertyuiop</span>[] <span class='Function'>QWERTYUIOP</span><span class='Brace'>{}</span>
  <span class='Value'>asdfghjkl;</span><span class='String'>'</span>\ <span class='Function'>ASDFGHJKL</span><span class='Value'>:</span><span class='String'>&quot;</span><span class='Function'>|</span>
  <span class='Value'>zxcvbnm</span><span class='Separator'>,</span><span class='Number'>.</span><span class='Function'>/</span>   <span class='Function'>ZXCVBNM&lt;&gt;</span><span class='Value'>?</span>
@@ -64,7 +85,7 @@ DejaVu Sans Mono BQN
 
 <tr>
 <td>
-<pre style="font-family:FFHD; font-size:1.1em; line-height:1.01"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
+<pre class="Fairfax"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
  <span class='Value'>qwertyuiop</span>[] <span class='Function'>QWERTYUIOP</span><span class='Brace'>{}</span>
  <span class='Value'>asdfghjkl;</span><span class='String'>'</span>\ <span class='Function'>ASDFGHJKL</span><span class='Value'>:</span><span class='String'>&quot;</span><span class='Function'>|</span>
  <span class='Value'>zxcvbnm</span><span class='Separator'>,</span><span class='Number'>.</span><span class='Function'>/</span>   <span class='Function'>ZXCVBNM&lt;&gt;</span><span class='Value'>?</span>
@@ -81,7 +102,7 @@ Fairfax HD
 </td>
 
 <td>
-<pre style="font-family:JuliaMono"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
+<pre class="Julia"><span class='Modifier'>`</span><span class='Number'>1234567890</span><span class='Function'>=</span>  ~<span class='Function'>!</span><span class='String'>@</span><span class='Comment'>#</span>$%^&amp;*<span class='Paren'>()</span><span class='Modifier2'>_</span><span class='Function'>+</span>
  <span class='Value'>qwertyuiop</span>[] <span class='Function'>QWERTYUIOP</span><span class='Brace'>{}</span>
  <span class='Value'>asdfghjkl;</span><span class='String'>'</span>\ <span class='Function'>ASDFGHJKL</span><span class='Value'>:</span><span class='String'>&quot;</span><span class='Function'>|</span>
  <span class='Value'>zxcvbnm</span><span class='Separator'>,</span><span class='Number'>.</span><span class='Function'>/</span>   <span class='Function'>ZXCVBNM&lt;&gt;</span><span class='Value'>?</span>
@@ -101,7 +122,7 @@ Fairfax HD
 
 
 <p style="margin-top:4em">And here are code samples taken from this repository.</p>
-<pre><span class='Value ul'>DejaVu Sans Mono BQN</span>
+<pre class="DejaVu"><span class='Value ul'>DejaVu Sans Mono BQN</span>
 
   <span class='Value'>c</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'#'</span><span class='Separator'>⋄</span><span class='Value'>s</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Number'>0</span><span class='Ligature'>‿</span><span class='Number'>0</span><span class='Modifier2'>⊸</span><span class='Function'>«</span><span class='Modifier2'>⊸</span><span class='Function'>∧</span><span class='Value'>sm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'''</span><span class='Separator'>⋄</span><span class='Value'>d</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Value'>dm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'&quot;'</span>
   <span class='Value'>g</span><span class='Gets'>←</span><span class='Function'>⍋</span><span class='Value'>q</span><span class='Gets'>←</span><span class='Function'>∾</span><span class='Bracket'>⟨</span>  <span class='Value'>s</span><span class='Separator'>⋄</span><span class='Number'>¯1</span><span class='Function'>↓</span><span class='Value'>d</span><span class='Separator'>⋄</span><span class='Function'>/</span><span class='Value'>c</span><span class='Bracket'>⟩</span> <span class='Separator'>⋄</span><span class='Value'>q</span><span class='Gets'>↩</span><span class='Value'>g</span><span class='Function'>⊏</span><span class='Value'>q</span>                <span class='Comment'># Open indices
@@ -120,7 +141,7 @@ Fairfax HD
 <span class='Brace'>}</span>
 </pre>
 
-<pre style="font-family:BQN386"><span class='Value ul'>BQN386</span>
+<pre class="BQN386"><span class='Value ul'>BQN386</span>
 
   <span class='Value'>c</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'#'</span><span class='Separator'>⋄</span><span class='Value'>s</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Number'>0</span><span class='Ligature'>‿</span><span class='Number'>0</span><span class='Modifier2'>⊸</span><span class='Function'>«</span><span class='Modifier2'>⊸</span><span class='Function'>∧</span><span class='Value'>sm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'''</span><span class='Separator'>⋄</span><span class='Value'>d</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Value'>dm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'&quot;'</span>
   <span class='Value'>g</span><span class='Gets'>←</span><span class='Function'>⍋</span><span class='Value'>q</span><span class='Gets'>←</span><span class='Function'>∾</span><span class='Bracket'>⟨</span>  <span class='Value'>s</span><span class='Separator'>⋄</span><span class='Number'>¯1</span><span class='Function'>↓</span><span class='Value'>d</span><span class='Separator'>⋄</span><span class='Function'>/</span><span class='Value'>c</span><span class='Bracket'>⟩</span> <span class='Separator'>⋄</span><span class='Value'>q</span><span class='Gets'>↩</span><span class='Value'>g</span><span class='Function'>⊏</span><span class='Value'>q</span>                <span class='Comment'># Open indices
@@ -139,7 +160,7 @@ Fairfax HD
 <span class='Brace'>}</span>
 </pre>
 
-<pre style="font-family:FFHD; font-size:1.1em; line-height:1.01"><span class='Value ul'>Fairfax HD</span>
+<pre class="Fairfax"><span class='Value ul'>Fairfax HD</span>
 
   <span class='Value'>c</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'#'</span><span class='Separator'>⋄</span><span class='Value'>s</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Number'>0</span><span class='Ligature'>‿</span><span class='Number'>0</span><span class='Modifier2'>⊸</span><span class='Function'>«</span><span class='Modifier2'>⊸</span><span class='Function'>∧</span><span class='Value'>sm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'''</span><span class='Separator'>⋄</span><span class='Value'>d</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Value'>dm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'&quot;'</span>
   <span class='Value'>g</span><span class='Gets'>←</span><span class='Function'>⍋</span><span class='Value'>q</span><span class='Gets'>←</span><span class='Function'>∾</span><span class='Bracket'>⟨</span>  <span class='Value'>s</span><span class='Separator'>⋄</span><span class='Number'>¯1</span><span class='Function'>↓</span><span class='Value'>d</span><span class='Separator'>⋄</span><span class='Function'>/</span><span class='Value'>c</span><span class='Bracket'>⟩</span> <span class='Separator'>⋄</span><span class='Value'>q</span><span class='Gets'>↩</span><span class='Value'>g</span><span class='Function'>⊏</span><span class='Value'>q</span>                <span class='Comment'># Open indices
@@ -158,7 +179,7 @@ Fairfax HD
 <span class='Brace'>}</span>
 </pre>
 
-<pre style="font-family:JuliaMono"><span class='Value ul'>Julia Mono</span>
+<pre class="Julia"><span class='Value ul'>Julia Mono</span>
 
   <span class='Value'>c</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'#'</span><span class='Separator'>⋄</span><span class='Value'>s</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Number'>0</span><span class='Ligature'>‿</span><span class='Number'>0</span><span class='Modifier2'>⊸</span><span class='Function'>«</span><span class='Modifier2'>⊸</span><span class='Function'>∧</span><span class='Value'>sm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'''</span><span class='Separator'>⋄</span><span class='Value'>d</span><span class='Gets'>←</span><span class='Function'>/</span><span class='Value'>dm</span><span class='Gets'>←</span><span class='Value'>𝕩</span><span class='Function'>=</span><span class='String'>'&quot;'</span>
   <span class='Value'>g</span><span class='Gets'>←</span><span class='Function'>⍋</span><span class='Value'>q</span><span class='Gets'>←</span><span class='Function'>∾</span><span class='Bracket'>⟨</span>  <span class='Value'>s</span><span class='Separator'>⋄</span><span class='Number'>¯1</span><span class='Function'>↓</span><span class='Value'>d</span><span class='Separator'>⋄</span><span class='Function'>/</span><span class='Value'>c</span><span class='Bracket'>⟩</span> <span class='Separator'>⋄</span><span class='Value'>q</span><span class='Gets'>↩</span><span class='Value'>g</span><span class='Function'>⊏</span><span class='Value'>q</span>                <span class='Comment'># Open indices
@@ -177,5 +198,33 @@ Fairfax HD
 <span class='Brace'>}</span>
 </pre>
 
+
+<p style="margin-top:4em">Finally, a REPL where you can enter any code you like (but remember, not all characters from these fonts are embedded—just those likely to be used in BQN).</code>
+<div class="fonts">
+  <input type="radio" id="f0" name="font" class="DejaVu" checked="checked"/>
+  <label for="f0">DejaVu</label>
+  <input type="radio" id="f1" name="font" class="BQN386"/>
+  <label for="f1">BQN386</label>
+  <input type="radio" id="f2" name="font" class="Fairfax"/>
+  <label for="f2">Fairfax</label>
+  <input type="radio" id="f3" name="font" class="Julia"/>
+  <label for="f3">Julia</label>
+</div>
+<div id="setfont">
+  <div class="cont">
+    <div class="kb"></div>
+    <textarea class="code" rows="8"></textarea>
+    <input class="run" type="submit" value="Run (or shift-enter)"/>
+  </div>
+  <pre class="rslt"></pre>
+</div>
+
+<script src="bqn.js"></script>
+<script src="repl.js"></script>
+<script>
+  let sf = document.getElementById("setfont");
+  document.body.querySelectorAll('input[name="font"]')
+    .forEach(i => i.onclick = e=>{sf.className=e.target.className;});
+</script>
 </body>
 </html>
author	Marshall Lochbaum <mwlochbaum@gmail.com>	2020-11-15 16:26:40 -0500
committer	Marshall Lochbaum <mwlochbaum@gmail.com>	2020-11-15 16:26:40 -0500
commit	8e9ee17eac0b28c74f6cd684828d0b5e213af7e3 (patch)
tree	d0132419afc6a5db8a09274bdbb597e6c3c9180e
parent	423aa3c68969135f47a0866a7bd7a89c2a29ff22 (diff)