Skip to content

[css-text] Should text-wrap-style:balance be allowed to affect the block height? #10186

Closed

Description

@jfkthame

The description of text-wrap-style: balance says that balancing "must not change the number of line boxes the block would contain if text-wrap were set to auto."

My assumption is that this restriction is intended to ensure that applying the 'balance' setting to a block of text will only adjust the line-breaking used within the block but will not affect layout outside it by changing its dimensions (potentially leading to overflow or moving other elements on the page).

However, this restriction is not actually sufficient to ensure this "safety". Even if the number of line boxes doesn't change, content moving from one line to another may cause changes in line heights and therefore in the overall height of the block. I think that undermines the intention of the "must not change the number of lines" restriction.

Here's a codepen with a couple of simple examples. Rendering (in Chrome Canary):
image

As this demonstrates, the revised line-breaking of text-wrap:balance has the potential to make the block either shorter or taller, either of which might have unexpected consequences for the containing layout.

I propose that we should tighten up the restriction on text-wrap-style:balance to say something like "...must not change the number of line boxes the block would contain if text-wrap were set to auto, nor alter its intrinsic size."

Activity

  1. astearns commented on Apr 9, 2024

    @astearns
    Member

    The restriction (as I recall) is merely to ensure that the algorithm for balancing lines does not change the number of lines. I think it’s fine for the overall height of the block to vary as in your examples. Do you think there is a benefit to maintaining intrinsic size as well?

  2. jfkthame commented on Apr 9, 2024

    @jfkthame
    ContributorAuthor

    Maybe the number of lines is all that matters? I thought -- perhaps wrongly -- that the idea was to ensure the effect of balance is confined to the content within the block, and won't affect layout outside it (so authors can request it in the knowledge that whether or not it's supported, and regardless of the exact algorithm the browser may use, it won't cause other things on the page to shift or break).

    I'd be interested to know what other people think about this.

    (For the record, I did just recently make a change in Gecko's implementation that ensures the intrinsic size of the block does not change. But maybe that's a stricter requirement than we actually want? Here's what the latest Firefox Nightly does with the codepen example:

    image

    whereas before the most recent change, it gave the same result as the Chrome screenshot above.)

  3. astearns commented on Apr 9, 2024

    @astearns
    Member

    If I were setting the line breaks manually I would prefer the height-constrained result for your first example, and the previous non-height-constrained result for your second example 😁. But that’s just an effect of the particular content, width, and styling, and not something I think we can automate in general.

    I look at text-wrap-style: balance as an input to a single composition, communicating a single intent for the block. What happens to the height as that input is flipped doesn’t really matter to me, that’s an entirely different composition. I worry a bit that if we add the height constraint there will be cases where more balanced line breaks would have to be rejected. But I don’t think that worry is enough to reject the idea.

    @kojiishi , @fantasai , @frivoal what do you think?

  4. fantasai commented on Apr 16, 2024

    @fantasai
    Collaborator

    I agree that a height restriction is untenable here. The goal of the restriction was to avoid breaking short amounts of text over more lines than originally, since that can often be counter to the author's desires and also could cause problems if they're making assumptions like "this will not be more than 2 lines" or whatever in the layout. But that really applies mainly to small numbers of lines, 1-6 or so.

    We actually discussed internally and we think the restriction should be relaxed from MUST to SHOULD. I might suggest keep it tight for e.g. < 8 lines, not allowed to change the number of lines, for the reasons we originally added the restriction; but beyond that saying it's a SHOULD seems fine to me, and might enable better performance.

  5. astearns commented on Apr 16, 2024

    @astearns
    Member

    Typographically I don’t mind reducing changing the number of lines from MUST to SHOULD (there are edge cases where removing a very short last line can achieve better balance). But I don’t think we should allow more than adding or removing one line. There are definitely cases where a headline could be more “balanced” by doubling the number of lines, but that’s not going to be an intended or good result.

    Also, would we need to adjust this metric?

    Line boxes are balanced when the standard deviation from the average [inline-size] of the remaining space in each line box is reduced over the block (including lines that end in a forced break).

    Is a comparison of the standard deviation across N-1 or N+1 lines to the standard deviation of N lines still valid?

  6. frivoal commented on Apr 17, 2024

    @frivoal
    Collaborator

    No strong opinion on allowing +/- 1 line. I do agree that requiring no change in height is likely not a reasonable restriction. Among other things, I think respecting that constrain while taking into account interaction with floats could be a lot more trouble than it is worth.

  7. css-meeting-bot commented on Apr 24, 2024

    @css-meeting-bot
    Member

    The CSS Working Group just discussed [css-text] Should text-wrap-style:balance be allowed to affect the block height?, and agreed to the following:

    • RESOLVED: Number of lines can change if it's 6+ lines being balanced, and note that this is about line breaks not content height shifts
    The full IRC log of that discussion <fantasai> jfkthame: Came up as I was fixing a bug
    <fantasai> jfkthame: Spec requires that text-wrap: balance doesn't change the number of lines
    <fantasai> jfkthame: thought an author might expect it doesn't affect the overall size of the block
    <fantasai> jfkthame: I wondered if that was a correct expectation, or whether it's OK for it to alter the block height
    <florian_irc> q+
    <fantasai> jfkthame: currently that's not a constraint in Firefox
    <astearns> ack florian_irc
    <fantasai> florian_irc: In Firefox, is that constraint generally observed or always? Complicated wrt floats etc.
    <fantasai> s/not a/a/
    <fantasai> jfkthame: always
    <astearns> ack fantasai
    <dbaron> fantasai: when we wrote the spec it wasn't about wanting to restrict the height -- it was about the general case of not wanting the 2 line heading to become a 3 line heading because you turned on text-wrap:balance
    <dbaron> fantasai: since then it's been brought up about balancing a larger number of lines, e.g., 20-30 or more. At that point you might not care if a line is added/removed if you balance the text.
    <dbaron> astearns: we have a current limit at 10, implementations may be more restrictive
    <dbaron> fantasai: not required to do more than 10, but can
    <florian_irc> q+
    <dbaron> fantasai: I don't think we should restrict effects on the block height. Changing the way text wraps can change the height of the lines. Maintaining a stable height wasn't particularly the goal of the feature.
    <dbaron> fantasai: Instead, we should say for a small number of lines (e.g., < 8) then the restriction should stay, but for more than that (betwen 6 and 10) the number of lines can change.
    <astearns> ack florian_irc
    <dbaron> fantasai: Trying not to change it but might shift by 1 or 2 lines. Enables some faster algorithms which might make larger numbers of lines more possible.
    <fantasai> florian_irc: agree with fantasai, also curious about firefox
    <fantasai> florian_irc: did you implement this way for a specific reason?
    <fantasai> jfkthame: it was fallout from fixing a different bug
    <fantasai> jfkthame: that ended up with ensuring that the height doesn't change, that wasn't a specific demand
    <fantasai> florian_irc: in that case, the current definition is maybe too specific about precisely how much balancing is the right amount
    <fantasai> florian_irc: maybe we shouldn't require the the Firefox behavior, but allow some amount of discretion
    <fantasai> florian_irc: might want to balance other considerations
    <fantasai> astearns: the method to evaluate whether to evaluate whether something is more balanced
    <fantasai> astearns: it's not "you must achieve this", but if you hadn't done this then the line breaks you're considering are not more balanced
    <fantasai> astearns: seems we could resolve on loosening the requirement on changing number of lines if number of lines balancing is a larger number
    <fantasai> astearns: maybe other things fall out from that
    <dbaron> (and is it clear that the requirement is about "number of lines" rather than about "height")
    <fantasai> florian_irc: if we don't require FF behavior, should make that clear
    <dbaron> fantasai: if we change it so the # of lines is possible to change that will be more obvious
    <fantasai> astearns: might still be worth clarifying
    <fantasai> astearns: proposed that we relax the restriction on changing the number of lines, and clarify it's only about number of line breaks not resulting height
    <fantasai> [discussing what's the limit]
    <fantasai> PROPOSED: Number of lines can change if it's more than 6-ish lines being balanced
    <fantasai> RESOLVED: Number of lines can change if it's 6+ lines being balanced, and note that this is about line breaks not content height shifts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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