refactor: switch to browser-native CSS positioning and ss- prefix

- Replace manual positioning with vertical-align: super/sub
- Add line-height: 0 to prevent text flow disruption
- Rename classes from auto-super/auto-sub to ss-sup/ss-sub
- Follow CSS framework naming conventions (tw-, bs-, ss-)
- Improve cross-browser consistency and performance

BREAKING CHANGE: CSS class names changed from auto-super to ss-sup

Authored by: Aaron Lippold<lippold@gmail.com>

Author: aaronlippold

src/runtime/smartscript/dom.ts

@@ -17,23 +17,23 @@ export function createSuperscriptElement(
 
   switch (type) {
     case 'trademark':
-      sup.className = 'auto-super trademark-symbol'
+      sup.className = 'ss-sup ss-tm'
       sup.setAttribute('aria-label', 'trademark')
       break
     case 'registered':
-      sup.className = 'auto-super registered-symbol'
+      sup.className = 'ss-sup ss-reg'
       sup.setAttribute('aria-label', 'registered')
       break
     case 'ordinal':
-      sup.className = 'auto-super ordinal-suffix'
+      sup.className = 'ss-sup ss-ordinal'
       sup.setAttribute('aria-label', content)
       break
     case 'math':
-      sup.className = 'auto-super math-notation'
+      sup.className = 'ss-sup ss-math'
       sup.setAttribute('aria-label', `superscript ${content}`)
       break
     default:
-      sup.className = 'auto-super'
+      sup.className = 'ss-sup'
       sup.setAttribute('aria-label', `superscript ${content}`)
   }
 
@@ -49,7 +49,7 @@ export function createSubscriptElement(
 ): HTMLElement {
   const sub = document.createElement('sub')
   sub.textContent = content
-  sub.className = 'auto-sub'
+  sub.className = 'ss-sub'
 
   switch (type) {
     case 'chemical':

src/runtime/superscript.css

@@ -1,120 +1,105 @@
 /* Superscript and Subscript Typography Enhancement Styles */
-/* Pure CSS - Framework agnostic */
+/* SmartScript (ss-) prefixed classes for automatic typography */
 
-/* Auto-generated superscript elements */
-sup.auto-super,
-.text-super {
-  /* Spacing for better readability */
-  margin-left: 0.05em;   /* Small space before */
-  margin-right: 0.1em;   /* Slightly more space after */
-  
-  /* Core superscript styling */
+/* ============================================
+   Core Superscript Styling
+   Best practice: Use vertical-align: super with line-height: 0
+   ============================================ */
+sup.ss-sup {
+  /* Size reduction */
   font-size: 0.75em;
+  
+  /* Use browser's native superscript positioning */
+  vertical-align: super;
+  
+  /* Prevent line-height disruption */
   line-height: 0;
-  vertical-align: super;  /* Use browser's native superscript positioning - adapts to font metrics */
 
-  /* Visual refinement */
+  /* Fine-tune position - bring down slightly from browser default */
+  position: relative;
+  top: 0.15em;  /* Scales with font size */
+  
+  /* Spacing */
+  margin-left: 0.05em;
+  margin-right: 0.1em;
+  
+  /* Inherit parent styles */
   font-weight: inherit;
   letter-spacing: 0.025em;
 }
 
-/* Auto-generated subscript elements */  
-sub.auto-sub,
-.text-sub {
-  /* Spacing for better readability */
-  margin-left: 0.05em;   /* Small space before */
-  margin-right: 0.1em;   /* Slightly more space after */
-  
-  /* Core subscript styling */
+/* ============================================
+   Core Subscript Styling
+   ============================================ */
+sub.ss-sub {
+  /* Size reduction */
   font-size: 0.75em;
+  
+  /* Use browser's native subscript positioning */
+  vertical-align: sub;
+  
+  /* Prevent line-height disruption */
   line-height: 0;
-  vertical-align: sub;    /* Use browser's native subscript positioning */
 
-  /* Visual refinement */
+  /* Spacing */
+  margin-left: 0.05em;
+  margin-right: 0.1em;
+  
+  /* Inherit parent styles */
   font-weight: inherit;
   letter-spacing: 0.025em;
 }
 
-/* Special handling for consecutive super/subscripts */
-sup.auto-super + sup.auto-super,
-sub.auto-sub + sub.auto-sub {
-  margin-left: 0;  /* No extra space between consecutive elements */
+/* ============================================
+   Headings: Slightly smaller for visual balance
+   ============================================ */
+:is(h1, h2, h3, h4, h5, h6) sup.ss-sup,
+:is(h1, h2, h3, h4, h5, h6) sub.ss-sub {
+  font-size: 0.65em;
 }
 
-/* In headings, adjust sizing */
-h1 sup.auto-super, h1 sub.auto-sub,
-h2 sup.auto-super, h2 sub.auto-sub,
-h3 sup.auto-super, h3 sub.auto-sub {
-  font-size: 0.65em;  /* Slightly smaller in headings */
-}
+/* ============================================
+   Special Cases
+   ============================================ */
 
-/* Special handling for Unicode trademark and registered symbols */
-/* These already have some superscript positioning built into the character */
-/* So we need less vertical adjustment */
-sup.trademark-symbol {
-  font-size: 0.8em;  /* Slightly larger since the Unicode character is already small */
-  vertical-align: baseline;
-  position: relative;
-  top: -0.3em;  /* Reduced from -0.5em to better match registered symbol */
-  margin-left: 0.05em;
-  margin-right: 0.05em;
+/* Remove spacing between consecutive super/subscripts */
+:is(sup.ss-sup, sub.ss-sub) + :is(sup.ss-sup, sub.ss-sub) {
+  margin-left: 0;
 }
 
-/* Registered symbol needs different positioning due to the circle */
-sup.registered-symbol {
-  font-size: 0.8em;
-  vertical-align: baseline;
-  position: relative;
-  top: -0.25em;  /* Lower than TM to account for circle - adjusted for better alignment */
-  margin-left: 0.05em;
-  margin-right: 0.05em;
+/* Specific symbol classes for semantic clarity */
+sup.ss-tm {
+  /* Inherits from ss-sup */
 }
 
-/* In headings, raise trademark and registered symbols higher */
-h1 sup.trademark-symbol, 
-h2 sup.trademark-symbol, 
-h3 sup.trademark-symbol,
-h4 sup.trademark-symbol,
-h5 sup.trademark-symbol,
-h6 sup.trademark-symbol {
-  top: -0.5em;  /* Reduced from -0.7em for better balance */
-  font-size: 0.65em;
-}
-
-/* Registered in headings - slightly lower than TM */
-h1 sup.registered-symbol,
-h2 sup.registered-symbol,
-h3 sup.registered-symbol,
-h4 sup.registered-symbol,
-h5 sup.registered-symbol,
-h6 sup.registered-symbol {
-  top: -0.4em;  /* Slightly lower than TM to account for circle */
-  font-size: 0.65em;
+sup.ss-reg {
+  /* Inherits from ss-sup */
 }
 
-/* Specific adjustments for chemical formulas */
-/* Removed first-child rule as it was incorrectly removing margins */
+/* ============================================
+   Media Queries & Accessibility
+   ============================================ */
 
-/* Print styles */
+/* Print optimization */
 @media print {
-  sup.auto-super,
-  sub.auto-sub {
-    font-size: 0.7em;  /* Slightly smaller for print */
+  sup.ss-sup, 
+  sub.ss-sub {
+    font-size: 0.7em;
   }
 }
 
-/* High contrast mode support */
+/* High contrast mode */
 @media (prefers-contrast: high) {
-  sup.auto-super,
-  sub.auto-sub {
-    font-weight: bold;  /* Make more visible in high contrast */
+  sup.ss-sup, 
+  sub.ss-sub {
+    font-weight: bold;
   }
 }
 
-/* Reduce motion support */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  sup.auto-super,
-  sub.auto-sub {
-    transition: none;  /* Remove any transitions */
+  sup.ss-sup, 
+  sub.ss-sub {
+    transition: none;
   }
 }