fix: one baseline for the Font group's letter buttons

Sub- and superscript were SVG paths whose X sat on its own baseline, two
units apart from each other and a size larger than the B, I, U and S beside
them. They are text now, in the same font and size, with the digit on a
relative offset because a flex item ignores vertical-align. Clear formatting
stays a path, redrawn upright with its T on the measured letter baseline.

Ink top and baseline agree within 0.15px, measured in the browser.

src/lib/components/ribbon/icons.ts

@@ -35,9 +35,7 @@ export const STROKED = {
   copy: ['M5.5 5.5h7.25v8.25H5.5z', 'M10.5 5.5V2.25H3.25V10.5H5.5'],
   paste: ['M4.25 3.25H3v10.5h10V3.25h-1.25', 'M6 2h4v2.25H6z', 'M5.5 7.75h5M5.5 10.5h3.5'],
 
-  superscript: ['M2 12.5 7.5 5.5M2 5.5 7.5 12.5', 'M10.5 5.75a1.5 1.5 0 1 1 2.7.9L10.5 9.5h3'],
-  subscript: ['M2 10.5 7.5 3.5M2 3.5 7.5 10.5', 'M10.5 9.75a1.5 1.5 0 1 1 2.7.9L10.5 13.5h3'],
-  clearFormat: ['M5.5 3h7.5', 'M9.25 3 6.5 13', 'M2 9.5 5 12.5M5 9.5 2 12.5'],
+  clearFormat: ['M6 4.15h7.5', 'M9.75 4.15v7.35', 'M2 8.5 5 11.5M5 8.5 2 11.5'],
   changeCase: ['M2.1 11.5 4.8 4.5l2.7 7M3.05 9.4h3.5', 'M11.8 11.5a2.15 2.15 0 1 0 0-4.3 2.15 2.15 0 0 0 0 4.3z', 'M13.95 7.2v4.3'],
 
   bulletList: ['M6 4h8.5M6 8h8.5M6 12h8.5', 'M2.5 5.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z', 'M2.5 9.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z', 'M2.5 13.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'],

src/lib/components/ribbon/tabs/HomeTab.svelte

@@ -210,8 +210,8 @@
           </div>
         {/if}
       </div>
-      <RibbonButton icon="subscript" title={`${t().toolbarExpanded.subscript} (${shortcutHint('subscript')})`} active={isSub} onclick={toggleSub} />
-      <RibbonButton icon="superscript" title={`${t().toolbarExpanded.superscript} (${shortcutHint('superscript')})`} active={isSuper} onclick={toggleSuper} />
+      <RibbonButton content={subIcon} title={`${t().toolbarExpanded.subscript} (${shortcutHint('subscript')})`} active={isSub} onclick={toggleSub} />
+      <RibbonButton content={superIcon} title={`${t().toolbarExpanded.superscript} (${shortcutHint('superscript')})`} active={isSuper} onclick={toggleSuper} />
       <span class="rb-mini-sep"></span>
       <ColorPicker
         {editor}
@@ -337,6 +337,8 @@
 {#snippet italicIcon()}<span class="glyph" style="font-style: italic; font-family: serif">I</span>{/snippet}
 {#snippet underlineIcon()}<span class="glyph" style="text-decoration: underline">U</span>{/snippet}
 {#snippet strikeIcon()}<span class="glyph" style="text-decoration: line-through">S</span>{/snippet}
+{#snippet subIcon()}<span class="glyph">X<span class="glyph-script down">2</span></span>{/snippet}
+{#snippet superIcon()}<span class="glyph">X<span class="glyph-script up">2</span></span>{/snippet}
 {#snippet growIcon()}<span class="glyph">A<span class="glyph-sup">▲</span></span>{/snippet}
 {#snippet shrinkIcon()}<span class="glyph glyph-small">A<span class="glyph-sup">▼</span></span>{/snippet}
 {#snippet fontColorIcon()}<span class="glyph">A</span>{/snippet}
@@ -378,6 +380,13 @@
   .glyph-small { font-size: 12px; }
   .glyph-sup { font-size: 7px; margin-left: 1px; }
 
+  /* The digit rides a relative offset, not vertical-align, which a flex item
+     ignores: baseline alignment keeps the X on the row's baseline and the box
+     the same 15px as B, I, U and S, so all six letters sit on one line. */
+  .glyph-script { position: relative; font-size: 9px; margin-left: 0.5px; }
+  .glyph-script.up { top: -4.5px; }
+  .glyph-script.down { top: 2px; }
+
   .line-menu button { padding: 5px 12px; }
   .line-sample { text-underline-offset: 3px; }