Skip to content

[cssom-view][css-break] Expose information for all line boxes #9433

Open
@SebastianZ

Description

@SebastianZ

With getClientRects(), authors have a way to get a DOMRectList containing a DOMRect object for each box fragment.

Though this information is still pretty limited. E.g. getting the number of lines within an element is not possible. See the workarounds suggested on Stack Overflow. The Firefox DevTools would benefit from that regarding their inactive CSS feature for text-wrap: balance. Also, additional positional and dimensional information is needed for cases like layouting and highlighting.

Therefore, there should be a way to get that information for all line boxes.

High level examples

For an inline-level element that is split across two lines, the API should return two entries.
For an element with ten lines of text and inline-level elements, the API should return ten entries.
For an element with two columns with three lines each, the API should return six entries.

Suggestions

1. Extend getClientRects()

getClientRects() could take an options parameter that controls what to return. That parameter would then have a type option that defines the type of rects to return, with box fragments being the default and allowing to define line boxes as alternative.

Advantages:

  • Reusing a known API for similar use cases
  • Aligning with other APIs that take an options parameter
  • Ability to extend the API further in the future (e.g. by adding an option to control what type of rect to return)

2. Introduce a new API exposing DOMRects for each line box

That new API would work similar to getClientRects() but on line boxes.

Advantages:

  • Focus on one use case
  • Exposes detailed information about the line box dimensions and position
  • Can be extended separately from getClientRects()

3. Introduce a new API exposing line counts for box fragments

A new API that exposes the line counts of different box fragments. (Multi-column containers, page breaks and similar fragmentainers provide multiple box fragments.)

Advantages:

  • Focus on one use case
  • Return value focuses on line numbers
  • Orthogonal to the other two solutions

Sebastian

Metadata

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