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:
- Create an in-memory or off-screen WebView component with required
width
andheight
; - Load a chapter HTML with injected
<script src="[local path]"></script>
tag; - JavaScipt code should enclose the whole content into one
div
tag using DHTML; - Also, JavaScript should inject CSS with a property
column-width
set for thatdiv
tag; - When WebKit engine completes rendering, you receive an event in JavaScript;
- 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
Python Library for Rendering HTML and JavaScript
How to Save and Restore a File Object in Local Storage
How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf
Get All Computed Style of an Element
Using JavaScript to Detect Google Chrome to Switch CSS
JavaScript Alert Not Working in Android Webview
Why Is Arr = [] Faster Than Arr = New Array
How to Use JavaScript Source Maps (.Map Files)
Image.Onload Event and Browser Cache
How to Reset (Clear) Form Through JavaScript
Angular2 Router 2.0.0 Not Reloading Components When Same Url Loaded with Different Parameters
How to Call a Js Function Using Onclick Event
How to Set Textarea Scroll Bar to Bottom as a Default
Get Element Stylesheet Style in JavaScript
Programmatically Editing Less (Css) Code with Jquery-Like Selector Syntax
Removing Address Bar from Browser (To View on Android)