@polotno/pdf-export 0.1.32 → 0.1.34

package/lib/text.js

@@ -4,49 +4,15 @@ import fetch from 'node-fetch';
 import { stripHtml } from 'string-strip-html';
 import { decode as decodeEntities } from 'html-entities';
 /**
- * Expand tabs to spaces based on tab stops (every 8 characters by default, matching HTML behavior)
- * This ensures that tabs align to tab stops, so deleting characters before tabs doesn't affect
- * the position of text after tabs.
+ * Expand tabs to spaces based on character positions (every 8 characters by default).
+ * This is a lightweight character-based approximation used for line-breaking calculations.
  *
- * TODO: KNOWN LIMITATION - This doesn't match Chrome/browser behavior correctly!
- *
- * CURRENT LOGIC (character-based):
- * - Counts characters: "01\t" → "01      " (6 spaces to reach position 8)
- * - Problem: In proportional fonts, "01" visually takes ~15px but we treat it as 2 chars
- * - Result: Tabs misalign because visual width ≠ character count
- *
- * ACTUAL CHROME BEHAVIOR (visual/pixel-based):
- * - Measures visual width: "01" = 15px, single space = 5px
- * - Tab stop at: 8 spaces × 5px = 40px
- * - "01\t" should advance from 15px → 40px (add 25px, or ~5 spaces)
- * - "\t" should advance from 0px → 40px (add 40px, or 8 spaces)
- * - Both end at same VISUAL position (40px), not same character position
- *
- * HOW TO FIX (future work):
- * 1. Create `expandTabsWithVisualWidth(text, doc, textOptions)` that:
- *    - Measures actual text width character-by-character using doc.widthOfString()
- *    - Calculates tab stops as multiples of (spaceWidth × 8)
- *    - For each tab, determines visual advance needed to reach next tab stop
- * 2. In rendering (renderTextFill, renderStandardStroke, renderPDFX1aStroke):
- *    - Split segments at tab characters
- *    - Replace each tab with N spaces
- *    - Use PDFKit's wordSpacing option to stretch/shrink those spaces to exact width
- *    - Example: Need 25px advance → use 5 spaces + wordSpacing adjustment
- * 3. In line breaking (splitTextIntoLines):
- *    - Use visual width measurement for all width calculations
- *    - Ensure wrapped lines maintain accurate widths
- *
- * CHALLENGES:
- * - Must measure with correct font for each styled segment (bold/italic affects width)
- * - wordSpacing interacts with justify alignment - need careful handling
- * - Line breaking must use same width calculations as rendering
- * - Performance: width measurement is expensive, may need caching
- *
- * For now, we use character-based expansion which approximately matches monospace fonts
- * but misaligns in proportional fonts like Roboto/Arial. This is a known issue.
+ * NOTE: This is NOT used for actual rendering! The rendering functions use visual width
+ * measurements and manual cursor positioning for accurate tab alignment in proportional fonts.
+ * This function is only used in splitTextIntoLines() to approximate text widths for wrapping.
  *
  * @param text - Text containing tabs to expand
- * @param tabSize - Size of tab stops (default 8, matching HTML)
+ * @param tabSize - Size of tab stops in characters (default 8)
  * @param startPosition - Starting character position for tab stop calculation (default 0)
  * @returns Text with tabs expanded to spaces (character-based approximation)
  */
@@ -76,48 +42,136 @@ function expandTabsToTabStops(text, tabSize = 8, startPosition = 0) {
     }
     return result;
 }
