[css-content-3] connecting leader seamlessly with the parent element is not addressed

Open
#6,875 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Start with the CSS Content 3 sections on leader alignment and the leader function, then compare their assumptions with the linked Stack Overflow examples. A complete resolution would define how multiline parent content connects seamlessly to leaders, including leader placement on wrapped lines, and update the relevant specification examples or procedure.

Written by the indexing model from the issue text.

Description

css-content-3

The steps 3 talks about how before and after content are to be drawn on top of the leader to make it look seamless. But the actual before content, for which we need the leader, is in the parent element. Like it's shown in the Example 10 the actual content, eg "Loomings", is in <a> tag and the leader is in ::after pseudo element.

How are we going make leaders seamless for scenarios like these, where product names are in multiline <a> tag and leaders in a::after element?
Leader for last line, second line is short:
last line

Leader for first line, wrapping makes first line short:
first line

For more information refer the Stack Overflow issue: https://stackoverflow.com/q/70042487/15273968

We cannot put chapter title in pseudo element's content, to make it "before content", cos we are generating the generated content for the title itself. Also, as per Procedure for rendering leaders the authors are considering multiline text that need leader.

My concerns:

  • Provide an example where contents in Table of Contents are multiline and are connected seamlessly.
  • Provide provision for having leader after first line and not just after last line.
  • Provide way to connect leader to parent element's textual content.
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

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.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.