chenglou/pretext
Pretext
Pretext is a canvas-based text layout engine designed to calculate precise text dimensions and line breaks for custom rendering. It serves as a rich text measurement tool and a cross-browser typography normalizer, enabling the determination of pixel-perfect widths and heights for mixed inline content without relying on browser CSS.
The project distinguishes itself through its ability to handle complex typography and dynamic layouts. It implements language-specific segmentation rules for CJK and Hangul scripts and corrects emoji width variances between DOM and canvas rendering. Additionally, it can flow text around variable-width obstacles and manage atomic inline elements, such as chips and mentions, as single indivisible units during the measurement process.
The engine covers a broad range of layout capabilities, including multilingual text formatting, manual line-breaking control, and the processing of soft hyphens. It utilizes a two-phase layout calculation and segment caching to determine paragraph height, container width, and line-by-line layouts for use in graphics engines.
Features
- Canvas Rendering Engines - Implements a canvas rendering engine to calculate precise text metrics and dimensions.
- Text Rendering - Provides a canvas-based engine to calculate precise dimensions and line breaks for custom text rendering.
- Multilingual Text Processing - Applies language-specific preprocessing and glue rules for various scripts to ensure correct segmentation.
- Linguistic Text Segmenters - Processes language-specific line-breaking rules for CJK and Hangul scripts to ensure correct visual segmentation.
- Variable Width Flow Engines - Calculates line breaks incrementally using a cursor to flow text around obstacles or change width per line.
- Linguistic Wrapping Rules - Controls text wrapping using language-specific segmentation rules for CJK and Hangul scripts.
- Complex Script Renderers - Processes multilingual text, including bidirectional runs and shaping-sensitive scripts, to ensure correct visual display.
- Canvas Text Layout Engines - Uses HTML5 Canvas to calculate precise text dimensions and line breaks for custom rendering.
- Incremental Text Flow - Calculates line breaks sequentially to allow text to wrap around variable-width obstacles.
- Line Layout Generators - Breaks text into individual lines with corresponding widths and content for custom rendering in graphics engines.
- Multilingual Typography Formatters - Processes complex scripts and language-specific rules to ensure correct text segmentation and visual display.
- Obstacle-Aware Positioning - Places text lines and characters accurately while accounting for streaming content and physical obstacles.
- Text Dimension Measurement - Determines the exact width and height of text segments using a two-phase measurement process.
- Dynamic Text Wrapping Engines - Controls how text flows and breaks around obstacles or within variable-width containers using custom line-breaking logic.
- Text Wrapping Controls - Manages line-breaking behavior by preserving hard breaks, ordinary spaces, and standard tab stops.
- Layout Measurement Utilities - Calculates line statistics and natural widths to iterate through line ranges for custom rendering.
- Manual Typography Orchestrators - Manages manual text wrapping and flow around variable-width obstacles without relying on browser CSS.
- Text Dimension Calculators - Provides precise pixel-perfect width and height calculations for text segments without relying on browser CSS.
- Rich Inline Layouts - Measures and segments text containing mixed fonts or atomic chips while maintaining specific whitespace and boundary rules.
- Rich Text Dimension Calculators - Determines the exact width and height of mixed inline content like chips and mentions while managing whitespace.
- Rich Text Measurement Utilities - Calculates the pixel width and height of mixed inline content including atomic components and emojis.
- Linguistic Wrapping Rules - Controls how text wraps using specific word-break rules for CJK and Hangul languages.
- Cross-Browser Typography Normalizers - Standardizes the measurement of emojis and special characters to ensure consistent layout across different web browsers.
- Paragraph Height Calculators - Computes the total height and line count of a paragraph based on maximum width and line height.
- Metric Caching - Stores widths and properties of processed text segments to avoid redundant measurements.
- Multi-Phase Layout Calculation - Determines final text dimensions by first measuring individual segments and then applying layout rules.
- Emoji Width Normalizers - Detects and corrects emoji width variances between DOM and canvas rendering for consistent layout.
- Atomic Inline Elements - Treats rich text components like chips as indivisible units during the line-breaking and measurement process.
- Width Normalization - Detects and caches width variances between DOM and canvas rendering for consistent emoji sizing.
- Container Width Optimizers - Analyzes line ranges to find the widest single line and shrink-wrap a container tightly around the text.
- Rich Text Formatting Extensions - Processes mixed content like mentions or chips while managing whitespace collapse and letter spacing.
- Rich Text Renderers - Calculates widths for mixed inline elements like chips while managing boundary whitespace.
- Hyphenation Logic - Implements logic to process optional break points and render trailing hyphens only when text wraps.
