Skip to content

feat(converter): improve tab rendering with leader character support#83

Merged
JSv4 merged 1 commit intomainfrom
feature/tab-rendering-improvements
Dec 20, 2025
Merged

feat(converter): improve tab rendering with leader character support#83
JSv4 merged 1 commit intomainfrom
feature/tab-rendering-improvements

Conversation

@JSv4
Copy link
Copy Markdown
Owner

@JSv4 JSv4 commented Dec 20, 2025

Summary

This PR improves tab rendering in the HTML converter, particularly for tab stops with leader characters (dots, underscores, hyphens).

Key Changes

  • Fixed tab width calculation fallback: CalcWidthOfRunInTwips now uses character-based estimation when fonts are unavailable instead of returning 0, enabling proper tab positioning on Azure, WASM, and other environments without fonts
  • Fixed leader span CSS: Added display: inline-block to leader character spans so the CSS width property takes effect
  • Added estimation fallback in MetricsGetter: When SkiaSharp measurement fails or returns 0, uses estimation formula (charWidth = fontSize * 0.6 / 2)
  • Added TabAlignment attribute propagation: Enables future alignment-aware rendering for center/right/decimal tabs

Testing

  • Added Playwright visual tests for tab rendering (HC024-HC027)
  • Added LibreOffice reference screenshots for comparison
  • All 1131 .NET tests pass
  • All 6 Playwright tab visual tests pass

Documentation

  • Documented field code resolution as known gap (affects TOC page numbers when document hasn't been printed/updated)
  • Documented platform-specific leader character count variation

Known Limitations

Leader character counts may vary between platforms due to font measurement differences:

  • Desktop .NET uses SkiaSharp for actual font measurement - period characters may measure wider, resulting in fewer dots
  • WASM uses character-based estimation
  • The tab span width is correct; only the dot count filling that width varies

Test plan

  • Run .NET tests: dotnet test Docxodus.Tests/Docxodus.Tests.csproj
  • Run Playwright tests: npx playwright test tabs-visual.spec.ts
  • Visual inspection of tab rendering in test snapshots

- Fix CalcWidthOfRunInTwips to use estimation fallback for unknown fonts
  instead of returning 0 early, enabling proper tab positioning
- Add display:inline-block to leader character spans so CSS width
  property takes effect
- Add estimation fallback in MetricsGetter._getTextWidth when SkiaSharp
  measurement fails or returns 0
- Propagate tab alignment type via PtOpenXml.TabAlignment attribute
  to enable future alignment-aware rendering
- Add Playwright visual tests for tab rendering (HC024-HC027)
- Add LibreOffice reference screenshots for comparison
- Document field code resolution as known gap (affects TOC page numbers)
- Document platform-specific leader character count variation

Note: Leader character counts may vary between platforms due to font
measurement differences. Desktop .NET uses SkiaSharp measurement,
while WASM uses character-based estimation.
@JSv4 JSv4 merged commit d5bda05 into main Dec 20, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant