Keep character backing at the same height as the character

2 files changed, 82 insertions, 82 deletions

diff --git a/docs/tutorial/expression.html b/docs/tutorial/expression.html
index 0da607d5..b46349be 100644
--- a/docs/tutorial/expression.html
+++ b/docs/tutorial/expression.html
@@ -116,29 +116,29 @@
 </pre>
 <p>The evaluation order is shown below, with the function <code><span class='Function'>⋆</span></code> on the first line evaluated first, then <code><span class='Function'>×</span></code> on the next, and so on. The effect of the parentheses is that <code><span class='Function'>÷</span></code> is evaluated before the leftmost <code><span class='Function'>×</span></code>.</p>
 <svg viewBox='-175.375 -34 512 188'>
-  <g font-family='BQN,monospace' font-size='18px'>
+  <g font-family='BQN,monospace' font-size='18px' class='Paren' fill='currentColor'>
     <rect class='code' stroke-width='1' rx='10' x='-21.5' y='-24' width='204.25' height='168'/>
     <text><tspan class='Paren'>(</tspan><tspan class='Number'>4</tspan><tspan class='Function'>÷</tspan><tspan class='Number'>3</tspan><tspan class='Paren'>)</tspan> <tspan class='Function'>×</tspan> <tspan class='Number'>π</tspan> <tspan class='Function'>×</tspan> <tspan class='Number'>2</tspan><tspan class='Function'>⋆</tspan><tspan class='Number'>3</tspan></text>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M156.95 2.4V26.4H146.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M135.45 2.4V26.4H146.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M146.2 26.4V50.4H113.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M92.45 2.4V50.4H113.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M113.95 50.4V98.4H70.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M38.7 2.4V74.4H27.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M17.2 2.4V74.4H27.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M27.95 74.4V98.4H70.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M70.95 98.4V122.4H-6.987'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M156.95 2.4V26.4H146.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M135.45 2.4V26.4H146.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M146.2 26.4V50.4H113.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M92.45 2.4V50.4H113.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M113.95 50.4V98.4H70.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M38.7 2.4V74.4H27.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M17.2 2.4V74.4H27.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M27.95 74.4V98.4H70.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M70.95 98.4V122.4H-6.987'/>
     <g font-size='15px' text-anchor='middle'>
       <g class='codeCover' stroke-width='8' stroke-linejoin='round'>
-        <text x='156.875' y='33'>3</text>
-        <text x='146.125' y='33'>⋆</text>
-        <text x='135.375' y='33'>2</text>
-        <text x='113.875' y='57'>×</text>
-        <text x='92.375' y='57'>π</text>
-        <text x='70.875' y='105'>×</text>
-        <text x='38.625' y='81'>3</text>
-        <text x='27.875' y='81'>÷</text>
-        <text x='17.125' y='81'>4</text>
+        <text x='156.875' y='31'>3</text>
+        <text x='146.125' y='31'>⋆</text>
+        <text x='135.375' y='31'>2</text>
+        <text x='113.875' y='55'>×</text>
+        <text x='92.375' y='55'>π</text>
+        <text x='70.875' y='103'>×</text>
+        <text x='38.625' y='79'>3</text>
+        <text x='27.875' y='79'>÷</text>
+        <text x='17.125' y='79'>4</text>
       </g>
       <g opacity='0.9'>
         <text x='156.875' y='31'><tspan class='Number'>3</tspan></text>
@@ -169,35 +169,35 @@
 </pre>
 <p>That's a fairly large expression, so here's another evaluation diagram to check your understanding.</p>
 <svg viewBox='-159.25 -34 512 210'>
