Keep character backing at the same height as the character

1 files changed, 58 insertions, 58 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>