w3c / w3c/csswg-drafts

[css-break-4][css-text-decor-4] Allow breaks to only affect text decorations

Open
#12,947 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-break-4 css-text-decor-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Description

With the introduction of text-decoration-trim, we also defined that it takes box-decoration-break into account. So box-decoration-break affects whether the text decoration is split or cloned across fragments.

Though box-decoration-break also affects other parts of the box, which may be styled differently regarding fragmentation.

Therefore, I suggest a way to differentiate between the layout-related and content-related parts. I see three solutions to this:

  1. Extend box-decoration-break
    Change box-decoration-break so that it allows to distinguish to what it applies, e.g. via new keywords that target layout, background, and contents.

  2. Make box-decoration-break a shorthand
    Turn box-decoration-break into a shorthand for different longhands for layout, background, and contents. I.e. you'd have box-decoration-break-layout, box-decoration-break-background, and box-decoration-break-content, which take slice and clone.

  3. Introduce a new property
    As suggested in https://github.com/w3c/csswg-drafts/issues/8403#issuecomment-3396895682, we might also introduce a completely separate property like text-decoration-break.

See also #8535, which refers to allow targetting only the background (and suggests to go either with option 1 or 2).

Option 2 currently seems to make the most sense to me, as it aligns well with what we already have and is backwards compatible.

Sebastian

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the proposal and the linked discussions in #8403 and #8535. Compare the three approaches for separating layout, background, and content fragmentation behavior, then follow the CSSWG discussion for a decision. Done means the Working Group has selected an approach and the relevant specification text reflects it.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.