svelte-rtf-editor 1.4.0 → 1.5.0

package/README.md

@@ -105,9 +105,11 @@ Pass an HTML string as `content`. If the content is already RTF, convert it firs
 
 ### `<RtfViewer>`
 
-| Prop      | Type     | Default | Description                              |
-|-----------|----------|---------|------------------------------------------|
-| `content` | `string` | —       | Raw RTF string to parse and display      |
+| Prop         | Type     | Default   | Description                              |
+|--------------|----------|-----------|------------------------------------------|
+| `content`    | `string` | —         | Raw RTF string to parse and display      |
+| `fontFamily` | `string` | `'Arial'` | Font the document is shown in            |
+| `fontSize`   | `number` | `12`      | Body text size in points                 |
 
 ---
 
@@ -128,6 +130,8 @@ Pass an HTML string as `content`. If the content is already RTF, convert it firs
 | `maxImageEdge`  | `number`   | `1600`                       | Longest edge (px) an inserted image is scaled down to; `0` keeps full size |
 | `maxImageBytes` | `number`   | `524288`                     | Encoded byte ceiling per image; oversized pictures are re-encoded until they fit. `0` disables |
 | `maxImageDisplayWidth` | `number` | `624`                 | Width (px) a newly inserted image is displayed at, unless the column is narrower — 6.5in of page. `0` fills the column |
