Keep units styled and prevent zero reverse examples

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

@@ -15,13 +15,34 @@
   $: result = supportsExample
     ? solve(config, 1, exampleInput.toString(), '', '')
     : null;
-  $: reverseResult = supportsExample
-    ? solve(config, 2, '', '1', '')
-    : null;
   $: offset = config.offset ?? 0;
   $: formulaExpression = supportsExample
     ? `${exampleInput} × ${config.factor}${offset ? ` + ${offset}` : ''}`
     : '';
+
+  const formatExampleValue = (value: number | null): string => {
+    if (value === null || Number.isNaN(value)) {
+      return '—';
+    }
+    if (!Number.isFinite(value)) {
+      return value.toString();
+    }
+    if (value === 0) {
+      return '0';
+    }
+    const rounded = parseFloat(value.toFixed(6));
+    if (rounded !== 0) {
+      return rounded.toString();
+    }
+    const precise = value.toFixed(12).replace(/\.?0+$/, '');
+    return precise || '0';
+  };
+
+  $: reverseExampleValue =
+    supportsExample && config.factor !== 0
+      ? (1 - offset) / config.factor
+      : null;
+  $: formattedReverseValue = formatExampleValue(reverseExampleValue);
 </script>
 
 {#if supportsExample && result}
@@ -31,7 +52,7 @@
       1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
     </p>
     <p class="example-note">
-      1 {config.labels.in2} = {reverseResult?.val1 ?? '—'} {config.labels.in1}
+      1 {config.labels.in2} = {formattedReverseValue} {config.labels.in1}
     </p>
     <p class="example-line">
       Example: convert {exampleInput} {config.labels.in1} to {config.labels.in2}

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

@@ -41,7 +41,7 @@
       {#each rows as row}
         <div class="chart-row">
           <p class="chart-statement">
-            Converting {row.input} {inputLabel} into {outputLabel} equals
+            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-unit">{outputLabel}</span>.
           </p>
@@ -94,6 +94,7 @@
     color: var(--text);
   }
 
+  .chart-unit,
   .chart-output-unit {
     font-variant: petite-caps;
   }