7

Context:

I am working on a project that if completed properly should function as a specialized text editor. It specifically needs pages though for the output, so unlike most online text editors which can simply use an ever expanding textbox or something mechanically similar I am looking for a way to create a "new page" (a new container div essentially) when it overflows the one its in.

I found one related stackoverflow question and it seems from my searching that most solutions wouldnt be the best for actively changing text and are more suited to being used at page render. Under optimal circumstances it should function much like creating a new page on a word document (automatically create it when it overflows) and use javascript/jquery.

I realize that it is likely more complicated to do this than it would appear initially but I was hoping somebody would know of an article or piece of code that could point me in the right direction.

Problem:

I think I can handle actually "creating the new page" (next container div) but I am unsure how to handle the text overflowing actively. For instance if someone deletes some text on the first page it would be very unwieldy if the text on the second page simply hung there. I want the text/pages to react at least similarly to how they would if you were editing a word document.

I dont want to check the text every time a character is added or deleted, but is this the only way to do something like that? And if so what is the most efficient way for me to do that so I dont bog down the browser.

This is the project I am working on to give more context http://www.naturalcrit.com/homebrew/

Community
  • 1
  • 1
BornToDoStuff
  • 183
  • 8
  • 2
    I think you would have to actively check for user input in order to reflow the text. Why no use something like the collumnizer plugin as a starting point: http://welcome.totheinter.net/columnizer-jquery-plugin/ – Patareco Jan 13 '16 at 19:17
  • 1
    I don't see how you would get away from looking at the keystrokes. Unless you can catch a pseudo style selector like `:overflow`, but that does not exist. Need an example of what you are doing to be able to say for sure. You could wrap a `div` within a `div` and review the height or the width of the inner `div` gets to a threshold of the outer `div`, then move "overflow". You'd still have to tie the event to keystrokes since you're measuring the `w` and `h` of the inner `div` each time a change to it's content is made. Maybe you can bind to `.change()`. – Twisty Jan 13 '16 at 19:21
  • 1
    Look at http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery for some overflow detection techniques. – Twisty Jan 13 '16 at 19:26
  • Another deeper look at this as a function: http://stackoverflow.com/questions/2112106/use-jquery-to-detect-container-overflow – Twisty Jan 13 '16 at 19:28
  • @Twisty it seems like the linked overflow detection techniques would be heavy to run every time a character was typed. Am I wrong? The div solution seems lighter, but I want text to actually wrap between the "pages". If text is deleted on page 1, page 2 text would stay on page 2 unless I figure out some way to layout the text again when its deleted. I almost need some way to check if the page is "filled" and if there are multiple pages not filled it needs to be reformatted. Checking if the page is full would also work for wrapping content to the next page. – BornToDoStuff Jan 13 '16 at 20:04
  • @BornToDoStuff I guess that depends on your definition of a heavy load. I suspect that if you have all the text in memory, this load would increase and at a time, it could be more than the browser can handle. Regarding your second question, this all depends on the font and how you break up the content. In my mind, I would retain the entire amount of text someplace, and when edits are made, it redraws the text between it's various pages. Still need to see some example to fully understand what you're dealing with. I'm going by suggestions off of what I would do, and not what you're stuff. – Twisty Jan 13 '16 at 20:27
  • @Twisty I edited to add the project, not sure why I didnt before. – BornToDoStuff Jan 13 '16 at 20:45
  • @BornToDoStuff Looking over things. You want to avoid CSS3 column styles? – Twisty Jan 13 '16 at 21:02
  • 1
    @BornToDoStuff I think for this application, I would stick to 1 `div` and only show a portion of it, a viewport in a sense, and as more content is appended or changed, more columns are created that the text wraps into. We then scroll the div in the viewport. – Twisty Jan 13 '16 at 21:21
  • @Twisty actually I can see how that might work. Do you mean just work with how the columns are currently expanding width-wise and create the "pages" side by side rather than in an up-down layout? About the CSS3, I just recently jumped into the project so I havent even completely had time to look over everything done but I have been going through and making suggestions as I see things. I thought that I saw css3 columns being used but did you mean styling them more than currently? – BornToDoStuff Jan 13 '16 at 21:34
  • 1
    @BornToDoStuff yes! Just let the columns keep growing. I didn't see much in the way of column styling in the page, but I didn't look very hard either. – Twisty Jan 13 '16 at 22:11

1 Answers1

1

I think that the best answer both for functionality and simplicity is to use CSS3 columnand just allow it to expand widthwise. Then add styles to the columns or other elements to make them look like pages. Add an x-axis scrollbar to scroll through the pseudo-pages (which is just a lot of columns with a fixed height) and its practically done.

This means that the pages will be going left to right rather than up and down but it isn't a bad solution at all. Thank you @Twisty for the simple solution using something I already am using and easily have access to. It doesn't even involve code, just some more CSS!

BornToDoStuff
  • 183
  • 8