Skip to content

[css-display] Make 'flow-root' an independent keyword #1496

Closed
@Loirooriol

Description

I have already found multiple people (myself included) confused because display: block and display: inline have the same inner display type, flow.

Making flow-root an inner display type overlaps with flow, and saying that inline-block has a flow-root inner display type is not intuitive and does not work well (#1246, #1486).

Additionally, there is the problem of adding layout containment to a ruby element (#1457). I think the obvious fix is making the principal box generated around the ruby container to become a block container (of the specified outer display type) and establish a BFC. But currently no display value allows this.

So I propose:

  • Make flow-root an independent keyword (similarly to list-item) which forces the element to "become a formatting context", i.e an inline box becomes an inline-block, a block container establishes its own BFC, and for ruby this applies to the principal box around the ruby container.

  • Restore the block inner display type from 2014 WD, rename flow to auto, let auto behave like block inner display type when block-level. To avoid name clashes, rename the outer display types to inline-level and block-level. That is, undo most part of https://lists.w3.org/Archives/Public/www-style/2015May/0098.html

So #1246 is solved as such: inline-block is syntactically equivalent to inline-level block, which behaves like inline-level flow-root. The difference is that, when blockified, the formers serializes to block (and may no longer establish a BFC) and the latter serializes to flow-root (and continues establishing a BFC). And the answer to #1486 is that the equivalence between inline-block and inline-level block is preserved, and the flow-root-ness is also preserved.

Letting an auto inner display type compute as block if the outer display type is block-level after possible blockifications or inlinifications also addresses #1341. You can use display: block-level (block-level auto) if you want a block box which inlinifies to inline (inline-level auto), or you can use display: block (block-level block) if you want a block box which inlinifies to inline-block (inline-level block).

See my proposed specification and the bikeshed changes.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions