Pagify

Emulate the browser's printing rules, and make the webpage look like it's split into pages.

HTML

<page size="A4" id="MPage1" class=" kmm-view" onclick="handleClick(1,this, event);" role-type="pageview">
<div id="Header1" style="width: calc(100% - 188px); min-height: 50px; border-width: 0px 0px 1px; border-style: solid solid dashed; border-color: rgb(255, 0, 0); border-image: initial; position: relative; margin: 0px auto; top: 0%; outline: none; padding-top: 25px; padding-left: 94px; padding-right: 94px;" contenteditable="false" ondblclick="toggleHeader(1)" role-type="header" class="page-header-element"></div>
<!--<div id = "HeaderSplit1" style="width:100%; height:1px; border-bottom:1px dashed #FF0000; position:relative; margin: 0 auto; top:0%;outline:none ; display:none "    ></div>
--><div id="Page1" style="width: calc(100% - 188px); min-height: 50px; border: 0px solid rgb(255, 0, 0); position: relative; margin: 0px auto; top: 0%; outline: none; padding-left: 94px; padding-right: 94px;" contenteditable="true" onfocus="hideHeader(1)" onpaste="handlepaste(this, event);" role-type="page" class="page-pager-element"><div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div>&nbsp; &nbsp; &nbsp;REF/EJP// 40908368</div><div><br></div><div><br></div><div>&nbsp; &nbsp; &nbsp;02-07-2018</div><div><br></div><div>Mr Richard Field</div><div>Amberdene</div><div>Chucks Lane, Walton-on-the-Hill</div><div>Tadworth</div><div>KT20 7UB</div><div><br></div><div><br></div><div><br></div><div><br></div><div><b>Dear Mr Field</b></div><div><br></div><div><br></div><div>Pricing information about your right knee replacement</div><div>Following your consultation with me, I am writing to confirm the treatment that I have recommended and my estimated fees.&nbsp; This letter is for information only and is not an invoice.&nbsp;&nbsp;</div><div><br></div><div><b>Reason for the treatment</b></div><div>The reason that I have recommended right knee replacement is osteoarthritis - primary in knee.&nbsp; Prior to surgery I...

CSS

body {
    background-color: #bbb;
}
.page {
    background-color: white;
    margin: 15px auto;
    /*-moz-box-shadow: 10px 10px 5px #333;
    -webkit-box-shadow: 10px 10px 5px #333;*/
    box-shadow: 10px 10px 5px #666;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}
.page-a4 {
    width: 264px;
    height: 374px;
    font-size: 0.33em;
}
.page-inner {
    margin: 15px;
}

JavaScript

// ==ClosureCompiler==
// @output_file_name jquery.pagify.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @code_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/jquery-1.6.js
// ==/ClosureCompiler==

/*jslint sub: true, maxlen: 80, indent: 4 */

(function ($) {
    "use strict";
    // use square bracket notation for Closure Compiler
    $.fn['pagify'] = function (options) {
        var currentPage, // jQuery object representing a page element
            defaults, // Default parameters for the options object
            done, // Set to true when we're as deep into the DOM as possible
            el = this, // Avoid problems with this keyword by re-assigning
            firstPage, // jQuery object representing the first page element
            nextPage, // jQuery object equivalent to currentPage.next();
            pageHtml, // HTML used when creating a new page
            pageIsOverflowed, // fn: Determine if the page has too much on it
            splitNode, // jQuery object for an element which is being split
            splitNodeCopy, // Copy of split element to put on the next page
            splitNodeIntoWords; // fn: split a text node
        pageIsOverflowed = function (page) {
            // Pass it a .page and it works out if the page-inner it contains
            // has a greater height (outerHeight including margins) than the
            // page itself (innerHeight). Returns a boolean.
            var pageInner = page.children('.' + options.innerClass),
                marginCollapseAdjustment;
            marginCollapseAdjustment =
                parseInt(pageInner.children().first().css('margin-top'), 10) -
                parseInt(pageInner.css('margin-top'), 10);
            if (marginCollapseAdjustment < 0) {
                marginCollapseAdjustment = 0;
            }
            return pageInner.outerHeight(true) + marginCollapseAdjustment >
                page.innerHeight();
        };
        splitNodeIntoWords =...