W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2020

Re: [csswg-drafts] [css-inline] inline-sizing property name is too similar to inline-size (#5189)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Mon, 20 Jul 2020 18:47:34 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-661268373-1595270853-sysbot+gh@w3.org>
OK, after reading the description again & double checking with fantasai, I think I understand this property enough to make suggestions. Starting with my own response to my requests for explanatory figures…

Here is the “normal” behavior for sizing inlines (as indicated by background colors on the various inline elements). The superscript uses the default HTML  `<sup>` styling. The `<mark>` is a single element wrapping to the two contrastingly-colored inlines:
![A 3-line paragraph of text, most of which has yellow highlight, but inside the highlight is a cyan-highlighted special term followed by a pink highlighted superscript.](https://user-images.githubusercontent.com/9876129/87970028-65c11a00-ca80-11ea-92fe-e3d59160fbe5.png)

Because of the change in font size on the superscript, it's line box isn't the same height as the other line boxes. Because of its change in alignment, it also pushes the entire line its on away from the line above, so that the other inlines do not use up the full cross-size of that line box.

In contrast, if all the inline elements used the new “stretch“ sizing, you would get (correct me if I'm wrong, @fantasai!) something that looks like this. All the inlines in that line have the same height, which fills the full height of the line, even after the line gets extra space to accommodate the superscript:
![Same text, but now there is now the highlight backgrounds have been stretched to fill up the full center line.](https://user-images.githubusercontent.com/9876129/87972213-c69e2180-ca83-11ea-9db7-93f22de41545.png)

And for added clarity, an example if the wrapper `<mark>` element had the stretch behavior, but its child elements had the normal behavior:
![The yellow mark background on the center line fills the full space between the lines above and below, making it visibile around the highlight regions of the term and the superscript.](https://user-images.githubusercontent.com/9876129/87972356-f6e5c000-ca83-11ea-9a14-1e6b9feb7b27.png)


So, back to bikeshedding…

To me, the closest analogy here is cross-axis stretch alignment in flexbox: that is, the [`align-items` and `align-self` properties](https://drafts.csswg.org/css-flexbox/#align-items-property). But I'm not too keen on using the `align` prefix for a name, both because `align-line-box` sounds weird and because the actual *alignment* has already happened (based on `vertical-align`) prior to the stretch being applied.

But, I think it might be useful to focus on the “cross-axis” terminology, to reduce the confusion between inline elements and the inline layout direction.

Another very similar property, to me, is the [`box-decoration-break`](https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break) property, which also affects the position of backgrounds, borders, etc., on inline elements, after inline line breaking is applied.

Would it make sense to call the `box-decoration-cross-size`?

Or `box-decoration-cross-align`? (I think it's safe to use “align” here since it's clear it only applies to the “decoration”, not the text.)

GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5189#issuecomment-661268373 using your GitHub account
Received on Monday, 20 July 2020 18:47:36 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:11 UTC