Add the possibility to insert page breaks

[wwalc]

🆕 Feature request

In CKEditor 4 there is a page break feature which lets the user enforce breaking page at a certain position. Basically it inserts

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>

It is mainly useful when working on content which is later printed out, like books, documents. The user has then control where the page ends.

The feature should also retain page breaks pasted from Word (and if possible) from Gdocs, though this could be extracted to a followup.

Preview

There's an early preview of the page break feature here: https://ckeditor5.github.io/misc/page-break/

---

If you'd like to see this feature implemented, please add 👍to this comment.

[oleq]

This could be a simple widget, I think. Later on, as we implement widget drag&drop, this would be very convenient.

[dpsehgal]

Do you still have plan to implement this?

[mlewand]

@dpsehgal yes, we're looking to have it. It should happen soon, but I can't provide you with a precise ETA. Subscribe to this issue to get informed the moment we start working on it.

Also be sure to add 👍 reaction if you're interested in any particular feature, this is a great way to show us that community is interested in a given feature.

[tbredin]

My team is looking for this feature — sort of.

Most of the time that a user edits a document on our platform it will be an a4 page, so we don't exactly want page breaks, we want page layouts.

The difference is that a page break usually flows with content, inserted after a certain content item, whereas a page layout is a certain page size, with content flowing between pages.

I understand and have read a lot about this pushing the limits of what ckeditor is designed to do, but I think its a common enough use case that its worth documenting further in case nit gets picked up :)

[andy-bond]

I know this isn't directly related to page breaks, but it is related to how a document is printed...

My organization was looking into the possibility of using CKEditor to draft documents that would have line numbers and page breaks. So, each line would have the number floating to the left (in the margin) of the document. Specifically, we want 27 lines per page. Text that goes past the 27th line, starts the first line on the next page.

Example: https://apps.legislature.ky.gov/recorddocuments/bill/18RS/sb5/bill.pdf

[pomek]

We're going to implement this feature in the current iteration.

I would like to clarify a few things in order to implement this feature correctly.

It seems like the Page Break and Horizontal Rule features are similar. The main difference is the element that is being inserted to the editor.

But, let's start from the beginning.

The goal

We want to insert the page break snippet (<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>) to editor's data (the data returned by editor.getData()).

How?

We can add a button to the editor's toolbar. After clicking it, the pageBreak element will be inserted to the editor's model.

@dkonopka, could you prepare an icon for the feature?

How to render the element in editing view?

We can do it the same way as CKEditor 4 does. A block element that has defined a border (top and bottom).

The element can be selected, cut, copied or removed.

Nice to have (not part of MVP)

Support for pasting from Google Docs and Word.

---

Do I forgot about anything?

[Reinmar]

The one not that obvious for me thing is identifying this element in the data. We can rely on the element name (div) and this style (page-break-after: always) but I wonder if we shouldn't mark this element with a data attribute (data-page-break=true). That would make it a bit safer because:

• it would be easier to post-process,
• it would make the detection safer – we'd be more sure we won't pick up some random div from pasted data (that div may mean something slightly else),
• it would allow us to change the output in the future, while maintaining natural backward compatibility.

However, if we think about porting content from CKEditor 4 then we still need to handle this specific div with this specific attribute and span inside. So, adding this attribute will actually not make a big difference.

Hence, let's keep the same output. And let's make the "upcast check" very similar to what CKEditor 4 has at the moment.

[mlewand]

I'm wondering about the way we display line break in case there are floating objects around it.

Currently we mark page break after an element that causes the clearance:

Not the end of the world, but I think it would be even nicer if the page break was shown where it actually is placed, while still causing clearance "afterwards".

I was able to hack it together using a editing view markup like that:

<p>(...)</p>

<div class="ck-widget" contenteditable="false">
	<div class="ck-page-break"></div>
	<div style="height: 1px;clear:both;line-height: 1px;"><br data-cke-filler="true"></div>
</div>

<p>(...)</p>

