Add CSS break-before, break-after, break-inside properties #2217
Conversation
bsmth
changed the title
There was a problem hiding this comment.
Apologies for the delay on getting back on this, @NiedziolkaMichal. I've added a few comments for your consideration.
| <div class="box">Content Before</div> | ||
| <div class="box" id="example-element">Content with break-before</div> | ||
| <div class="box">Content After</div> |
There was a problem hiding this comment.
How about rephrasing to the following to add more clarity:
| <div class="box">Content Before</div> | |
| <div class="box" id="example-element">Content with break-before</div> | |
| <div class="box">Content After</div> | |
| <div class="box">Content before the property</div> | |
| <div class="box" id="example-element">Content with 'break-before'</div> | |
| <div class="box">Content after the property</div> |
This suggestion can be applied to other html files in this pull request
There was a problem hiding this comment.
That's better. I have applied your suggestion to all examples. Thanks
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-inside: avoid;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-inside: avoid-page;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
The description for the two values avoid and avoid-page reads quite similar and the output of this example here also does not help to clarify the difference in behavior.
Do you think filling in dummy content would help to bring out the difference between the two?
There was a problem hiding this comment.
Those values work exactly the same way, except for the fact, that avoid is also supposed to work in a multi-column layout. In the future, we could also show how multi-column layout is affected, but currently, it's not supported well on firefox. Do you think it's better to remove one of those values?
There was a problem hiding this comment.
Yes, I think in that case it might be better to remove one
There was a problem hiding this comment.
Alright, I have removed avoid-page.
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-before: page;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-before: left;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Currently, there is no difference visually in the print preview for page and left.
- Would the contrast be more visible if you instead demo the
pageandrightvalues? And also perhaps add one more "box-container" div if needed to highlight the difference? - In the print preview, can the
Pages per sheetoption be set to2to show the pages side-by-side?
There was a problem hiding this comment.
I am afraid that values left and right are not really working on Firefox or Chrome: https://caniuse.com/css-page-break
Should I remove them to avoid confusion?
I also don't see any way to affect the default value of Pages per sheet.
There was a problem hiding this comment.
We can keep the example if you think it will not cause confusion or make people wonder about the outputs. Otherwise, let's add these examples later when we're able to better demonstrate them.
There was a problem hiding this comment.
I think it's better to keep this example. I removed left values, so there will be no confusion.
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-after: page;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code class="language-css">break-after: left;</code></pre> | ||
| <button type="button" class="copy hidden" aria-hidden="true"> | ||
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Same comment as in 'break-before' to highlight the difference in the print preview between page and left.
|
Hi @NiedziolkaMichal, hope you're good. Pinging to see if you had the chance to see the comments. |
|
@dipikabh Sorry for the delay. I have responded to all of your suggestions. |
|
Thanks, @NiedziolkaMichal! I've responded to your questions. |
|
Thanks a lot for reviewing. |
Those are interactive examples for CSS properties break-before, break-after, break-inside, page-break-before, page-break-after, page-break-inside.
When button is pressed and value page or left is selected, first page looks like that:
Second page looks like that:
In break-inside & page-break-inside, middle box has very big height when document is in print preview. Value avoid looks like that:
