JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Text split into "SVG pages"</h4>
<h4>Selectable and Searchable</h4>
<div id="page" class="page"></div>
<h4>Page 2</h4>
<div id="page2" class="page"></div>
<h4>Page 3</h4>
<div id="page3" class="page"></div>

CSS

body {
    background-color: ivory;
}
.page {
    border:1px solid red;
}

JavaScript

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "14px verdana";

var pageWidth = 250;
var pageHeight = 150;
var pagePaddingLeft = 10;
var pagePaddingRight = 10;
var approxWordsPerPage = 500;
var lineHeight = 18;
var maxLinesPerPage = parseInt(pageHeight / lineHeight) - 1;
var x = pagePaddingLeft;
var y = lineHeight;
var maxWidth = pageWidth - pagePaddingLeft - pagePaddingRight;
var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

// # words that have been displayed 
//(used when ordering a new page of words)
var wordCount = 0;

// size the div to the desired page size
$pages = $(".page");
$pages.width(pageWidth)
$pages.height(pageHeight);


// Test: Page#1

// get a reference to the page div
var $page = $("#page");
// use html canvas to word-wrap this page
var lines = textToLines(getNextWords(wordCount), maxWidth, maxLinesPerPage, x, y);
// create svg elements for each line of text on the page
drawSvg(lines, x);

// Test: Page#2 (just testing...normally there's only 1 full-screen page)
var $page = $("#page2");
var lines = textToLines(getNextWords(wordCount), maxWidth, maxLinesPerPage, x, y);
drawSvg(lines, x);

// Test: Page#3 (just testing...normally there's only 1 full-screen page)
var $page = $("#page3");
var lines = textToLines(getNextWords(wordCount), maxWidth, maxLinesPerPage, x, y);
drawSvg(lines, x);


// fetch the next page of words from the server database
// (since we've specified...