-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a SVG-based Stretchy Type block #32
Draft
DAreRodz
wants to merge
27
commits into
trunk
Choose a base branch
from
add/stretchy-type-svg
base: trunk
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Co-authored by @SantosGuillamot
What?
This PR adds a Stretchy block that makes its text fill all the available width. It's built on top of #5.
The PR changes the block implementation, using SVGs to maintain the text ratio and some JavaScript code to update it whenever the text changes.
Features:
Screen.Recording.2024-10-25.at.15.35.58-1.mov
How?
The implementation uses the following APIs, listed with the global usage % of browsers that support them:
ResizeObserver
(95.37%)foreignObject
(94.9%)fit-content
(94.9%)The main idea is to use an SVG wrapper with
foreingObject
around the HTML code of the block content. With theSVG
wrapper, we can use theviewBox
property to make a scalable SVG that maintains its size ratio.In addition, it uses
ResizeObserver
and aspan
wrapper withwidth: fit-content
to monitor changes in the SVG content. That way, we can react to any changes that modify the text dimensions and updateviewBox
accordingly. This only happens when the text size ratio changes.(*) The
viewBox
property is computed in the editor and persisted in the HTML. This effectively sets an initial value forviewBox
without JavaScript, which mitigates the problem of scaling the SVG with code. However, that value is not 100% reliable, as different users could see different fonts with different sizes for the same text.Alternatives
Window
'resize'
event + computedfont-size
This approach only reacts to changes in the viewport size, meaning that the size won't be re-computed when the element content changes dynamically or when the parent container dimensions change. Also, the
font-size
prop should be updated anytime the available width changes per frame.ResizeObserver
(95.37%) + computedfont-size
This approach is similar to the above, but it uses a
ResizeObserver
in the parent container rather than subscribing toresize
events onwindow
. It can react to the available width, although it still has to updatefont-size
per frame.Container Query Units (90.97%) +
ResizeObserver
+ computedvar(--ratio)
This one is similar to the SVG approach. The difference is that it uses container query units to set a
font-size
value relative to the container's width. The text's height/width ratio is re-calculated whenever the text changes and thefont-size
value updated accordingly.CSS custom properties (89.97%) + Container Query Units
This only-CSS solution could be based on Roman Komarov's Fit-to-Width Text technique. We tested it in the
feature/stretchy-type-paragraph
branch. It's reliable in most cases, but some fonts seem to be adjusted incorrectly.