Skip to content

Add CSS page breaking feature #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
May 2, 2024
Merged

Add CSS page breaking feature #331

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
66f17bb
Add CSS page breaking feature
ddbeck Aug 28, 2023
d2e8c67
Use spec URL suggested by @tidoust
ddbeck Mar 19, 2024
39ebdf7
Merge branch 'main' into 2023-08-28-add-feature-3-page-break
ddbeck Mar 19, 2024
1c1c832
Use one spec URL
ddbeck Mar 19, 2024
4b1fbdb
Set the `name` and `description` fields
ddbeck Mar 19, 2024
35f915c
Explain the presence of `page-break-*` properties
ddbeck Mar 19, 2024
8cb3e6b
Change ID for breaking feature
ddbeck Mar 19, 2024
3e3ddf0
Fix spec URL
ddbeck Mar 19, 2024
551696a
Try a different name and description
ddbeck Mar 19, 2024
8573b81
Merge branch 'main' into 2023-08-28-add-feature-3-page-break
ddbeck Apr 9, 2024
1e62555
Merge branch 'main' into 2023-08-28-add-feature-3-page-break
ddbeck Apr 10, 2024
42af290
Merge branch 'main' into 2023-08-28-add-feature-3-page-break
ddbeck Apr 18, 2024
d084bf7
Add dist
ddbeck Apr 18, 2024
59c47a4
Consider breaking these up
ddbeck Apr 10, 2024
d63c8dd
Fix broken URL
ddbeck Apr 18, 2024
69b6e19
Specify printed context for `page-breaks`
ddbeck Apr 19, 2024
433fc4f
Specify column layout for `column-breaks`
ddbeck Apr 19, 2024
7add9a9
`column-breaks`: remove caniuse ID
ddbeck Apr 26, 2024
537261b
Revise `avoid` support in light of caniuse results
ddbeck May 2, 2024
7196cd5
Merge branch 'main' into 2023-08-28-add-feature-3-page-break
ddbeck May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions feature-group-definitions/column-breaks.dist.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Generated from: column-breaks.yml
# Do not edit this file by hand. Edit the source file instead!

name: Column breaks
description: The `break-after`, `break-before`, `break-inside` CSS properties control where columns start or end.
spec: https://drafts.csswg.org/css-break-3/#breaking-controls
caniuse: css-page-break
status:
baseline: false
support:
chrome: "102"
chrome_android: "102"
edge: "102"
compat_features:
- css.properties.break-after.multicol_context
- css.properties.break-after.multicol_context.avoid
- css.properties.break-after.multicol_context.avoid-column
- css.properties.break-after.multicol_context.column
- css.properties.break-before.multicol_context
- css.properties.break-before.multicol_context.avoid
- css.properties.break-before.multicol_context.avoid-column
- css.properties.break-before.multicol_context.column
- css.properties.break-inside.multicol_context
- css.properties.break-inside.multicol_context.avoid-column
15 changes: 15 additions & 0 deletions feature-group-definitions/column-breaks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
name: Column breaks
description: The `break-after`, `break-before`, `break-inside` CSS properties control where columns start or end.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

spec: https://drafts.csswg.org/css-break-3/#breaking-controls
caniuse: css-page-break
compat_features:
- css.properties.break-after.multicol_context
- css.properties.break-after.multicol_context.avoid
- css.properties.break-after.multicol_context.avoid-column
- css.properties.break-after.multicol_context.column
- css.properties.break-before.multicol_context
- css.properties.break-before.multicol_context.avoid
- css.properties.break-before.multicol_context.avoid-column
- css.properties.break-before.multicol_context.column
- css.properties.break-inside.multicol_context
- css.properties.break-inside.multicol_context.avoid-column
33 changes: 33 additions & 0 deletions feature-group-definitions/page-breaks.dist.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Generated from: page-breaks.yml
# Do not edit this file by hand. Edit the source file instead!

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.
spec: https://drafts.csswg.org/css-break-3/#breaking-controls
caniuse: css-page-break
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

status:
baseline: high
baseline_low_date: 2019-01-29
baseline_high_date: 2021-07-29
support:
chrome: "50"
chrome_android: "50"
edge: "12"
firefox: "65"
firefox_android: "65"
safari: "10"
safari_ios: "10"
compat_features:
- css.properties.break-after
- css.properties.break-after.paged_context
- css.properties.break-after.paged_context.page
- css.properties.break-before
- css.properties.break-before.paged_context
- css.properties.break-before.paged_context.page
- css.properties.break-inside
- css.properties.break-inside.paged_context
# `page-break-` are now legacy shorthands
# https://drafts.csswg.org/css-break/#page-break-properties
- css.properties.page-break-after
- css.properties.page-break-before
- css.properties.page-break-inside
18 changes: 18 additions & 0 deletions feature-group-definitions/page-breaks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

spec: https://drafts.csswg.org/css-break-3/#breaking-controls
caniuse: css-page-break
compat_features:
- css.properties.break-after
- css.properties.break-after.paged_context
- css.properties.break-after.paged_context.page
- css.properties.break-before
- css.properties.break-before.paged_context
- css.properties.break-before.paged_context.page
- css.properties.break-inside
- css.properties.break-inside.paged_context
# `page-break-` are now legacy shorthands
# https://drafts.csswg.org/css-break/#page-break-properties
- css.properties.page-break-after
- css.properties.page-break-before
- css.properties.page-break-inside