Scientific notation

hdyc-svelte/src/lib/components/QuickConversionTable.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
   import { solve } from '$lib/engine';
+  import { parseScientificNotation, type ScientificNotationParts } from '$lib/utils/formatScientific';
   import type { CalculatorDef } from '$lib/data/calculators';
 
   export let config: CalculatorDef;
 
   const numericSamples = [0.1, 0.5, 1, 2, 5, 10, 20, 50, 100];
 
-  type Row = { input: number; output: string };
+  type Row = { input: number; output: string; scientific?: ScientificNotationParts };
 
   const buildRow = (value: number): Row => {
     const formatted = solve(config, 1, value.toString(), '', '');
     return {
       input: value,
-      output: formatted.val2 || '—'
+      output: formatted.val2 || '—',
+      scientific: formatted.val2 ? parseScientificNotation(formatted.val2) ?? undefined : undefined,
     };
   };
 
@@ -42,7 +44,16 @@
         <div class="chart-row">
           <p class="chart-statement">
             Converting {row.input} <span class="chart-unit">{inputLabel}</span> into <span class="chart-unit">{outputLabel}</span> equals
-            <span class="chart-output-value">{row.output}</span>
+            <span class="chart-output-value">
+              {#if row.scientific}
+                <span class="scientific-base">{row.scientific.base}</span>
+                <span class="scientific-suffix">
+                  ×10<sup>{row.scientific.exponent}</sup>
+                </span>
+              {:else}
+                {row.output}
+              {/if}
+            </span>
             <span class="chart-output-unit">{outputLabel}</span>.
           </p>
         </div>
@@ -94,6 +105,21 @@
     color: var(--text);
   }
 
+  .scientific-base {
+    margin-right: 0.15rem;
+  }
+
+  .scientific-suffix {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.15rem;
+    font-size: 0.85em;
+  }
+
+  .scientific-suffix sup {
+    font-size: 0.75em;
+  }
+
   .chart-unit,
   .chart-output-unit {
     font-variant: petite-caps;

hdyc-svelte/src/lib/utils/formatScientific.ts

@@ -0,0 +1,18 @@
+export interface ScientificNotationParts {
+  base: string;
+  exponent: string;
+}
+
+const SCIENTIFIC_REGEX = /^([+-]?\d+(?:\.\d+)?)(?:[eE]([+-]?\d+))$/;
+
+export function parseScientificNotation(value: string): ScientificNotationParts | null {
+  const match = SCIENTIFIC_REGEX.exec(value);
+  if (!match) {
+    return null;
+  }
+  const exponent = match[2].replace(/^\+/, '') || '0';
+  return {
+    base: match[1],
+    exponent,
+  };
+}