Overflowing text #6
Description
🧩 Problem
Currently, structogram.js uses a static HTML-based rendering approach for structograms.
There are visual layout issues, especially in branch nodes:
Both branches are always rendered at 50% width.
When one branch contains much less text than the other, its text may be cut off.
This happens because subsequent nodes are rendered too narrow, based on the fixed 50% split.
🧠 Goal
Find and implement a solution that ensures text inside structogram nodes is fully visible and well-formatted, even in uneven branches.
💡 Possible Approaches
Dynamic sizing
Automatically adjust the width of branch nodes based on their content size.
Font scaling
Dynamically scale the font size to fit the node’s available space.
Text wrapping
Automatically insert line breaks when text overflows horizontally.
🧰 Implementation Details
The relevant code is in structogram.js.
Rendering is done via HTML elements and CSS (no canvas/SVG).
The solution should:
Preserve readability.
Avoid layout flickering.
Work for nested branches and complex diagrams.
✅ Acceptance Criteria