Shrink a heading whose widest word is wider than its column - #391
Merged
Merged
Conversation
Greenshift's statement word Decarbonisation is 1091px at 143px, wider than any column, and the mask reveal clips at the box edge, so from 1440 wide the heading read Decarbonisa. Every heading's size is now multiplied by --sc-fit, which each renderer sets below 1 only for a heading whose widest word overflows, after layout, after fonts load and on resize.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or 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
1 participant
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.
Greenshift opens with the statement "Decarbonisation at enterprise scale." At 143px the word "Decarbonisation" is 1091px wide, which is wider than any column the layouts give it. The section's mask reveal ends at
clip-path: inset(0), which clips at the box edge, so from 1440 wide up the heading read "Decarbonisa". Any site with a long enough word in a statement would hit the same thing.Every heading's font size is now multiplied by
var(--sc-fit, 1). Each renderer measures every heading on first paint, after web fonts load, and on resize. When a heading's widest word is wider than its column, the renderer sets--sc-fitjust below the ratio that makes it fit. A heading that already fits keeps 1, so nothing else changes size. The factor never goes below one half. The preview, the exported page and the plugin engine all do this.This table counts headings wider than their column, across all 21 templates, measured in headless Chrome against a production build:
Across the 21 templates, the only heading that shrinks is Greenshift's statement, and it comes out at 102 to 103px at every desktop size. Its factor runs from 0.970 at 1280x800 to 0.719 at 1920x1080. At every size, no section got taller than its frame and nothing scrolls sideways. I recaptured Greenshift's gallery still, which is the only one that changed.
I also opened a real exported page and a real plugin bundle in Chrome, each with that statement. Both set
--sc-fitto 0.781 at 1920x1080 and to 0.937 at 1440x900, and the heading fits its 800px column. At phone width both leave it at 1.Three new tests run the fit code emitted by the export and by the plugin bundle against fake headings, and a parity check covers all three renderers. They fail against main. Also checked: tsc, eslint, 503 vitest tests, and a production build.