Add CSS page breaking feature #331

ddbeck · 2023-08-28T11:46:05Z

Corresponds to https://caniuse.com/css-page-break

This one is very messy. A quick tour of both the caniuse and MDN pages for these features suggests that the data here is out-of-date and/or disorganized. I'm fine with letting this feature through, but when we generate a status for it, I think we're in for some surprises and updating BCD.

This is a new feature. Here are some ideas for reviewing it:

Is this a recognizable web feature to web developers? (caniuse features are often made by request, so it's likely, but let's double check our work here.)
Is this a reasonable identifier for the feature?
Does this have a reasonable spec link?
Does this have a reasonable caniuse reference?
Are the mdn/browser-compat-data features plausible pieces of the feature as a whole?
Are any pieces missing?
Are any of the listed features later additions, part of a distinct sub feature, or otherwise excludable?

Corresponds to https://caniuse.com/css-page-break

tidoust

It feels weird to have a feature about page break and to include values that are for multi-column breaks.

Also, no orphans and widows?

feature-group-definitions/page-break.yml

foolip · 2024-02-23T08:38:24Z

@mstensho do you have thoughts on how to organize fragmentation features in a way that aligns with how web developers think about them and that roughly matches how browsers have evolved?

mstensho · 2024-02-23T09:07:46Z

The data there is certainly outdated, indeed. Chrome has supported the avoid value on break-before/break-after for some time already, for instance.

Treating the three CSS properties (break-after, break-before, break-inside) together makes sense. Caniuse refers to the CSS 2.1 page-break-* properties, though. Would be better to refer to the break-* properties.

The entry should be fragmentation type agnostic (printing / multicol), and should prefer referring to css-break (rather than css-multicol, css-page or CSS 2.1).

What about orphans and widows? There is an entry for the orphans property: https://caniuse.com/mdn-css_properties_orphans , but no corresponding one for widows. There is a common "CSS widows & orphans" entry, though: https://caniuse.com/mdn-css_properties_orphans . Should all of this be merged into one "breaking feature", or would that be considered "too big"?

Co-authored-by: François Daoust <[email protected]>

ddbeck · 2024-03-19T15:09:46Z

OK, I've made a few changes to this feature's ID, name, and description. That said, I have low confidence about what to name this. I couldn't find a lot of evidence that developers think about break- as a general thing, so I've tried my best here. It might be that we choose a "bad" name and wait for developer feedback to revise it.

ddbeck · 2024-04-18T14:23:49Z

@foolip asked me to generate the dist file, to see if it's reasonable—it was not. I've taken up a whole new approach: splitting page and column breaks. This tells a much more realistic story about you can and can't do with these properties.

foolip · 2024-04-18T14:39:04Z

feature-group-definitions/column-breaks.yml

@@ -0,0 +1,15 @@
+name: Column breaks
+description: The `break-after`, `break-before`, `break-inside` CSS properties control where columns start or end.


Since break-after appears in the other description too, can you say something about the context this feature refers to? It's structurally similar to gap in grid and flex contexts, but I don't think we have good wording to copy from.

I think the context can be described as the use of columns or column-count.

foolip · 2024-04-18T14:39:41Z

feature-group-definitions/page-breaks.yml

@@ -0,0 +1,18 @@
+name: Page breaks
+description: The `break-after`, `break-before`, `break-inside` CSS properties (along with `page-break-` aliases) control where pages start and end. Also known as pagination or page breaking.


Here, I suspect there's no syntax to point to for context. But if this is only for printing, perhaps mention that?

ddbeck · 2024-04-19T09:19:55Z

feature-group-definitions/column-breaks.yml

@@ -0,0 +1,15 @@
+name: Column breaks
+description: In columnar layouts (created by the `columns` or `column-count` CSS properties), the `break-after`, `break-before`, `break-inside` properties control where columns start or end.


This one does something a little funny, setting the context before describing the thing. It does make its description distinct from the other breaking feature though, which I think makes this in the spirit of the rule if not the letter of it.

Makes sense to me!

ddbeck · 2024-04-19T09:22:06Z

feature-group-definitions/page-breaks.yml

@@ -0,0 +1,18 @@
+name: Page breaks
+description: The `break-after`, `break-before`, `break-inside` CSS properties (along with `page-break-` aliases) control where printed pages start and end. Also known as pagination or page breaking.


Now specifies "printed" in the description.

foolip · 2024-04-26T10:37:59Z

feature-group-definitions/page-breaks.dist.yml

+name: Page breaks
+description: The `break-after`, `break-before`, `break-inside` CSS properties (along with `page-break-` aliases) control where printed pages start and end. Also known as pagination or page breaking.
+spec: https://drafts.csswg.org/css-break-3/#breaking-controls
+caniuse: css-page-break


https://caniuse.com/css-page-break says partial support across the board, except good old Presto of course. Can you add a comment about the difference and if there's anything we need TODO?

Ah, this. Caniuse says everything is partially implemented. Some of this is just out-of-date (e.g., lack of support for break- properties)—I can open a PR against caniuse for that.

But because nothing is shown as being fully supported on caniuse except Presto, we can't be sure what Alexis meant by fully-supported. I've filed Fyrd/caniuse#7045.

The good news here is that I believe we still ought to show a positive status. If caniuse says partially supported, it's still equally partially implemented across all browsers. They seem to have the same set of limitations.