-  <g font-family='BQN,monospace' font-size='18px'>
+  <g font-family='BQN,monospace' font-size='18px' class='Paren' fill='currentColor'>
     <rect class='code' stroke-width='1' rx='10' x='-21.5' y='-24' width='236.5' height='190'/>
     <text><tspan class='Paren'>(</tspan><tspan class='Function'>√</tspan><tspan class='Number'>3</tspan> <tspan class='Function'>+</tspan> <tspan class='Number'>2</tspan><tspan class='Function'>×</tspan><tspan class='Function'>√</tspan><tspan class='Number'>2</tspan><tspan class='Paren'>)</tspan> <tspan class='Function'>-</tspan> <tspan class='Number'>1</tspan><tspan class='Function'>+</tspan><tspan class='Function'>√</tspan><tspan class='Number'>2</tspan></text>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M189.2 1.9V20.9H178.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M178.45 20.9V39.9H167.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M156.95 1.9V39.9H167.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M167.7 39.9V134.9H135.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M103.2 1.9V58.9H92.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M92.45 58.9V77.9H81.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M70.95 1.9V77.9H81.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M81.7 77.9V96.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M27.95 1.9V96.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M49.45 96.9V115.9H17.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M17.2 115.9V134.9H135.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M135.45 134.9V153.9H-6.987'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M189.2 1.9V20.9H178.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M178.45 20.9V39.9H167.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M156.95 1.9V39.9H167.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M167.7 39.9V134.9H135.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M103.2 1.9V58.9H92.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M92.45 58.9V77.9H81.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M70.95 1.9V77.9H81.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M81.7 77.9V96.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M27.95 1.9V96.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M49.45 96.9V115.9H17.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M17.2 115.9V134.9H135.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M135.45 134.9V153.9H-6.987'/>
     <g font-size='15px' text-anchor='middle'>
       <g class='codeCover' stroke-width='8' stroke-linejoin='round'>
-        <text x='189.125' y='28'>2</text>
-        <text x='178.375' y='28'>√</text>
-        <text x='167.625' y='47'>+</text>
-        <text x='156.875' y='47'>1</text>
-        <text x='135.375' y='142'>-</text>
-        <text x='103.125' y='66'>2</text>
-        <text x='92.375' y='66'>√</text>
-        <text x='81.625' y='85'>×</text>
-        <text x='70.875' y='85'>2</text>
-        <text x='49.375' y='104'>+</text>
-        <text x='27.875' y='104'>3</text>
-        <text x='17.125' y='123'>√</text>
+        <text x='189.125' y='26'>2</text>
+        <text x='178.375' y='26'>√</text>
+        <text x='167.625' y='45'>+</text>
+        <text x='156.875' y='45'>1</text>
+        <text x='135.375' y='140'>-</text>
+        <text x='103.125' y='64'>2</text>
+        <text x='92.375' y='64'>√</text>
+        <text x='81.625' y='83'>×</text>
+        <text x='70.875' y='83'>2</text>
+        <text x='49.375' y='102'>+</text>
+        <text x='27.875' y='102'>3</text>
+        <text x='17.125' y='121'>√</text>
       </g>
       <g opacity='0.9'>
         <text x='189.125' y='26'><tspan class='Number'>2</tspan></text>
@@ -348,24 +348,24 @@
 
 <p>It's past time we covered how the syntax for modifiers works. Remember how I told you you hated learning the order of operations? No? Good. Modifiers bind more tightly than functions, so they are called on their operands before their operands can be used. As the parentheses above suggest, modifiers also associate from left to right, the opposite order as functions. For example, the first expression above is evaluated in the order shown below. First we construct the square function <code><span class='Function'>×</span><span class='Modifier'>˜</span></code>, then compose it with <code><span class='Function'>+</span></code>, and finally apply the result to some arguments.</p>
 <svg viewBox='-213 -34 512 134'>
-  <g font-family='BQN,monospace' font-size='18px'>
+  <g font-family='BQN,monospace' font-size='18px' class='Paren' fill='currentColor'>
     <rect class='code' stroke-width='1' rx='10' x='-21.5' y='-24' width='129' height='114'/>
     <text><tspan class='Number'>3</tspan> <tspan class='Function'>×</tspan><tspan class='Modifier'>˜</tspan><tspan class='Modifier2'>∘</tspan><tspan class='Function'>+</tspan> <tspan class='Number'>4</tspan></text>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M81.7 1.9V58.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M60.2 1.9V39.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M27.95 1.9V20.9H38.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M38.7 20.9V39.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M49.45 39.9V58.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M6.45 1.9V58.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M49.45 58.9V77.9H-6.987'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M81.7 1.9V58.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M60.2 1.9V39.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M27.95 1.9V20.9H38.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M38.7 20.9V39.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M49.45 39.9V58.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M6.45 1.9V58.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M49.45 58.9V77.9H-6.987'/>
     <g font-size='15px' text-anchor='middle'>
       <g class='codeCover' stroke-width='8' stroke-linejoin='round'>
