FF149 ExprFeat/Relnote: CSS text-box and longhand props#43468
Open
hamishwillee wants to merge 1 commit intomdn:mainfrom
Open
FF149 ExprFeat/Relnote: CSS text-box and longhand props#43468hamishwillee wants to merge 1 commit intomdn:mainfrom
hamishwillee wants to merge 1 commit intomdn:mainfrom
Conversation
github-actions
bot
added
Content:Firefox
8 tasks
Contributor
|
Preview URLs (2 pages) External URLs (2)URL:
URL:
|
dipikabh
approved these changes
Mar 17, 2026
Contributor
dipikabh
left a comment
dipikabh
left a comment
There was a problem hiding this comment.
Thanks, Hamish!
I've left a few suggestions.
| - `layout.css.text-decoration-trim.enabled` | ||
| - : Set to `true` to enable. | ||
|
|
||
| ### `text-box`, `text-box-edge`, `text-box-trim` |
Contributor
There was a problem hiding this comment.
since we're ordering by release, this update should go after the "### @custom-media at-rule" entry
Contributor
There was a problem hiding this comment.
Suggested change
| ### `text-box`, `text-box-edge`, `text-box-trim` | |
| ### `text-box`, `text-box-edge`, and `text-box-trim` |
|
|
||
| ### `text-box`, `text-box-edge`, `text-box-trim` | ||
|
|
||
| The CSS {{cssxref("text-box")}} shorthand property, or the corresponding {{cssxref("text-box-trim")}} and {{cssxref("text-box-edge")}} longhand properties, allow you to trim space from the block-start and block-end edges of a text element's block container, aligning the container edges with the actual ink bounds of the text rather than the abstract box edges defined by font metrics. |
Contributor
There was a problem hiding this comment.
- Does
<text-edge>also need to be mentioned? - This sentence is too long, can probably be split:
- List features that have been added (that's where text-edge can probably be included)
- "These allow you to.." (also "aligning" can be replaced to add another pause: "...block container; as a result, the container edges align with..."
Some other nits:
- The first "or" should be "and"
text-box-trimandtext-box-edgecan be swapped to match the order in the heading
| ### `text-box`, `text-box-edge`, `text-box-trim` | ||
|
|
||
| The CSS {{cssxref("text-box")}} shorthand property, or the corresponding {{cssxref("text-box-trim")}} and {{cssxref("text-box-edge")}} longhand properties, allow you to trim space from the block-start and block-end edges of a text element's block container, aligning the container edges with the actual ink bounds of the text rather than the abstract box edges defined by font metrics. | ||
| This makes it possible to achieve consistent visual spacing around text regardless of which font is used. |
Contributor
There was a problem hiding this comment.
Suggested change
| This makes it possible to achieve consistent visual spacing around text regardless of which font is used. | |
| This makes it possible to achieve consistent visual spacing around text regardless of the font used. |
Contributor
There was a problem hiding this comment.
same edits can be applied here
Contributor
|
This pull request has merge conflicts that must be resolved before it can be merged. |
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
3 participants
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.
FF149 adds support for the shorthand CSS property
text-box, corresponding longhand propertiestext-box-trimandtext-box-edge, and the valuetext-edgebehind the preferencelayout.css.text-box.enabledin https://bugzilla.mozilla.org/show_bug.cgi?id=2013458.This adds an experimental features entry and a release note entry that are essentially the same.
Tried to catch a flavour of what this does, which is make it possible to align text within a box so that it is visually positioned consistently for different fonts.
Related docs work can be tracked in #43208