The good news here is that I believe we still ought to show a positive status. If caniuse says partially supported, it's still equally partially implemented across all browsers. They seem to have the same set of limitations.

I spoke too soon. 😞

Alexis tested this again and showed that the avoid value is not consistently supported by browsers. I submitted mdn/browser-compat-data#22987 to update the BCD and changed the list of compat keys here to match caniuse.

This makes me think that the multicolumn breaks might also be broken, but I couldn't actually find bugs to that effect, so I'm letting that stuff stand.

Oh my, things are rarely simple. I've reviewed and merged that PR.

feature-group-definitions/column-breaks.yml

foolip · 2024-04-26T13:10:20Z

@mstensho do you think the state of this PR now makes sense, treating page breaks and column breaks as distinct features?

This came up in the course of defining page break features in web-features. caniuse reports partial support due to lack of support in Safari and Firefox. See also: - web-platform-dx/web-features#331 - Fyrd/caniuse#7045 (comment) - https://caniuse.com/css-page-break

Fyrd/caniuse#7045 (comment)

This came up in the course of defining page break features in web-features. caniuse reports partial support due to lack of support in Safari and Firefox. See also: - web-platform-dx/web-features#331 - Fyrd/caniuse#7045 (comment) - https://caniuse.com/css-page-break

mstensho · 2024-05-02T13:40:52Z

@mstensho do you think the state of this PR now makes sense, treating page breaks and column breaks as distinct features?

Works for me.

foolip · 2024-05-02T15:25:15Z

Thanks @mstensho! @ddbeck can you apply the directory rename and merge this?

Add CSS page breaking feature

66f17bb

Corresponds to https://caniuse.com/css-page-break

ddbeck added the feature definition Creating or defining new features or groups of features. label Aug 28, 2023

tidoust reviewed Feb 22, 2024

View reviewed changes

feature-group-definitions/page-break.yml Outdated Show resolved Hide resolved

ddbeck and others added 8 commits March 19, 2024 14:08

Use spec URL suggested by @tidoust

d2e8c67

Co-authored-by: François Daoust <[email protected]>

Merge branch 'main' into 2023-08-28-add-feature-3-page-break

39ebdf7

Use one spec URL

1c1c832

Set the name and description fields

4b1fbdb

Explain the presence of page-break-* properties

35f915c

Change ID for breaking feature

8cb3e6b

Fix spec URL

3e3ddf0

Try a different name and description

551696a

ddbeck requested review from foolip and tidoust March 19, 2024 15:09

ddbeck added 5 commits April 9, 2024 19:52

Merge branch 'main' into 2023-08-28-add-feature-3-page-break

8573b81

Merge branch 'main' into 2023-08-28-add-feature-3-page-break

1e62555

Merge branch 'main' into 2023-08-28-add-feature-3-page-break

42af290

Add dist

d084bf7

Consider breaking these up

59c47a4

Fix broken URL

d63c8dd

foolip reviewed Apr 18, 2024

View reviewed changes

ddbeck added 2 commits April 19, 2024 11:16

Specify printed context for page-breaks

69b6e19

Specify column layout for column-breaks

433fc4f

ddbeck commented Apr 19, 2024

View reviewed changes

ddbeck requested a review from foolip April 19, 2024 09:22

foolip reviewed Apr 26, 2024

View reviewed changes

column-breaks: remove caniuse ID

7add9a9

ddbeck mentioned this pull request May 2, 2024

page-break-{before,after}: avoid not supported in Safari and Firefox mdn/browser-compat-data#22987

Merged

Revise avoid support in light of caniuse results

537261b

Fyrd/caniuse#7045 (comment)

foolip approved these changes May 2, 2024

View reviewed changes

Merge branch 'main' into 2023-08-28-add-feature-3-page-break

7196cd5

ddbeck merged commit 6170bec into web-platform-dx:main May 2, 2024

ddbeck deleted the 2023-08-28-add-feature-3-page-break branch May 2, 2024 20:39

This was referenced Sep 30, 2024

Adds additional compat keys to page-breaks and column-breaks #1802

Merged

Reconcile BCD and caniuse for page-break properties results #1878

Open

		@@ -0,0 +1,15 @@
		name: Column breaks
		description: The `break-after`, `break-before`, `break-inside` CSS properties control where columns start or end.

		@@ -0,0 +1,18 @@
		name: Page breaks
		description: The `break-after`, `break-before`, `break-inside` CSS properties (along with `page-break-` aliases) control where pages start and end. Also known as pagination or page breaking.

		@@ -0,0 +1,15 @@
		name: Column breaks
		description: In columnar layouts (created by the `columns` or `column-count` CSS properties), the `break-after`, `break-before`, `break-inside` properties control where columns start or end.

Add CSS page breaking feature #331

Add CSS page breaking feature #331

Uh oh!

Conversation

ddbeck commented Aug 28, 2023

Uh oh!

tidoust left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

foolip commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mstensho commented Feb 23, 2024

Uh oh!

ddbeck commented Mar 19, 2024

Uh oh!

ddbeck commented Apr 18, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

foolip commented Apr 26, 2024

Uh oh!

mstensho commented May 2, 2024

Uh oh!

foolip commented May 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

foolip commented Feb 23, 2024 •

edited

Loading