(obviously .ck-page-break should sit on the main element, I just moved it so I don't have to modify the CSS)

cc @dkonopka @oleq @pomek

[oleq]

What does it look like in print? Which of the two options is actually WYSIWYG?

[mlewand]

Which of the two options is actually WYSIWYG?

Neither of them is truly WYSIWYG as we display an "abstract" indication of page break which is naturally not conveyed 1:1 to the document. See the dump below:

[dkonopka]

I'm wondering about the way we display line break in case there are floating objects around it.

IMHO using weird 50% width of page break element is not that users see during printing window option. That's why I used clear: both option for this element.

If page break element will be next to the image users might think that image can be divided into two pages.

[mlewand]

users might think that image can be divided into two pages.

Interesting point, haven't think of it this way. OK in that case I don't see that there are strong reasons to change the current behavior - that's fine.

[oleq]

users might think that image can be divided into two pages.

A good point, @dkonopka. Of the two options, this is the farthest from the true WYSIWYG.

[mlewand]

For those that subscribed to this issue, the preview of page break plugin is ready 🎉 You can have a look at it here: https://ckeditor5.github.io/misc/page-break/

[wwalc]

I read just the last comment and jumped into the preview, without looking into the previous discussion. When I tested the page break, I immediately got back here to report an issue:

I had a WTF when noticed that, but then thought maybe it's a bug due to the early phase of the plugin. 1) Showing line in this place is misleading because the image isn't divided when printing 2) And of course the image shouldn't be divided when printing. 3) So, we should stick to the WYSIWYG rules and display the line in the right place.

---

Btw. when this plugin is introduced it makes even more sense to provide also the "Print" button / plugin (#1972) so that people had a consistent icon to use and a complete set of features related to printing. So far we had two customer requests about it.

[mlewand]

That's indeed incorrect styling and in fact it's different from what we have on feature branch (styling). @pomek can you make sure the demo is updated with proper styles?

[oleq]

As for the styling, I was wondering if the decision to show two dashed lines was deliberate or accidental?

Because as I had a quick look at other editors (GDocs, MS Word, etc.) I noticed we're pretty far from industry standards in this matter.

If you open a document containing page breaks with the current CKEditor 5 styling (and you didn't create them), you may find yourself in a situation that you don't know what those dashed lines represent. There's no label, no information on hover, no distinct response in the toolbar when you select them. This is some serious UX/discoverability issue.

Page break in other editors

There's no way we can go with the GDocs approach (looks great IMO) because we cannot display the full–width break due to styling we use

But the breaks in MS Word have more sense IMO because they simply tell what they are.

Some examples from other editors

Even CKE4 implements some (very) slight suggestion that this is the place where one page ends and another one begins

My proposal

And here's my one-minute PoC what it could look like in v5

[oleq]

cc @dkonopka

[mlewand]

That's a good point @oleq, current visuals are not discoverable. 👍 to the proposal, looks fine with couple remarks:

• Color needs to meet contrast ratio for WCAG level AA (my assumption is that color in the proposal doesn't).
• Page break will not occur in the middle of an image. Current behavior (Add the possibility to insert page breaks #1194 (comment)) is a result of outdated styles.

[dkonopka]

And here's my one-minute PoC what it could look like in v5

Your proposal looks nice, but how about translations? It will be possible to handle it?

There's no way we can go with the GDocs approach (looks great IMO) because we cannot display the full–width break due to styling we use

Hmm.. how about creating ::before & ::after pseudoelements of <div class="ck-page-break"> and stretch them? Then it will be possible to achieve gdocs design (we should improve the contrast ratio too).

[oleq]

Your proposal looks nice, but how about translations? It will be possible to handle it?

PB is a widget. A widget can contain a ViewUIElement that can be supplied with a translation according to editor.locale.uiLanguage. Or am I missing something here?

Hmm.. how about creating ::before & ::after pseudoelements of <div class="ck-page-break"> and stretch them?

Feel free to research. But keep in mind this must work in all kinds of editors and styles of editable (padding, etc.) are not always our styles but they belong to the integration. If we had the best of the two worlds (GDocs and my PoC), that would be awesome!

[mlewand]

Meanwhile feature as a w hole landed in the master branch 🎉

The design part has been extracted to ckeditor/ckeditor5-page-break#2 and we will address this in this iteration.

[Kushani5j]

Can we add a page with the hidden option? I need to break the page but without previewing the 2 dotted lines in page break?

[Kushani5j]

Can we add a page-break with the hidden option? I need to break the page but without previewing the 2 dotted lines in page break?