-        <text x='81.625' y='66'>4</text>
-        <text x='60.125' y='47'>+</text>
-        <text x='49.375' y='47'>∘</text>
-        <text x='38.625' y='28'>˜</text>
-        <text x='27.875' y='28'>×</text>
-        <text x='6.375' y='66'>3</text>
+        <text x='81.625' y='64'>4</text>
+        <text x='60.125' y='45'>+</text>
+        <text x='49.375' y='45'>∘</text>
+        <text x='38.625' y='26'>˜</text>
+        <text x='27.875' y='26'>×</text>
+        <text x='6.375' y='64'>3</text>
       </g>
       <g opacity='0.9'>
         <text x='81.625' y='64'><tspan class='Number'>4</tspan></text>
diff --git a/docs/tutorial/list.html b/docs/tutorial/list.html
index 9a50669a..22df9358 100644
--- a/docs/tutorial/list.html
+++ b/docs/tutorial/list.html
@@ -279,34 +279,34 @@
 </pre>
 <p>Lot of functions up there. Notice how I need to use parentheses for the left argument of a function if it's compound, but never for the right argument, and consequently never with a one-argument function.</p>
 <svg viewBox='-132.375 -34 512 210'>
-  <g font-family='BQN,monospace' font-size='18px'>
+  <g font-family='BQN,monospace' font-size='18px' class='Paren' fill='currentColor'>
     <rect class='code' stroke-width='1' rx='10' x='-21.5' y='-24' width='290.25' height='190'/>
     <text><tspan class='Function'>+</tspan><tspan class='Modifier'>´</tspan> <tspan class='Paren'>(</tspan><tspan class='Function'>⌽</tspan><tspan class='Number'>2</tspan><tspan class='Function'>⋆</tspan><tspan class='Function'>↕</tspan><tspan class='Number'>4</tspan><tspan class='Paren'>)</tspan> <tspan class='Function'>×</tspan> <tspan class='String'>"1001"</tspan><tspan class='Function'>-</tspan><tspan class='String'>'0'</tspan></text>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M232.2 1.9V20.9H210.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M173.075 1.9V20.9H210.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M210.7 20.9V96.9H124.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M92.45 1.9V39.9H81.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M81.7 39.9V58.9H70.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M60.2 1.9V58.9H70.95'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M70.95 58.9V77.9H49.45'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M49.45 77.9V96.9H124.7'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M124.7 96.9V134.9H17.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M6.45 1.9V115.9H17.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M17.2 115.9V134.9H17.2'/>
-    <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M17.2 134.9V153.9H-6.987'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M232.2 1.9V20.9H210.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M173.075 1.9V20.9H210.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M210.7 20.9V96.9H124.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M92.45 1.9V39.9H81.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M81.7 39.9V58.9H70.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M60.2 1.9V58.9H70.95'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M70.95 58.9V77.9H49.45'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M49.45 77.9V96.9H124.7'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M124.7 96.9V134.9H17.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M6.45 1.9V115.9H17.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M17.2 115.9V134.9H17.2'/>
+    <path stroke='currentColor' fill='none' stroke-width='1' d='M17.2 134.9V153.9H-6.987'/>
     <g font-size='15px' text-anchor='middle'>
       <g class='codeCover' stroke-width='8' stroke-linejoin='round'>
-        <text x='232.125' y='28'>'0'</text>
-        <text x='210.625' y='28'>-</text>
-        <text x='173' y='28'>"1001"</text>
-        <text x='124.625' y='104'>×</text>
-        <text x='92.375' y='47'>4</text>
-        <text x='81.625' y='47'>↕</text>
-        <text x='70.875' y='66'>⋆</text>
-        <text x='60.125' y='66'>2</text>
-        <text x='49.375' y='85'>⌽</text>
-        <text x='17.125' y='123'>´</text>
-        <text x='6.375' y='123'>+</text>
+        <text x='232.125' y='26'>'0'</text>
+        <text x='210.625' y='26'>-</text>
+        <text x='173' y='26'>"1001"</text>
+        <text x='124.625' y='102'>×</text>
+        <text x='92.375' y='45'>4</text>
+        <text x='81.625' y='45'>↕</text>
+        <text x='70.875' y='64'>⋆</text>
+        <text x='60.125' y='64'>2</text>
+        <text x='49.375' y='83'>⌽</text>
+        <text x='17.125' y='121'>´</text>
+        <text x='6.375' y='121'>+</text>
       </g>
       <g opacity='0.9'>
         <text x='232.125' y='26'><tspan class='String'>'0'</tspan></text>