Skip to content

[css-inline-3] Naming text-box-trim et al. #10675

Closed
@fantasai

Description

@fantasai

Just landed the edits to split text-box-edge into two properties and add a shorthand with text-box-trim in 7869dc6 ; see

We had left open some amount of syntax bikeshedding to follow up on, so before I publish the Editor's Draft I wanted to run the current state by the CSSWG.

Here's the syntax overview:

<text-edges> = [ text | cap | ex | ideographic | ideographic-ink ]
               [ text | alphabetic | ideographic | ideographic-ink ]?
<text-trim> = start | end | both

/* line box sizing property (inherited) */
line-fit-edge: leading | <text-edges>

/* leading-trim properties (non-inherited) */
text-box: normal | <text-trim> || <text-edges>
text-box-trim: none | <text-trim>
text-box-edge: auto | <text-edges>

Shorthand details:

  • text-box: normal sets to initial values (none/auto).
  • Setting only <text-trim> defaults text-box-edge to auto (initial value).
  • Setting only <text-edges> defaults text-box-trim to both (not initial value).

Additional details:

  • text-box-edge: auto copies from line-fit-edge, treating leading as text.
  • Reminder: line-fit-edge values other than leading opt into the newer line box sizing model (leading only on root inline, honoring margin/border/padding on inline boxes).

Consequences:

  • Defaulting this way enables trimming the leading by just setting a <text-trim> value.
  • If the author set something more aggressive and script-specific for the inherited line-fit-edge property, that gets passed through as the default trim edges.
  • They can alternatively set an explicit trim value in the text-box shorthand or cascade one independently with the text-box-edge longhand.
  • Shorthanding magic for text-box means that:
    • text-box: both sets trimming to the default edge on both sides.
    • text-box: cap alphabetic sets trimming to those edges on both sides.
    • text-box: normal does the normal thing of not trimming the line box. :)

We should rename the trim keywords:
Having the text-box shorthand take start | end | both reads badly, suggest renaming these keywords to trim-start | trim-end | trim-both for two reasons:

  • Consistency with text-spacing-trim
  • The shorthand reads a lot more reasonably: text-box: trim-both rather than text-box: both which is weird.

Proposed Resolutions:

  • Adopt text-box/text-box-trim/text-box-edge properties as outlined above.
  • Rename start | end | both values of text-box-trim to trim-start | trim-end | trim-both.
  • Name the line-box sizing property (previously discussed as text-line-edge to contrast with text-box-edge) to line-fit-edge (for now), or to some alternative that people might suggest here.
  • Republish css-inline-3 as WD with these edits.

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