分页：如何将长文本显示为书页？

Question

I have a very long text and I want to display it as a book in a web page. The user will use arrow keys to move forward and backward in same way like flipping pages of the book.

Leaving apart the transition of pages, how can this be achieved using jQuery?

What I thought was calculating the amount of text that will occupy the space on one page and then breaking the whole text into such pages and then displaying them. But it seems to be a bad idea for the space occupied will be platform dependent even if we fix the font.

One more problem that I was facing while using the space calculation method was due to the css justified display of text.

Has anyone done such thing before for a web page?

Answer 1

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("
", wordwrap($texxt, $line_length, "
"));
    $page_lines = array_slice($lines, $page_index*$page_length, $page_length);
    return implode("
", $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
});