+| `fontFamily`    | `string`   | `'Arial'`                    | Document font, on screen and in the RTF. See [Fonts](#fonts) |
+| `fontSize`      | `number`   | `12`                         | Body text size in points, on screen and in the RTF        |
 
 #### Callback props
 
@@ -158,14 +162,15 @@ editor.importRtf()        // → void    — open the file picker to import .rtf
 
 ```ts
 import {
-  rtfToHtml, htmlToRtf, estimateRtfBytes, readRtfFile, htmlToMarkdown, downloadFile
+  rtfToHtml, htmlToRtf, estimateRtfBytes, readRtfFile, htmlToMarkdown, downloadFile,
+  DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE
 } from 'svelte-rtf-editor';
 ```
 
 | Function                              | Description                                        |
 |---------------------------------------|----------------------------------------------------|
 | `rtfToHtml(rtf: string): string`      | Parse an RTF string and return an HTML string      |
-| `htmlToRtf(html: string): string`     | Convert an HTML string to RTF                      |
+| `htmlToRtf(el: HTMLElement, options?: { fontFamily?, fontSize? }): string` | Convert a DOM element's content to RTF, in Arial 12 pt unless told otherwise |
 | `estimateRtfBytes(el: HTMLElement): number` | Approximate RTF size of a DOM element without converting it |
 | `readRtfFile(file: File): Promise<string>` | Read a `.rtf` File object and return HTML     |
 | `htmlToMarkdown(el: HTMLElement): string` | Convert a DOM element's content to Markdown   |
@@ -173,6 +178,29 @@ import {
 
 ---
 
+## Fonts
+
+The editor and the viewer show a document in the same font and size the RTF carries, so what you see on screen is what the receiving system gets. Both default to **Arial 12 pt**.
+
+```svelte
+<InkEditor fontFamily="Calibri" fontSize={11} bind:this={editor} />
+```
+
+```ts
+htmlToRtf(el, { fontFamily: 'Calibri', fontSize: 11 });
+```
+
+- `fontFamily` is used for the whole document: body text, headings, lists and tables. Code keeps Courier New.
+- `fontSize` is the body size in points. Headings scale from it: at 12 pt, `h1` is 24 pt, `h2` 18 pt and `h3` 14 pt.
+- If you call `htmlToRtf` yourself on the editor's content, pass the same options you gave the editor, or the two produce different RTF.
+- `fontFamily` names one font. Given a CSS list such as `'Arial, sans-serif'`, only the first family is used.
+- `fontSize` is rounded to the nearest half-point, which is what RTF measures in, and kept between 1 and 1638 pt.
+- `rtfToHtml` recognizes headings relative to the document's own body size, so a document written at any size reads back with the same headings.
+
+The font has to be installed on the machine that displays the document. The RTF names it, and a reader without it substitutes one of its own.
+
+---
+
 ## Theming
 
 The components use CSS custom properties with sensible fallbacks, so they work out of the box but are easy to customise. Override these in your own CSS:

package/dist/RtfViewer.svelte

@@ -1,7 +1,23 @@
 <script lang="ts">
     import { rtfToHtml } from "./rtf-parser.js";
-
-    let { content }: { content: string } = $props();
+    import {
+        cssFontFamily,
+        normalizeFontSize,
+        DEFAULT_FONT_FAMILY,
+        DEFAULT_FONT_SIZE
+    } from "./rtf-writer.js";
+
+    // fontFamily and fontSize (points) set how the document is shown, and
+    // default to the font the editor writes, so a document reads the same in
+    // the viewer as in the editor.
+    let {
+        content,
+        fontFamily = DEFAULT_FONT_FAMILY,
+        fontSize = DEFAULT_FONT_SIZE
+    }: { content: string; fontFamily?: string; fontSize?: number } = $props();
+
+    const screenFontFamily = $derived(cssFontFamily(fontFamily));
+    const screenFontSize = $derived(normalizeFontSize(fontSize));
 
     const htmlContent = $derived(rtfToHtml(content));
 
@@ -24,7 +40,11 @@
             Copy RTF
         {/if}
     </button>
-    <div class="rtf-viewer">
+    <div
+        class="rtf-viewer"
+        style:font-family={screenFontFamily}
+        style:font-size="{screenFontSize}pt"
+    >
         {@html htmlContent}
     </div>
 </div>

package/dist/RtfViewer.svelte.d.ts

@@ -1,5 +1,7 @@
 type $$ComponentProps = {
     content: string;
+    fontFamily?: string;
+    fontSize?: number;
 };
 declare const RtfViewer: import("svelte").Component<$$ComponentProps, {}, "">;
 type RtfViewer = ReturnType<typeof RtfViewer>;

package/dist/components/InkEditor.svelte

@@ -23,6 +23,10 @@
 	 *                   which is what bounds the RTF payload — it costs two hex
 	 *                   characters per byte. 0 disables. Default: 524288 (512 KB,
 	 *                   about 1 MB of document per image).
+	 *   fontFamily    — Font for the document, both on screen and in the RTF.
+	 *                   Default: 'Arial'.
+	 *   fontSize      — Body text size in points, both on screen and in the RTF.
+	 *                   Headings scale from it. Default: 12.
 	 *
 	 * Events (callback props):
 	 *   onchange      — Fires on content change with
@@ -49,7 +53,14 @@
 	import ImageOverlay from './ImageOverlay.svelte';
 	import { htmlToMarkdown, downloadFile } from '../utils.js';
 	import { readRtfFile } from '../rtf-parser.js';
-	import { htmlToRtf, estimateRtfBytes } from '../rtf-writer.js';
+	import {
+		htmlToRtf,
+		estimateRtfBytes,
+		cssFontFamily,
+		normalizeFontSize,
+		DEFAULT_FONT_FAMILY,
+		DEFAULT_FONT_SIZE
+	} from '../rtf-writer.js';
 	import {
 		fileToImageSrc,
 		urlToImageSrc,
@@ -85,6 +96,8 @@
 		maxImageEdge?: number;
 		maxImageBytes?: number;
 		maxImageDisplayWidth?: number;
+		fontFamily?: string;
+		fontSize?: number;
 		onchange?: (payload: ChangePayload) => void;
 		onsave?: (payload: { html: string }) => void;
 		onimport?: (payload: { html: string }) => void;
@@ -103,11 +116,19 @@
 		maxImageEdge = DEFAULT_MAX_IMAGE_EDGE,
 		maxImageBytes = DEFAULT_MAX_IMAGE_BYTES,
 		maxImageDisplayWidth = DEFAULT_MAX_IMAGE_DISPLAY_WIDTH,
+		fontFamily = DEFAULT_FONT_FAMILY,
+		fontSize = DEFAULT_FONT_SIZE,
 		onchange,
 		onsave,
 		onimport
 	}: Props = $props();
 
+	// The same font and size go to the screen and to the RTF, so the editor
+	// shows what the receiving system will show.
+	const rtfOptions = $derived({ fontFamily, fontSize });
+	const screenFontFamily = $derived(cssFontFamily(fontFamily));
+	const screenFontSize = $derived(normalizeFontSize(fontSize));
+
 	// ── Internal state ──
 	let editorEl: HTMLDivElement | null = $state(null);
 	let contentWrapEl: HTMLDivElement | null = $state(null);
@@ -170,7 +191,7 @@
 
 	export function getRTF(): string {
 		if (!editorEl) return '';
-		return htmlToRtf(editorEl);
+		return htmlToRtf(editorEl, rtfOptions);
 	}
 
 	/**
@@ -182,7 +203,7 @@
 	 */
 	export function getRtfSize(): number {
 		if (!editorEl) return 0;
-		return htmlToRtf(editorEl).length;
+		return htmlToRtf(editorEl, rtfOptions).length;
 	}
 
 	export function clear(): void {
@@ -215,7 +236,7 @@
 				break;
 			}
 			case 'rtf': {
-				const rtf = htmlToRtf(editorEl);
+				const rtf = htmlToRtf(editorEl, rtfOptions);
 				downloadFile('document.rtf', rtf, 'application/rtf');
 				break;
 			}
@@ -788,7 +809,12 @@
 	onchange={handleImageFilesChosen}
 />
 
-<div class="ink-editor" style="--ink-min-height: {minHeight};">
+<div
+	class="ink-editor"
+	style:--ink-min-height={minHeight}
+	style:--ink-font-family={screenFontFamily}
+	style:--ink-font-size="{screenFontSize}pt"
+>
 	{#if showToolbar && !readonly}
 		<Toolbar
 			{formatState}
@@ -930,8 +956,8 @@
 		border-radius: var(--radius, 8px);
 		box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 37, 32, 0.08));
 		outline: none;
-		font-family: 'DM Sans', sans-serif;
-		font-size: 16px;
+		font-family: var(--ink-font-family, Arial, sans-serif);
+		font-size: var(--ink-font-size, 12pt);
 		line-height: 1.75;
 		color: var(--text, #2c2520);
 		caret-color: var(--accent, #d4622b);
@@ -951,9 +977,10 @@
 	}
 
 	/* ── Typography inside editor ── */
+	/* Headings use the document font and keep the same ratio to the body text
+	   as the RTF writer gives them, so the screen matches the RTF. */
 	.ink-content :global(h1) {
-		font-family: 'Instrument Serif', serif;
-		font-size: 38px;
+		font-size: 2em;
 		line-height: 1.2;
 		color: var(--ink, #1a1714);
 		margin-bottom: 16px;
@@ -961,8 +988,7 @@
 	}
 
 	.ink-content :global(h2) {
-		font-family: 'Instrument Serif', serif;
-		font-size: 28px;
+		font-size: 1.5em;
 		line-height: 1.3;
 		color: var(--ink, #1a1714);
 		margin-bottom: 12px;
@@ -970,8 +996,7 @@
 	}
 
 	.ink-content :global(h3) {
-		font-family: 'DM Sans', sans-serif;
-		font-size: 20px;
+		font-size: calc(7em / 6);
 		font-weight: 600;
 		line-height: 1.4;
 		color: var(--ink, #1a1714);
@@ -998,16 +1023,17 @@
 		color: #e8e2da;
 		padding: 20px 24px;
 		border-radius: var(--radius, 8px);
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 14px;
+		/* Same font and ratio to the body as the RTF writes code blocks in. */
+		font-family: 'Courier New', monospace;
+		font-size: calc(5em / 6);
 		line-height: 1.6;
 		margin: 16px 0;
 		overflow-x: auto;
 	}
 
 	.ink-content :global(code) {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 14px;
+		font-family: 'Courier New', monospace;
+		font-size: 1em;
 		background: var(--surface, #f2f0ec);
 		padding: 2px 6px;
 		border-radius: 3px;
@@ -1056,7 +1082,8 @@
 
 	.ink-content :global(figcaption) {
 		margin-top: 8px;
-		font-size: 13px;
+		/* Body size, as the RTF writes captions. */
+		font-size: 1em;
 		line-height: 1.5;
 		font-style: italic;
 		color: var(--text-muted, #8a7e72);
@@ -1223,11 +1250,5 @@
 		.ink-content {
 			padding: 28px 24px;
 		}
-		.ink-content :global(h1) {
-			font-size: 28px;
-		}
-		.ink-content :global(h2) {
-			font-size: 22px;
-		}
 	}
 </style>

package/dist/components/InkEditor.svelte.d.ts

@@ -21,6 +21,8 @@ interface Props {
     maxImageEdge?: number;
     maxImageBytes?: number;
     maxImageDisplayWidth?: number;
+    fontFamily?: string;
+    fontSize?: number;
     onchange?: (payload: ChangePayload) => void;
     onsave?: (payload: {
         html: string;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as RtfViewer } from './RtfViewer.svelte';
 export { default as InkEditor } from './components/InkEditor.svelte';
 export { rtfToHtml, readRtfFile } from './rtf-parser.js';
-export { htmlToRtf, estimateRtfBytes } from './rtf-writer.js';
+export { htmlToRtf, estimateRtfBytes, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from './rtf-writer.js';
+export type { RtfWriteOptions } from './rtf-writer.js';
 export { htmlToMarkdown, downloadFile } from './utils.js';

package/dist/index.js

@@ -3,5 +3,5 @@ export { default as RtfViewer } from './RtfViewer.svelte';
 export { default as InkEditor } from './components/InkEditor.svelte';
 // RTF utilities
 export { rtfToHtml, readRtfFile } from './rtf-parser.js';
-export { htmlToRtf, estimateRtfBytes } from './rtf-writer.js';
+export { htmlToRtf, estimateRtfBytes, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from './rtf-writer.js';
 export { htmlToMarkdown, downloadFile } from './utils.js';

package/dist/rtf-parser.js

@@ -10,6 +10,7 @@
  *
  * \cb (character background) is silently ignored on import.
  */
+import { HEADING_SCALE } from './rtf-writer.js';
 // ── Highlight palette (RTF \highlight 1-16) ──
 const HIGHLIGHT_COLORS = {
     1: '#000000', // Black
@@ -344,6 +345,62 @@ function parseFontTable(group) {
     }
     return fonts;
 }
+// ── Body size ──
+/** Groups whose content is not document text. */
+const destinationWords = new Set([
+    'fonttbl', 'colortbl', 'stylesheet', 'info', 'header', 'footer',
+    'headerl', 'headerr', 'headerf', 'footerl', 'footerr', 'footerf',
+    // \nonshppict duplicates the picture already carried by \*\shppict
+    'nonshppict',
+    'object', 'fldinst', 'xmlnstbl', 'listtable', 'listoverridetable',
+    'rsidtbl', 'generator', 'datafield', 'themedata', 'colorschememapping',
+    'latentstyles', 'datastore', 'mmathPr', 'author', 'operator',
+    'title', 'subject', 'doccomm', 'company', 'category', 'keywords'
+]);
+/** Default RTF font size: 12 pt, in half-points. */
+const DEFAULT_HALF_POINTS = 24;
+/**
+ * The document's body text size, in half-points: the size most of its text is
+ * set in. Headings are recognized relative to it, so a document written at
+ * 10 or 14 pt keeps its paragraphs and headings apart instead of being judged
+ * against a fixed 12 pt.
+ */
+function bodyHalfPoints(root) {
+    const chars = new Map();
+    function visit(nodes, size) {
+        for (const node of nodes) {
+            if (node.type === 'group') {
+                const first = node.children.find((n) => n.type === 'control');
+                const starred = node.children[0]?.type === 'control' && node.children[0].word === '*';
+                if (starred || (first && (first.word === 'pict' || destinationWords.has(first.word))))
+                    continue;
+                visit(node.children, size);
+            }
+            else if (node.type === 'control') {
+                if (node.word === 'fs' && node.param != null && node.param > 0)
+                    size = node.param;
+                else if (node.word === 'plain')
+                    size = DEFAULT_HALF_POINTS;
+            }
+            else {
+                const n = node.value.trim().length;
+                if (n)
+                    chars.set(size, (chars.get(size) ?? 0) + n);
+            }
+        }
+        return size;
+    }
+    visit(root.children, DEFAULT_HALF_POINTS);
+    let best = DEFAULT_HALF_POINTS;
+    let most = 0;
+    for (const [size, n] of chars) {
+        if (n > most) {
+            best = size;
+            most = n;
+        }
+    }
+    return best;
+}
 // ── Renderer ──
 export function rtfToHtml(rtfString) {
     const tokens = tokenize(rtfString);
@@ -387,6 +444,9 @@ export function rtfToHtml(rtfString) {
             }
         }
     }
+    // Sizes are shown relative to the body: body text carries no size of its
+    // own, and headings are recognized by their ratio to it.
+    const bodySize = bodyHalfPoints(rootGroup);
     // State stack for nested groups
     function defaultState() {
         return {
@@ -424,9 +484,8 @@ export function rtfToHtml(rtfString) {
             if (bg)
                 styles.push(`background-color:${bg}`);
         }
-        const ptSize = state.fontSize / 2;
-        if (ptSize && ptSize !== 12) {
-            styles.push(`font-size:${ptSize}pt`);
+        if (state.fontSize && state.fontSize !== bodySize) {
+            styles.push(`font-size:${state.fontSize / 2}pt`);
         }
         if (styles.length === 0)
             return '';
@@ -459,16 +518,6 @@ export function rtfToHtml(rtfString) {
         return result;
     }
     let skipDepth = 0;
-    const destinationWords = new Set([
-        'fonttbl', 'colortbl', 'stylesheet', 'info', 'header', 'footer',
-        'headerl', 'headerr', 'headerf', 'footerl', 'footerr', 'footerf',
-        // \nonshppict duplicates the picture already carried by \*\shppict
-        'nonshppict',
-        'object', 'fldinst', 'xmlnstbl', 'listtable', 'listoverridetable',
-        'rsidtbl', 'generator', 'datafield', 'themedata', 'colorschememapping',
-        'latentstyles', 'datastore', 'mmathPr', 'author', 'operator',
-        'title', 'subject', 'doccomm', 'company', 'category', 'keywords'
-    ]);
     function flushTable() {
         if (tableRows.length === 0)
             return;
@@ -834,17 +883,20 @@ export function rtfToHtml(rtfString) {
         }
         const sizeMatch = trimmed.match(/font-size:\s*([\d.]+)pt/);
         if (sizeMatch) {
-            const pt = parseFloat(sizeMatch[1]);
+            // Compared in half-points, rounded the way the writer rounds them, so
+            // a heading written at any body size is read back as the same level.
+            const halfPoints = Math.round(parseFloat(sizeMatch[1]) * 2);
             const alignAttr = align !== 'left' ? ` style="text-align:${align}"` : '';
-            if (pt >= 24) {
+            const atLeast = (scale) => halfPoints >= Math.round(bodySize * scale);
+            if (atLeast(HEADING_SCALE.h1)) {
                 rendered.push(`<h1${alignAttr}>${stripSizeSpan(trimmed)}</h1>`);
                 continue;
             }
-            if (pt >= 18) {
+            if (atLeast(HEADING_SCALE.h2)) {
                 rendered.push(`<h2${alignAttr}>${stripSizeSpan(trimmed)}</h2>`);
                 continue;
             }
-            if (pt >= 14) {
+            if (atLeast(HEADING_SCALE.h3)) {
                 rendered.push(`<h3${alignAttr}>${stripSizeSpan(trimmed)}</h3>`);
                 continue;
             }

package/dist/rtf-writer.d.ts

@@ -2,7 +2,8 @@
  * HTML to RTF converter
  *
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
- * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
+ * Supports: a document font and body size (Arial 12 pt by default, set with
+ * RtfWriteOptions), bold, italic, underline, strikethrough, font sizes (h1–h3),
  * foreground colors (\cf), paragraphs, bullet/numbered lists, blockquotes,
  * code blocks, hyperlinks, images (embedded as \pict picture groups with
  * their captions), horizontal rules, line breaks, and Unicode characters.
@@ -10,6 +11,31 @@
  * Background color is intentionally not written — RTF highlight support
  * is inconsistent across viewers (TextEdit uses \AppleHighlight, not \highlight).
  */
+/** Options for htmlToRtf. */
+export interface RtfWriteOptions {
+    /**
+     * Font for the whole document: body text, headings, lists and tables.
+     * Code keeps a monospace font. Default: Arial.
+     */
+    fontFamily?: string;
+    /**
+     * Body text size in points. Headings scale from it. Default: 12.
+     */
+    fontSize?: number;
+}
+/** Font used when no fontFamily is given. */
+export declare const DEFAULT_FONT_FAMILY = "Arial";
+/** Body text size, in points, used when no fontSize is given. */
+export declare const DEFAULT_FONT_SIZE = 12;
+/**
+ * Heading sizes as a multiple of the body size: at 12 pt, h1 is 24 pt, h2 18 pt
+ * and h3 14 pt. The parser reads headings back with the same ratios.
+ */
+export declare const HEADING_SCALE: {
+    readonly h1: 2;
+    readonly h2: 1.5;
+    readonly h3: number;
+};
 /**
  * Size htmlToRtf would produce, without doing the conversion.
  *
@@ -24,4 +50,16 @@
  * characters are the same number.
  */
 export declare function estimateRtfBytes(editorEl: HTMLElement): number;
-export declare function htmlToRtf(editorEl: HTMLElement): string;
+/**
+ * CSS font-family value for a font name, with the generic fallback that
+ * matches it, e.g. "Arial", sans-serif.
+ */
+export declare function cssFontFamily(name: string | undefined): string;
+/**
+ * A body size in points, as the RTF will carry it: rounded to the half-point
+ * RTF measures in, kept within what readers accept, and the default for
+ * missing or nonsense input. The editor and viewer show this same size, so
+ * the screen and the RTF agree.
+ */
+export declare function normalizeFontSize(fontSize: number | undefined): number;
+export declare function htmlToRtf(editorEl: HTMLElement, options?: RtfWriteOptions): string;

package/dist/rtf-writer.js

@@ -2,7 +2,8 @@
  * HTML to RTF converter
  *
  * Walks a contenteditable DOM tree and produces a valid RTF 1.x string.
- * Supports: bold, italic, underline, strikethrough, font sizes (h1–h3),
+ * Supports: a document font and body size (Arial 12 pt by default, set with
+ * RtfWriteOptions), bold, italic, underline, strikethrough, font sizes (h1–h3),
  * foreground colors (\cf), paragraphs, bullet/numbered lists, blockquotes,
  * code blocks, hyperlinks, images (embedded as \pict picture groups with
  * their captions), horizontal rules, line breaks, and Unicode characters.
@@ -10,6 +11,19 @@
  * Background color is intentionally not written — RTF highlight support
  * is inconsistent across viewers (TextEdit uses \AppleHighlight, not \highlight).
  */
+/** Font used when no fontFamily is given. */
+export const DEFAULT_FONT_FAMILY = 'Arial';
+/** Body text size, in points, used when no fontSize is given. */
+export const DEFAULT_FONT_SIZE = 12;
+/** Largest font size RTF readers accept (Word's limit), in points. */
+const MAX_FONT_SIZE = 1638;
+/**
+ * Heading sizes as a multiple of the body size: at 12 pt, h1 is 24 pt, h2 18 pt
+ * and h3 14 pt. The parser reads headings back with the same ratios.
+ */
+export const HEADING_SCALE = { h1: 2, h2: 1.5, h3: 7 / 6 };
+/** Code blocks are set slightly smaller than the body: 10 pt at 12 pt. */
+const PRE_SCALE = 5 / 6;
 /** 1 px at 96 dpi = 15 twips (1 twip = 1/1440 in). */
 const TWIPS_PER_PX = 15;
 // ── Color helpers ──
@@ -262,8 +276,11 @@ function base64ByteLength(base64) {
     const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
     return Math.max(0, Math.floor((base64.length * 3) / 4) - padding);
 }
-/** Bytes of RTF header, font table and colour table that precede the body. */
-const RTF_PREAMBLE_BYTES = 200;
+/**
+ * Bytes of RTF header, font table and colour table that precede the body, with
+ * the default font. Another font name changes it by the difference in length.
+ */
+const RTF_PREAMBLE_BYTES = 165;
 /** Control words wrapping one \pict group. */
 const PICTURE_OVERHEAD_BYTES = 80;
 /**
@@ -274,9 +291,9 @@ const PICTURE_OVERHEAD_BYTES = 80;
 const BLOCK_OVERHEAD_BYTES = {
     p: 14,
     div: 14,
-    h1: 32,
-    h2: 32,
-    h3: 32,
+    h1: 29,
+    h2: 29,
+    h3: 29,
     li: 35,
     blockquote: 22,
     pre: 27,
@@ -315,8 +332,58 @@ export function estimateRtfBytes(editorEl) {
     }
     return total;
 }
+// ── Font helpers ──
+/**
+ * A single font name, safe for the font table. A CSS list such as
+ * 'Arial, sans-serif' keeps only its first family, since RTF names one font.
+ * Anything that would break the table is removed: a name is terminated by ';'
+ * and cannot contain group delimiters or control words.
+ */
+function cleanFontName(name) {
+    const first = (name ?? '').replace(/["']/g, '').split(',')[0];
+    const cleaned = first.replace(/[\\{};]/g, '').trim();
+    return cleaned || DEFAULT_FONT_FAMILY;
+}
+/** RTF font family class for a font name: \froman, \fmodern or \fswiss. */
+function fontFamilyClass(name) {
+    const n = name.toLowerCase();
+    if (/courier|mono|consolas|menlo|monaco|typewriter|lucida console/.test(n))
+        return 'modern';
+    if (/times|georgia|garamond|cambria|palatino|antiqua|schoolbook|baskerville|didot|bodoni|serif/.test(n) &&
+        !/sans/.test(n)) {
+        return 'roman';
+    }
+    return 'swiss';
+}
+/**
+ * CSS font-family value for a font name, with the generic fallback that
+ * matches it, e.g. "Arial", sans-serif.
+ */
+export function cssFontFamily(name) {
+    const font = cleanFontName(name);
+    const generic = { roman: 'serif', modern: 'monospace', swiss: 'sans-serif' }[fontFamilyClass(font)];
+    return `"${font}", ${generic}`;
+}
+/**
+ * A body size in points, as the RTF will carry it: rounded to the half-point
+ * RTF measures in, kept within what readers accept, and the default for
+ * missing or nonsense input. The editor and viewer show this same size, so
+ * the screen and the RTF agree.
+ */
+export function normalizeFontSize(fontSize) {
+    if (typeof fontSize !== 'number' || !Number.isFinite(fontSize) || fontSize <= 0) {
+        return DEFAULT_FONT_SIZE;
+    }
+    return Math.min(MAX_FONT_SIZE, Math.max(1, Math.round(fontSize * 2) / 2));
+}
+/** Body size in RTF half-points. */
+function bodyHalfPoints(fontSize) {
+    return normalizeFontSize(fontSize) * 2;
+}
 // ── DOM walker / RTF generator ──
-export function htmlToRtf(editorEl) {
+export function htmlToRtf(editorEl, options = {}) {
+    const fontName = cleanFontName(options.fontFamily);
+    const bodySize = bodyHalfPoints(options.fontSize);
     const colorMap = new Map();
     colorMap.set('0,0,0', { r: 0, g: 0, b: 0 });
     collectColors(editorEl, colorMap);
@@ -332,13 +399,15 @@ export function htmlToRtf(editorEl) {
         colorTable += `\\red${c.r}\\green${c.g}\\blue${c.b};`;
     }
     colorTable += '}';
+    // \f0 is the document font, used for everything except code; \f1 is the
+    // monospace font for code.
     const fontTable = '{\\fonttbl' +
-        '{\\f0\\fswiss\\fcharset0 Helvetica;}' +
-        '{\\f1\\froman\\fcharset0 Georgia;}' +
-        '{\\f2\\fmodern\\fcharset0 Courier New;}' +
+        `{\\f0\\f${fontFamilyClass(fontName)}\\fcharset0 ${escapeRtf(fontName)};}` +
+        '{\\f1\\fmodern\\fcharset0 Courier New;}' +
         '}';
     const body = walkChildren(editorEl, {
         colorIndex,
+        bodySize,
         inPre: false,
         listCounter: 0,
         inTableCell: false,
@@ -348,7 +417,7 @@ export function htmlToRtf(editorEl) {
         fontTable +
         colorTable +
         '\\viewkind4\\uc1' +
-        '\\pard\\f0\\fs24 ' +
+        `\\pard\\f0\\fs${bodySize} ` +
         body +
         '}';
     // Backstop for the single-line guarantee. escapeRtf already collapses CR/LF
@@ -395,14 +464,15 @@ function walkChildren(parent, ctx) {
         const el = node;
         const tag = el.tagName.toLowerCase();
         switch (tag) {
+            // Heading sizes keep their ratio to the body (HEADING_SCALE).
             case 'h1':
-                rtf += `\\pard\\f1\\fs48\\b ${walkChildren(el, ctx)}\\b0\\f0\\fs24\\par `;
+                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h1)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
                 break;
             case 'h2':
-                rtf += `\\pard\\f1\\fs36\\b ${walkChildren(el, ctx)}\\b0\\f0\\fs24\\par `;
+                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h2)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
                 break;
             case 'h3':
-                rtf += `\\pard\\f0\\fs28\\b ${walkChildren(el, ctx)}\\b0\\fs24\\par `;
+                rtf += `\\pard\\f0\\fs${scaled(ctx, HEADING_SCALE.h3)}\\b ${walkChildren(el, ctx)}\\b0\\fs${ctx.bodySize}\\par `;
                 break;
             case 'p':
             case 'div': {
@@ -466,7 +536,7 @@ function walkChildren(parent, ctx) {
                 rtf += `\\pard\\li720\\i ${walkChildren(el, ctx)}\\i0\\par `;
                 break;
             case 'pre':
-                rtf += `\\pard\\f2\\fs20 ${walkChildren(el, { ...ctx, inPre: true })}\\f0\\fs24\\par `;
+                rtf += `\\pard\\f1\\fs${scaled(ctx, PRE_SCALE)} ${walkChildren(el, { ...ctx, inPre: true })}\\f0\\fs${ctx.bodySize}\\par `;
                 break;
             case 'hr':
                 rtf += `\\pard\\qc \\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\emdash\\par `;
@@ -514,7 +584,7 @@ function walkChildren(parent, ctx) {
                 break;
             case 'code':
                 if (!ctx.inPre) {
-                    rtf += `\\f2 ${walkChildren(el, ctx)}\\f0 `;
+                    rtf += `\\f1 ${walkChildren(el, ctx)}\\f0 `;
                 }
                 else {
                     rtf += walkChildren(el, ctx);
@@ -562,7 +632,7 @@ function walkChildren(parent, ctx) {
             case 'span': {
                 const colorPfx = getColorPrefix(el, ctx);
                 const sizePfx = getSizePrefix(el);
-                const sizesfx = sizePfx ? '\\fs24 ' : '';
+                const sizesfx = sizePfx ? `\\fs${ctx.bodySize} ` : '';
                 const colorSfx = colorPfx ? '\\cf0 ' : '';
                 rtf += `${colorPfx}${sizePfx}${walkChildren(el, ctx)}${sizesfx}${colorSfx}`;
                 break;
@@ -581,6 +651,10 @@ function walkChildren(parent, ctx) {
     }
     return rtf;
 }
+/** Body size times a ratio, in half-points. */
+function scaled(ctx, ratio) {
+    return Math.round(ctx.bodySize * ratio);
+}
 function getColorPrefix(el, ctx) {
     // Support both inline style.color (spans) and the color attribute (<font>)
     const color = el.style?.color ||

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-rtf-editor",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"description": "RTF viewer and rich-text editor components for Svelte 5",
 	"license": "MIT",
 	"homepage": "https://github.com/jcelano/svelte-rtf-editor#readme",