w3c / w3c/csswg-drafts

[css-ui?] Define interaction of block layout and editing.

Open
#4,904 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-ui-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

It seems all browsers except Gecko hack block layout so that an editable block has at least one non-empty line, see this test-case.

That is, other browsers render <div contenteditable></div> the same as <div><br></div>.

I'm on the fence on whether this is a browser bug on other browsers, or something that we should match and should be specified. If the later, how we do define this?

It seems other browsers only apply it to the editable root?

In blink this is done in LayoutBlock::HasLineIfEmpty, which seems inherited from WebKit's RenderBlock::hasLineIfEmpty.

I see the "do what I mean" intent of this, but it seems a bit of a layering violation / hack to me :(

cc @jfkthame @masayuki-nakano @kojiishi @rniwa

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 with the linked test case, then compare Blink's LayoutBlock::HasLineIfEmpty and WebKit's RenderBlock::hasLineIfEmpty implementations. Investigate whether the behavior applies only to editable roots and whether CSS should specify it. Done means reaching a resolved position and defining the corresponding specification behavior, if applicable.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.