Display page-breaks at regular intervals

JavaScript
1

Hi, I’m building a text editor and wanted to display page breaks at regular intervals. The text editor is set to auto grow as the user keep typing. I want to visually show the user where the page will break as he keeps typing. The page-break element should get added dynamically as the text area reaches the threshold height.
Do you know how to achieve it via CSS and Javascript?

1 Like
2

Is the pagebreak based on actually printing the page?

3

Is the page break dependent on the physical paper height and width, with padding (margins)?

Is the online font size fixed and comparable to a 12pt font for print?

1 Like
4

Yes, The page break is dependent on the physical A4 sheet paper’s height and width with padding.
Below is the css definition for my editor:

 .row-editor .editor {
	width: 18.5cm;
	height: 100%;
	min-height: 26.25cm;
	padding: 1.75cm 1.5cm;
	margin: 2.5rem;
	border: 1px hsl( 0, 0%, 82.7% ) solid;
	background-color: white;
	box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
}

I want to insert a page-break automatically when the cursor reaches the min-height.

Yes the online font size is fixed and comparable to a 12 pt font for print

5

yes Paul, the pagebreak is based on actually printing the page

6

I can’t help with the JS but from a visual point of view you could place a repeating linear gradient at every expected page height.

e.g.

However I don’t know any way of reliably setting a page height for printing with any accuracy.

2 Likes
7

The problem is that the page-break element is not supported well enough: https://caniuse.com/?search=page-break

There’s an ad insert at the left of this page that covers the Send button. Resizing the page doesn’t move the ad. Hope this past goes through, because I’m using the keys to hop around and hopefully select the key and send. The entire left part of the box I type my answer into is blocked by the ad – I’m viewing this at home on a small screen laptop.]

2 Likes
8

This is awesom Paul, Thanks a lot.
Now I want to slightly enhance it by having a text “Page Break” at the center of gradient image. I tried with multiple images like this. But I couldn’t achieve proper positioning of the text. It is not completely visible. Any suggestions?

textarea {
  width: 18.5cm;
  min-height: 26.25cm;
  padding: 1.75cm 1.5cm;
  margin: 2.5rem;
  border: 1px hsl(0, 0%, 82.7%) solid;
  background-color: white;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
  background-image:
    repeating-linear-gradient(
    white,
    white 26.1cm,
    grey 26.1cm,
    transparent 26.4cm
  ),
    url(https://davidwalsh.name/demo/page-break.gif);
  background-position: center;
  background-attachment: local; /* allow background to scroll*/
}
9

I don’t think we can accurately repeat a background image at set intervals (unlike the linear gradient) as there is no facility in CSS to do that. The only thing I can think of is to repeat the image continuously and then use a another repeating gradient to rub the repeats out except for the bit we want. (When using multiple image the first one listed is the one that gets stacked on top of others.)

It’s a bit hit and miss as really the image height should be made in such a way that it repeats exactly at the page height you want. As you can see from the demo the image moves a little the further down you go. If you adjust the actual image height then you may be able to get the repeat more exact with a bit of trial and error.

Perhaps an easier alternative is to make your page break gif exactly 26.1cm tall and then you can just repeat it in the normal way. (Even include the gradient effect on that image). Most of the image could just be white space so won’t be a high file size.

10

ok, Thanks for your help.
For now this solution holds good for me.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.