HTML Book-Like Pagination

HTML book-like pagination

Building on Dan's answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Hope this helps...

Implementing HTML book-like pagination

i found this solution and it worked for me. Try Nacho L solution on this HTML book-like pagination?

Paginating HTML document for printing with WebKit-based browsers

The browser engine should take care of everything and you can aid it using a stylesheet for media="print".

For example to force page breaks such that every heading of level 1 or 2 (<h1> or <h2>) is placed at the beginning of a new page use page-break-before:

h1, h2 { page-break-before:always; }

In Chrome, IE & Opera you can control widows and orphans, but it hasn't landed in WebKit yet, so for now you could use

p { page-break-inside: avoid;  } 

to avoid page breaks inside paragraphs.

You can even control margins for first, left and right pages separately.

Phantom's render() uses stylesheets for print media if the output is a pdf file. rasterize.js example looks like a ready to use printing solution.

Pagination: How to display a long text as book pages?

To layout a long string in a beautiful book page format. You need to get the exact string portion. You can use this function.

function get_page($text, $page_index, $line_length=76, $page_length=40){
$lines = explode("\n", wordwrap($texxt, $line_length, "\n"));
$page_lines = array_slice($lines, $page_index*$page_length, $page_length);
return implode("\n", $page_lines);
}

$line_length = 70;
$lines_per_page=50;
$page = 3;
$longtext= "...";

$page_text = get_page($longtext, $page-1, $line_length, $page_length);

See Demonstration.

Example

PHP

$longtext = "..."; // it can be retrieved from sql as well.
$index=is_int($_GET['page'])? intval($_GET['page']): 1;
$line_length = 70;
$lines_per_page=50;
$longtext= "...";

$page_text = get_page($longtext, $index-1, $line_length, $page_length);
echo json_encode(array('text'=>$page_text));

JQuery

var nextPage=2;
$.get("getpage.php", { page: nextPage }, function(data){
alert("text is "+data.text;
// show the text data.text
});

How to give pagination in reading a e-pub format book (just like iBook shows pagination)?

To paginate ePub, you have to extensively use WebView and column layout with custom CSS. Here is a typical workflow for each chapter:

  1. Create an in-memory or off-screen WebView component with required width and height;
  2. Load a chapter HTML with injected <script src="[local path]"></script> tag;
  3. JavaScipt code should enclose the whole content into one div tag using DHTML;
  4. Also, JavaScript should inject CSS with a property column-width set for that div tag;
  5. When WebKit engine completes rendering, you receive an event in JavaScript;
  6. Once you get the event, it's time to count how many pages is in HTML: clientWidth / width.

Then, you can use the same technique to render ePub into UIViewController, but this time on screen. While rendering how many pages are in ePub, you may want to display a progress indicator.



Related Topics



Leave a reply



Submit