Do you want your website display a long story or a document in a ebook, pdf or MS-word like format like below?

Here is a tutorial about creating  pages with specific height and width out of a very long text to give a microsoft word or other document editor type look using javascript and jQuery.

First you will need to split / explode the long text to a specific length chunks using javascript and then join them to form a separate divs/ pages and finally give it a css style so that it looks like an ebook, or a document.



var pageCount = $('#long-content').height()/800;
var contentLength = $('#long-content').text().length;
var perPageLength = Math.floor(contentLength/pageCount);
var chunks = [];
var paged = '<div class="page">'+chunks.join('</div><div class="page">')+'</div>';




    border:1px solid gray;
    padding: 15px;
    margin: 5px auto;
    height: 820px;
    width: 500px;
    background: #fff;
    background: #ccc;
    padding: 15px;
    margin: 5px auto;
    width: 500px

Here is the link to the jsfiddle



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.