+function isTabDebuggingEnabled() {
+    return typeof process !== 'undefined' && process.env?.DEBUG_TABS === '1';
+}
+function getEffectiveTabSize(tabSizeInSpaces) {
+    if (typeof process === 'undefined') {
+        return tabSizeInSpaces;
+    }
+    const envValue = process.env?.POLOTNO_TAB_SIZE;
+    if (!envValue) {
+        return tabSizeInSpaces;
+    }
+    const parsed = parseInt(envValue, 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : tabSizeInSpaces;
+}
+function formatTabDebugLabel(context) {
+    if (!context) {
+        return 'unknown';
+    }
+    if (context.elementId) {
+        return context.elementId;
+    }
+    if (context.elementName) {
+        return context.elementName;
+    }
+    return 'unknown';
+}
+function formatSegmentPreview(text) {
+    if (!text) {
+        return '';
+    }
+    return text.replace(/\s+/g, ' ').trim().slice(0, 80);
+}
+function getTabDebugContext(element, segment) {
+    if (!isTabDebuggingEnabled()) {
+        return undefined;
+    }
+    const elementWithMeta = element;
+    return {
+        elementId: elementWithMeta.id,
+        elementName: elementWithMeta.name,
+        segmentPreview: segment.text,
+    };
+}
 /**
- * Expand tabs to spaces based on actual text width measurements (for PDF rendering)
- * This ensures tabs align to visual tab stops based on actual font metrics, not character count.
+ * Expand tabs in text with word spacing adjustment for accurate visual alignment.
+ * This splits text at tab boundaries and calculates the wordSpacing needed to make
+ * the replacement spaces render at exactly the right width to reach tab stops.
+ *
  * @param text - Text containing tabs to expand
  * @param doc - PDFKit document for measuring text width
  * @param textOptions - PDFKit text options (font, size, etc.)
  * @param tabSizeInSpaces - Number of spaces per tab stop (default 8)
  * @param currentWidth - Current text width in points (default 0)
- * @returns Object with expanded text and final width
+ * @returns Array of segments with expanded text and wordSpacing adjustments
  */
-function expandTabsToTabStopsByWidth(text, doc, textOptions, tabSizeInSpaces = 8, currentWidth = 0) {
-    if (!text) {
-        return { text, width: currentWidth };
+function expandTabsWithWordSpacing(text, doc, textOptions, tabSizeInSpaces = 8, currentWidth = 0, debugContext) {
+    if (!text || !text.includes('\t')) {
+        // No tabs, return as-is
+        const width = currentWidth + doc.widthOfString(text, textOptions);
+        return {
+            segments: [{ type: 'text', text, wordSpacing: 0 }],
+            finalWidth: width,
+        };
     }
-    // Measure the width of one space character
+    // Measure the width of one space character (for rendering tab spaces)
     const spaceWidth = doc.widthOfString(' ', textOptions);
-    const tabStopWidth = spaceWidth * tabSizeInSpaces;
-    let result = '';
+    const effectiveTabSize = getEffectiveTabSize(tabSizeInSpaces);
+    const tabStopWidth = Math.max(spaceWidth * effectiveTabSize, spaceWidth || 1);
+    const shouldLog = isTabDebuggingEnabled() && !!debugContext;
+    const segments = [];
     let width = currentWidth;
+    let currentSegment = '';
     for (let i = 0; i < text.length; i++) {
         const char = text[i];
         if (char === '\t') {
-            // Calculate how many spaces needed to reach next tab stop based on actual width
+            // Flush current segment if any
+            if (currentSegment) {
+                const segmentWidth = doc.widthOfString(currentSegment, textOptions);
+                segments.push({ type: 'text', text: currentSegment, wordSpacing: 0 });
+                width += segmentWidth;
+                currentSegment = '';
+            }
+            // Calculate the exact distance to next tab stop
             const currentTabPosition = width % tabStopWidth;
-            const spacesNeeded = Math.ceil((tabStopWidth - currentTabPosition) / spaceWidth);
+            const targetWidth = tabStopWidth - currentTabPosition;
+            const widthBeforeTab = width;
+            // Use a reasonable number of spaces (at least 1, usually 2-8)
+            const spacesNeeded = Math.max(1, Math.round(targetWidth / spaceWidth));
             const spaces = ' '.repeat(spacesNeeded);
-            result += spaces;
-            width += doc.widthOfString(spaces, textOptions);
+            // Calculate the natural width of those spaces
+            const naturalWidth = doc.widthOfString(spaces, textOptions);
+            // Calculate wordSpacing adjustment to make spaces fill exact target width
+            // wordSpacing is added between words, and spaces count as word separators
+            // For N spaces, we have N-1 word boundaries, but PDFKit applies wordSpacing
+            // to each space character in the context of word separation
+            const wordSpacingAdjustment = spacesNeeded > 1
+                ? (targetWidth - naturalWidth) / (spacesNeeded - 1)
+                : 0;
+            if (shouldLog) {
+                console.log(`[polotno-tabs] element=${formatTabDebugLabel(debugContext)} text="${formatSegmentPreview(debugContext?.segmentPreview)}" startWidth=${widthBeforeTab.toFixed(2)} targetStop=${(widthBeforeTab + targetWidth).toFixed(2)} spaces=${spacesNeeded} naturalWidth=${naturalWidth.toFixed(2)} wordSpacing=${wordSpacingAdjustment.toFixed(4)}`);
+            }
+            // Emit a tab instruction so the renderer can manually reposition the cursor.
+            segments.push({
+                type: 'tab',
+                advanceWidth: widthBeforeTab + targetWidth,
+            });
+            width += targetWidth;
         }
         else if (char === '\n') {
-            // Reset width on newline (tab stops reset at line start)
-            result += char;
-            width = 0;
+            // Flush current segment and add newline
+            if (currentSegment) {
+                const segmentWidth = doc.widthOfString(currentSegment, textOptions);
+                segments.push({ type: 'text', text: currentSegment, wordSpacing: 0 });
+                width += segmentWidth;
+                currentSegment = '';
+            }
+            segments.push({ type: 'text', text: '\n', wordSpacing: 0 });
+            width = 0; // Reset width on newline
         }
         else {
-            result += char;
-            // Measure the actual width of this character
-            const charWidth = doc.widthOfString(char, textOptions);
-            width += charWidth;
+            currentSegment += char;
         }
     }
-    return { text: result, width };
+    // Flush remaining segment
+    if (currentSegment) {
+        const segmentWidth = doc.widthOfString(currentSegment, textOptions);
+        segments.push({ type: 'text', text: currentSegment, wordSpacing: 0 });
+        width += segmentWidth;
+    }
+    return { segments, finalWidth: width };
 }
 function decodeHtmlEntities(text) {
     if (!text) {
@@ -152,11 +206,10 @@ function normalizeRichText(text) {
     normalized = normalized.replace(/\n{3,}/g, '\n\n');
     // Trim stray leading/trailing newlines introduced by paragraph conversion
     normalized = normalized.replace(/^\n+/, '').replace(/\n+$/, '');
-    // Expand tabs to tab stops AFTER processing HTML structure
-    // This preserves HTML-like tab behavior where tabs align to fixed positions
-    // so deleting characters before tabs doesn't affect the position of text after tabs
-    // Tabs are expanded in the text content only, not in HTML tags
-    normalized = expandTabsToTabStops(normalized, 8);
+    // NOTE: We do NOT expand tabs here anymore!
+    // Tab expansion is now handled in the rendering functions (renderTextFill, renderPDFX1aStroke, renderStandardStroke)
+    // using visual width measurements and wordSpacing adjustments for accurate alignment in proportional fonts.
+    // The old character-based expandTabsToTabStops() was incorrect for proportional fonts.
     // Decode common HTML non-breaking space entities into their unicode counterpart
     normalized = normalized.replace(/&(nbsp|#160|#xA0);/gi, '\u00A0');
     // Strip zero-width characters that can create missing-glyph boxes in PDF output
@@ -260,30 +313,18 @@ export async function getGoogleFontPath(fontFamily, fontWeight = 'normal', itali
     const urls = getUrls(text);
     return urls.values().next().value;
 }
-export async function loadFontIfNeeded(doc, element, fonts) {
-    // check if universal font is already defined
-    if (fonts[element.fontFamily]) {
-        doc.font(element.fontFamily);
-        return element.fontFamily;
-    }
-    const isItalic = element.fontStyle?.indexOf('italic') >= 0;
-    const isBold = element.fontWeight == 'bold';
-    const fontKey = getFontKey(element.fontFamily, isBold, isItalic, element.fontWeight);
-    if (!fonts[fontKey]) {
-        const src = await getGoogleFontPath(element.fontFamily, element.fontWeight, isItalic);
-        doc.registerFont(fontKey, await srcToBuffer(src));
-        fonts[fontKey] = true;
-    }
-    doc.font(fontKey);
-    return fontKey;
-}
 /**
- * Load font for a rich text segment
+ * Load font for a text element or segment
  */
 async function loadFontForSegment(doc, segment, element, fonts) {
     const fontFamily = element.fontFamily;
-    const bold = segment.bold || element.fontWeight == 'bold' || false;
-    const italic = segment.italic || element.fontStyle?.indexOf('italic') >= 0 || false;
+    // Determine bold/italic from segment or element
+    const bold = segment
+        ? segment.bold || element.fontWeight == 'bold' || false
+        : element.fontWeight == 'bold';
+    const italic = segment
+        ? segment.italic || element.fontStyle?.indexOf('italic') >= 0 || false
+        : element.fontStyle?.indexOf('italic') >= 0 || false;
     // Check if universal font is already defined
     if (fonts[fontFamily]) {
         doc.font(fontFamily);
@@ -299,6 +340,55 @@ async function loadFontForSegment(doc, segment, element, fonts) {
     doc.font(fontKey);
     return fontKey;
 }
+// Alias for backward compatibility
+export async function loadFontIfNeeded(doc, element, fonts) {
+    return loadFontForSegment(doc, null, element, fonts);
+}
+async function buildRenderSegmentsForLine(doc, element, lineText, textOptions, fonts) {
+    const parsedSegments = parseHTMLToSegments(lineText, element);
+    let currentLineWidth = 0;
+    const renderSegments = [];
+    for (const segment of parsedSegments) {
+        const fontKey = await loadFontForSegment(doc, segment, element, fonts);
+        doc.font(fontKey);
+        doc.fontSize(element.fontSize);
+        if (segment.text.includes('\t')) {
+            const expanded = expandTabsWithWordSpacing(segment.text, doc, textOptions, 8, currentLineWidth, getTabDebugContext(element, segment));
+            currentLineWidth = expanded.finalWidth;
+            for (const tabSegment of expanded.segments) {
+                if (tabSegment.type === 'tab') {
+                    renderSegments.push({
+                        segment,
+                        fontKey,
+                        type: 'tab',
+                        advanceWidth: tabSegment.advanceWidth,
+                    });
+                }
+                else {
+                    renderSegments.push({
+                        segment,
+                        fontKey,
+                        type: 'text',
+                        text: tabSegment.text,
+                        wordSpacing: tabSegment.wordSpacing,
+                    });
+                }
+            }
+        }
+        else {
+            const segmentWidth = doc.widthOfString(segment.text, textOptions);
+            currentLineWidth += segmentWidth;
+            renderSegments.push({
+                segment,
+                fontKey,
+                type: 'text',
+                text: segment.text,
+                wordSpacing: 0,
+            });
+        }
+    }
+    return renderSegments;
+}
 /**
  * Parse HTML into tokens (text and tags)
  */
@@ -789,15 +879,14 @@ function splitTextIntoLines(doc, element, props) {
     return lines;
 }
 /**
- * Calculate horizontal offset for a line of text based on alignment
- * @param element - Text element with alignment settings
- * @param lineWidth - Width of the current line
- * @returns X offset for positioning the line
+ * Calculate X offset for list markers (not used for text content positioning)
  */
 function calculateLineXOffset(element, line) {
+    // Markers are always at the left edge, regardless of text alignment
     if (line.listMeta) {
         return 0;
     }
+    // For non-list lines, markers follow text alignment
     const align = element.align;
     const targetWidth = line.width;
     if (align === 'right') {
@@ -806,26 +895,13 @@ function calculateLineXOffset(element, line) {
     else if (align === 'center') {
         return (element.width - targetWidth) / 2;
     }
-    else if (align === 'justify') {
-        return 0;
-    }
+    // left or justify: markers at position 0
     return 0;
 }
 function calculateTextContentXOffset(element, line) {
     const align = element.align;
     const textWidth = line.width;
-    if (!line.listMeta) {
-        if (align === 'right') {
-            return element.width - textWidth;
-        }
-        else if (align === 'center') {
-            return (element.width - textWidth) / 2;
-        }
-        else {
-            return 0;
-        }
-    }
-    const baseStart = line.listMeta.textStartPx;
+    const baseStart = line.listMeta?.textStartPx ?? 0;
     const availableWidth = Math.max(element.width - baseStart, 0);
     if (align === 'right') {
         return baseStart + Math.max(availableWidth - textWidth, 0);
@@ -833,8 +909,103 @@ function calculateTextContentXOffset(element, line) {
     else if (align === 'center') {
         return baseStart + Math.max((availableWidth - textWidth) / 2, 0);
     }
-    else {
-        return baseStart;
+    return baseStart;
+}
+/**
+ * Calculate effective width for text rendering, considering justify and underline constraints
+ */
+function calculateEffectiveWidth(element, line, widthOption, hasUnderline) {
+    if (widthOption !== undefined) {
+        return widthOption;
+    }
+    if (hasUnderline) {
+        return element.width;
+    }
+    return undefined;
+}
+/**
+ * Prepare rendering context for a line (calculates positions, widths, handles markers)
+ */
+async function prepareLineForRendering(doc, element, line, lineIndex, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, markerColor, markerOpacity, markerMode) {
+    const markerXOffset = calculateLineXOffset(element, line);
+    const lineYOffset = yOffset + cumulativeYOffset;
+    const strippedLineText = stripHtml(line.text).result;
+    const heightOfLine = line.text === ''
+        ? lineHeightPx
+        : doc.heightOfString(strippedLineText, textOptions);
+    const contentStartX = calculateTextContentXOffset(element, line);
+    const isJustify = element.align === 'justify';
+    // Disable justification if line contains tabs - tabs position content precisely,
+    // and justification would interfere by spreading spaces
+    const hasTabs = line.text.includes('\t');
+    const widthOption = isJustify && !hasTabs
+        ? Math.max(element.width - (line.listMeta ? line.listMeta.textStartPx : 0), 1)
+        : undefined;
+    // Handle list markers if needed
+    if (line.listMeta?.showMarker) {
+        await drawListMarker(doc, element, line, markerXOffset, lineYOffset, fonts, markerColor, markerOpacity, markerMode, textOptions);
+        // Restore color after drawing marker (marker may have changed the color state)
+        if (markerMode === 'fill') {
+            doc.fillColor(markerColor, markerOpacity);
+        }
+        else {
+            doc.strokeColor(markerColor, markerOpacity);
+        }
+    }
+    return {
+        markerXOffset,
+        lineYOffset,
+        contentStartX,
+        widthOption,
+        heightOfLine,
+    };
+}
+/**
+ * Render segments for a line with flexible options for different rendering modes
+ */
+async function renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, options) {
+    const { mode, color, opacity = element.opacity, heightOfLine, offsetX = 0, offsetY = 0, applySegmentColor, } = options;
+    const totalTextSegments = renderSegments.filter((seg) => seg.type === 'text').length;
+    let processedTextSegments = 0;
+    // Position cursor at line start (with optional offset)
+    doc.x = context.contentStartX + offsetX;
+    doc.y = context.lineYOffset + offsetY;
+    for (const renderSegment of renderSegments) {
+        if (renderSegment.type === 'tab') {
+            const advanceWidth = renderSegment.advanceWidth ?? 0;
+            doc.x = context.contentStartX + advanceWidth + offsetX;
+            continue;
+        }
+        const { segment, text = '', wordSpacing = 0, fontKey } = renderSegment;
+        processedTextSegments += 1;
+        const isLastSegment = processedTextSegments === totalTextSegments;
+        doc.font(fontKey);
+        doc.fontSize(element.fontSize);
+        // Apply color (either segment-specific or global)
+        if (applySegmentColor) {
+            applySegmentColor(segment);
+        }
+        else if (color) {
+            if (mode === 'fill') {
+                doc.fillColor(color, opacity);
+            }
+            else {
+                doc.strokeColor(color, opacity);
+            }
+        }
+        const hasUnderline = segment.underline || textOptions.underline || false;
+        const effectiveWidth = calculateEffectiveWidth(element, line, context.widthOption, hasUnderline);
+        doc.text(text, {
+            ...textOptions,
+            width: effectiveWidth,
+            height: heightOfLine,
+            continued: !isLastSegment,
+            underline: hasUnderline,
+            lineBreak: hasUnderline,
+            stroke: mode === 'stroke',
+            fill: mode === 'fill',
+            wordSpacing,
+        });
     }
 }
 /**
@@ -975,8 +1146,7 @@ async function drawListMarker(doc, element, line, lineXOffset, lineYOffset, font
 async function renderPDFX1aStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts) {
     const strokeColor = parseColor(element.stroke).hex;
     const strokeWidth = element.strokeWidth;
-    const isJustify = element.align === 'justify';
-    // Generate stroke offsets in a circle pattern
+    // Generate stroke offsets in a circle pattern (8 directions)
     const offsets = [];
     for (let angle = 0; angle < 360; angle += 45) {
         const radian = (angle * Math.PI) / 180;
@@ -990,66 +1160,21 @@ async function renderPDFX1aStroke(doc, element, textLines, yOffset, lineHeightPx
     doc.fillColor(strokeColor, element.opacity);
     for (let i = 0; i < textLines.length; i++) {
         const line = textLines[i];
-        const markerXOffset = calculateLineXOffset(element, line);
-        const lineYOffset = yOffset + i * lineHeightPx;
-        const contentStartX = calculateTextContentXOffset(element, line);
-        const widthOption = isJustify
-            ? Math.max(element.width - (line.listMeta ? line.listMeta.textStartPx : 0), 1)
-            : undefined;
-        if (line.listMeta?.showMarker) {
-            await drawListMarker(doc, element, line, markerXOffset, lineYOffset, fonts, strokeColor, element.opacity, 'fill', textOptions);
-            doc.fillColor(strokeColor, element.opacity);
-        }
+        const context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, i * lineHeightPx, textOptions, fonts, strokeColor, element.opacity, 'fill');
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        // Render with each offset to create stroke effect
         for (const offset of offsets) {
-            doc.text('', contentStartX + offset.x, lineYOffset + offset.y, {
+            doc.text('', context.contentStartX + offset.x, context.lineYOffset + offset.y, {
                 height: 0,
                 width: 0,
             });
-            const segments = parseHTMLToSegments(line.text, element);
-            // Expand tabs in segments while tracking actual width across segments
-            // This maintains tab stop alignment based on actual font metrics, not character count
-            let currentLineWidth = 0;
-            const segmentsWithExpandedTabs = [];
-            for (const segment of segments) {
-                // Check if segment has tabs
-                const hasTabs = segment.text.includes('\t');
-                if (hasTabs) {
-                    // Load font for this segment to get accurate measurements
-                    await loadFontForSegment(doc, segment, element, fonts);
-                    doc.fontSize(element.fontSize);
-                    // Create text options for this segment
-                    const segmentTextOptions = {
-                        ...textOptions,
-                    };
-                    // Expand tabs based on actual width
-                    const expanded = expandTabsToTabStopsByWidth(segment.text, doc, segmentTextOptions, 8, currentLineWidth);
-                    currentLineWidth = expanded.width;
-                    segmentsWithExpandedTabs.push({ ...segment, text: expanded.text });
-                }
-                else {
-                    // No tabs, just measure the width and update position
-                    await loadFontForSegment(doc, segment, element, fonts);
-                    doc.fontSize(element.fontSize);
-                    const segmentWidth = doc.widthOfString(segment.text, textOptions);
-                    currentLineWidth += segmentWidth;
-                    segmentsWithExpandedTabs.push(segment);
-                }
-            }
-            for (let segmentIndex = 0; segmentIndex < segmentsWithExpandedTabs.length; segmentIndex++) {
-                const segment = segmentsWithExpandedTabs[segmentIndex];
-                const fontKey = await loadFontForSegment(doc, segment, element, fonts);
-                doc.font(fontKey);
-                doc.fontSize(element.fontSize);
-                doc.text(segment.text, {
-                    ...textOptions,
-                    width: widthOption,
-                    stroke: false,
-                    fill: true,
-                    continued: segmentIndex !== segmentsWithExpandedTabs.length - 1,
-                    underline: segment.underline || textOptions.underline || false,
-                    lineBreak: !!segment.underline,
-                });
-            }
+            await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+                mode: 'fill',
+                color: strokeColor,
+                opacity: element.opacity,
+                offsetX: offset.x,
+                offsetY: offset.y,
+            });
         }
     }
     doc.restore();
@@ -1059,7 +1184,6 @@ async function renderPDFX1aStroke(doc, element, textLines, yOffset, lineHeightPx
  * Render text stroke using standard PDF stroke
  */
 async function renderStandardStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts) {
-    const isJustify = element.align === 'justify';
     const strokeParsedColor = parseColor(element.stroke);
     doc.save();
     doc.lineWidth(element.strokeWidth);
@@ -1068,51 +1192,15 @@ async function renderStandardStroke(doc, element, textLines, yOffset, lineHeight
     let cumulativeYOffset = 0;
     for (let i = 0; i < textLines.length; i++) {
         const line = textLines[i];
-        const markerXOffset = calculateLineXOffset(element, line);
-        const lineYOffset = yOffset + cumulativeYOffset;
-        const strippedLineText = stripHtml(line.text).result;
-        const heightOfLine = line.text === ''
-            ? lineHeightPx
-            : doc.heightOfString(strippedLineText, textOptions);
-        cumulativeYOffset += heightOfLine;
-        const contentStartX = calculateTextContentXOffset(element, line);
-        const widthOption = isJustify
-            ? Math.max(element.width - (line.listMeta ? line.listMeta.textStartPx : 0), 1)
-            : undefined;
-        if (line.listMeta?.showMarker) {
-            await drawListMarker(doc, element, line, markerXOffset, lineYOffset, fonts, strokeParsedColor.hex, element.opacity, 'stroke', textOptions);
-            doc.strokeColor(strokeParsedColor.hex, element.opacity);
-        }
-        // Position cursor at line start
-        // Use moveTo to set position directly without corrupting text rendering state
-        doc.x = contentStartX;
-        doc.y = lineYOffset;
-        const segments = parseHTMLToSegments(line.text, element);
-        for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
-            const segment = segments[segmentIndex];
-            const fontKey = await loadFontForSegment(doc, segment, element, fonts);
-            doc.font(fontKey);
-            doc.fontSize(element.fontSize);
-            doc.strokeColor(strokeParsedColor.hex, element.opacity);
-            const hasUnderline = segment.underline || textOptions.underline || false;
-            // When underline is enabled, we need lineBreak: true to avoid NaN errors in PDFKit
-            // But we must preserve the width constraint to prevent unwanted text wrapping
-            const effectiveWidth = widthOption !== undefined
-                ? widthOption
-                : hasUnderline
-                    ? element.width
-                    : widthOption;
-            doc.text(segment.text, {
-                ...textOptions,
-                width: effectiveWidth,
-                height: heightOfLine,
-                continued: segmentIndex !== segments.length - 1,
-                stroke: true,
-                fill: false,
-                underline: hasUnderline,
-                lineBreak: hasUnderline, // Workaround for pdfkit bug - enable lineBreak when underline is used
-            });
-        }
+        const context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, strokeParsedColor.hex, element.opacity, 'stroke');
+        cumulativeYOffset += context.heightOfLine;
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+            mode: 'stroke',
+            color: strokeParsedColor.hex,
+            opacity: element.opacity,
+            heightOfLine: context.heightOfLine,
+        });
     }
     doc.restore();
 }
@@ -1126,71 +1214,14 @@ async function renderTextFill(doc, element, textLines, yOffset, lineHeightPx, te
     const baseParsedColor = parseColor(element.fill);
     const baseOpacity = Math.min(baseParsedColor.rgba[3] ?? 1, element.opacity, 1);
     doc.fillColor(baseParsedColor.hex, baseOpacity);
-    const isJustify = element.align === 'justify';
     let cumulativeYOffset = 0;
     for (let i = 0; i < textLines.length; i++) {
         const line = textLines[i];
-        const markerXOffset = calculateLineXOffset(element, line);
-        const lineYOffset = yOffset + cumulativeYOffset;
-        const strippedLineText = stripHtml(line.text).result;
-        const heightOfLine = line.text === ''
-            ? lineHeightPx
-            : doc.heightOfString(strippedLineText, textOptions);
-        cumulativeYOffset += heightOfLine;
-        const contentStartX = calculateTextContentXOffset(element, line);
-        const widthOption = isJustify
-            ? Math.max(element.width - (line.listMeta ? line.listMeta.textStartPx : 0), 1)
-            : undefined;
-        if (line.listMeta?.showMarker) {
-            await drawListMarker(doc, element, line, markerXOffset, lineYOffset, fonts, baseParsedColor.hex, baseOpacity, 'fill', textOptions);
-            doc.fillColor(baseParsedColor.hex, baseOpacity);
-        }
-        // Position cursor at line start
-        // Use direct assignment to set position without corrupting text rendering state
-        doc.x = contentStartX;
-        doc.y = lineYOffset;
-        // Parse line into styled segments
-        const segments = parseHTMLToSegments(line.text, element);
-        // Expand tabs in segments while tracking actual width across segments
-        // This maintains tab stop alignment based on actual font metrics, not character count
-        // Note: Tabs should already be expanded by normalizeRichText, but we handle them here
-        // in case line.text still contains tabs (e.g., from HTML parsing that preserves tabs)
-        let currentLineWidth = 0;
-        const segmentsWithExpandedTabs = [];
-        for (const segment of segments) {
-            // Check if segment has tabs
-            const hasTabs = segment.text.includes('\t');
-            if (hasTabs) {
-                // Load font for this segment to get accurate measurements
-                await loadFontForSegment(doc, segment, element, fonts);
-                doc.fontSize(element.fontSize);
-                // Create text options for this segment
-                const segmentTextOptions = {
-                    ...textOptions,
-                };
-                // Expand tabs based on actual width
-                const expanded = expandTabsToTabStopsByWidth(segment.text, doc, segmentTextOptions, 8, currentLineWidth);
-                currentLineWidth = expanded.width;
-                segmentsWithExpandedTabs.push({ ...segment, text: expanded.text });
-            }
-            else {
-                // No tabs, just measure the width and update position
-                // Load font to measure correctly
-                await loadFontForSegment(doc, segment, element, fonts);
-                doc.fontSize(element.fontSize);
-                const segmentWidth = doc.widthOfString(segment.text, textOptions);
-                currentLineWidth += segmentWidth;
-                segmentsWithExpandedTabs.push(segment);
-            }
-        }
-        // Render each segment with its own styling
-        for (let segmentIndex = 0; segmentIndex < segmentsWithExpandedTabs.length; segmentIndex++) {
-            const segment = segmentsWithExpandedTabs[segmentIndex];
-            const isLastSegment = segmentIndex === segmentsWithExpandedTabs.length - 1;
-            // Load appropriate font for this segment
-            await loadFontForSegment(doc, segment, element, fonts);
-            doc.fontSize(element.fontSize);
-            // Apply segment color
+        const context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, baseParsedColor.hex, baseOpacity, 'fill');
+        cumulativeYOffset += context.heightOfLine;
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        // Apply segment-specific colors for rich text
+        const applySegmentColor = (segment) => {
             const segmentColor = segment.color
                 ? parseColor(segment.color).hex
                 : parseColor(element.fill).hex;
@@ -1199,28 +1230,12 @@ async function renderTextFill(doc, element, textLines, yOffset, lineHeightPx, te
                 : parseColor(element.fill);
             const segmentOpacity = Math.min(segmentParsedColor.rgba[3] ?? 1, element.opacity, 1);
             doc.fillColor(segmentColor, segmentOpacity);
-            // Render segment text
-            const hasUnderline = segment.underline || textOptions.underline || false;
-            // When underline is enabled, we need lineBreak: true to avoid NaN errors in PDFKit
-            // But we must preserve the width constraint to prevent unwanted text wrapping
-            // For non-justified text, widthOption is undefined, which would remove the width constraint
-            // So we use widthOption when available (for justify), otherwise use element.width for underlines
-            const effectiveWidth = widthOption !== undefined
-                ? widthOption
-                : hasUnderline
-                    ? element.width
-                    : widthOption;
-            doc.text(segment.text, {
-                ...textOptions,
-                width: effectiveWidth,
-                height: heightOfLine,
-                continued: !isLastSegment,
-                underline: hasUnderline,
-                lineBreak: hasUnderline, // Workaround for pdfkit bug - enable lineBreak when underline is used
-                stroke: false,
-                fill: true,
-            });
-        }
+        };
+        await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+            mode: 'fill',
+            heightOfLine: context.heightOfLine,
+            applySegmentColor,
+        });
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polotno/pdf-export",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Convert Polotno JSON into vector PDF",
   "type": "module",
   "main": "./lib/index.js",