Permalink
Browse files

a huge number of changes. Page rendering. Text sizing. Better centeri…

…ng. Other stuff.
  • Loading branch information...
1 parent 715209e commit 906bb6040795680ab1cf2e4306451b26dc4574c3 @blaine committed May 28, 2010
Showing with 338 additions and 73 deletions.
  1. +51 −55 book.css
  2. +100 −9 index.html
  3. +21 −1 js/pageHandler.js
  4. +157 −0 js/pageRenderer.js
  5. +0 −4 js/swipe.js
  6. +9 −4 portrait.css
View
@@ -10,64 +10,66 @@ a {
}
div#container {
-/*
- width: 790px; // (page.width * 2) + 40
- height: 610px; // page.height + 82 */
- width: 841px;
- height: 650px;
- margin: 0 auto;
- padding: 0;
+ width: 912px; /* (page.width * 2) */
+ height: 656px; /* page.height + 20 */
display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ border: 0;
+ padding: 0;
+/* -webkit-box-shadow: 2px 0 2px #000; */
}
-div.page {
- margin: 15px 0 10px;
- /*
- border: 1px solid black;
- width: 375px;
- height: 528px; */
- width: 420px;
- height: 630px;
-/* background-color: #f7f6f4; */
- background-color: #faf6f0;
-}
+div#backgroundDiv {
+ width: 952px;
+ height: 686px;
+ margin: auto;
+ position: absolute;
+ top: 50%;
+ bottom: 50%;
+ left: 0;
+ right: 0;
+ z-index: -1;
+ text-align: center;
+/* background-image:
+url('images/tl.png'), url('images/tml.png'), url('images/tcl.png'), url('images/tcr.png'), url('images/tmr.png'), url('images/tr.png'),
+url('images/sl.png'), url('images/sr.png'),
+url('images/bl.png'), url('images/bml.png'), url('images/bcl.png'), url('images/bcr.png'), url('images/bmr.png'), url('images/br.png');
-div.content {
- height: 530px;
+ background-size: 56px 50px, 365px 50px, 55px 50px, 55px 50px, 365px 50px, 56px 50px,
+ 56px 586px, 56px 586px,
+ 56px 50px, 365px 50px, 55px 50px, 55px 50px, 365px 50px, 56px 50px;
+
+ background-repeat: no-repeat;
+ background-position: top left, top 56px, top 421px, top 476px, top 531px, top right,
+ 50px left, 50px right,
+ bottom left, bottom 56px, bottom 421px, bottom 476px, bottom 531px, bottom right;
+ background-color: #faf6f0; */
}
-div#leftpage {
- float: left;
-/* margin-left: 15px; */
- margin-left: 0;
+div#background canvas {
+ margin: auto;
}
-div#rightpage {
- float: right;
-/* margin-right: 15px; */
- margin-right: 0;
- border-left: 1px solid #9a9690;
-}
-div#pagenav {
- clear: both;
- margin: 0 15px;
- height: 40px;
-}
-div#pagenav * {
+div.page {
float: left;
- height: 100%;
- vertical-align: middle;
-}
-div#pagenav_left {
- width: 15px;
+ margin: 0;
}
-div#pagenav_content {
- width: 730px;
- text-align: center;
+
+div#leftpage {
+ /* this is a hack. the positioning needs work. */
+ margin-left: 1.25em;
+/* background-image: -webkit-gradient(linear, right top, left top, from(rgb(239, 235, 230)), color-stop(0.05, rgb(250, 246, 240))); */
}
-div#pagenav_right {
- width: 15px;
- text-align: right;
+
+div#rightpage {
+ /* this is a hack tied to the above left-page hack. the positioning needs work. */
+ margin-left: 0.25em;
+/* background-image: -webkit-gradient(linear, left top, right top, from(rgb(239, 235, 230)), color-stop(0.05, rgb(250, 246, 240))); */
}
div.content {
@@ -84,21 +86,15 @@ div.content pre {
div.content * {
line-height: 150%;
- font-size: 12px;
+ font-size: 1em;
}
-/*div.content * {
- margin: 0 0 1em 0;
- padding: 0;
- font-size: 12px;
- font-family: Serif, Georgia;
- line-height: 150%;
-}*/
div.header {
font-size: 80%;
vertical-align: middle;
position: relative;
margin-top: 1em;
+ height: 1em;
}
div.header h1 {
font-size: 120%;
View
@@ -2,8 +2,12 @@
<head>
<link rel="stylesheet" type="text/css" media="screen" href="book.css" />
- <link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css" />
+ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
+ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px) and (orientation: landscape)" href="landscape.css" />
+
<meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="viewport" content="width=930, user-scalable=no" />
+
<script type="text/javascript" src="js/inflate.js"></script>
<script type="text/javascript" src="js/sax.js"></script>
<script type="text/javascript" src="js/zip.js"></script>
@@ -14,12 +18,12 @@
<script type="text/javascript" src="js/section.js"></script>
<script type="text/javascript" src="js/pageHandler.js"></script>
- <!-- Hyphenation is currently [not] disabled. It shall return! -->
+ <!-- Hyphenation. -->
<script src="js/Hyphenator.js" type="text/javascript"></script>
<script src="js/patterns/en.js" type="text/javascript"></script>
- <!-- -->
<script src="js/swipe.js"></script>
+ <script src="js/pageRenderer.js"></script>
<script type="text/javascript">
@@ -28,8 +32,97 @@
loadBook(epuburl);
}
+ function setPageSize(pageRatio) {
+
+ if (!pageRatio) pageRatio = Math.sqrt(Math.E);
+
+ var width = (window.innerWidth - 20) / 2;
+ var height = window.innerHeight - 20;
+
+ var pageHeight = height,
+ pageWidth = width;
+
+ if (height / pageRatio > width) {
+ // We'll need to constrain the height.
+ pageHeight = width * pageRatio;
+/* } else if (height / pageRatio > width * 1.5) {
+ // We have way more height than width. Go to a one-page view.
+ pageHeight = width * pageRatio; */
+ } else {
+ // Constrain the width, 2-page.
+ pageWidth = height / pageRatio;
+ }
+
+ console.log("Width/Height: " + width + "/" + height + ", pageWidth/pageHeight: " + pageWidth + "/" + pageHeight);
+
+ var container = document.getElementById('container');
+ container.style.width = pageWidth * 2;
+ container.style.height = pageHeight;
+
+ var background = document.getElementById('backgroundDiv');
+ background.style.width = pageWidth * 2;
+ background.style.height = pageHeight;
+
+ var canvas = document.getElementById('background');
+ canvas.width = pageWidth * 2;
+ canvas.height = pageHeight;
+
+ var pages = document.getElementsByClassName('page');
+
+ for (var i = 0, l = pages.length; i < l; i++) {
+ pages[i].style.width = pageWidth - Math.log(22) * 8;
+ pages[i].style.height = pageHeight - Math.log(22) * 10;
+ pages[i].style.marginTop = '0px';
+
+ var header = document.getElementsByClassName('header')[0];
+ var headerHeight = 24 * 2; // hard coded for now, until we properly size the header...
+
+ var contents = document.getElementsByClassName('content');
+ contents[0].style.height = pageHeight - (Math.log(22) * 10) - headerHeight;
+ }
+
+ // This needs tweaking, because it should actually be done once we know
+ // which font will be used as the body font for the book. This is a reasonable
+ // approximation, though, and will do for now.
+
+ var sizerElement = document.createElement('p');
+
+ // Rough statistical relevancy of letters [in english]. This will give us a more-accurate approximation of average line length.
+ var letters = "aaaaaaaabbcccddddeeeeeeeeeeeeeffgghhhhhhiiiiiiijkllllmmnnnnnnnooooooooppqrrrrrrsssssstttttttttuuuvwxyyz";
+ sizerElement.textContent = letters;
+ sizerElement.style.left = '0';
+ sizerElement.style.top = '0';
+ sizerElement.style.position = 'absolute';
+ sizerElement.style.margin = '0';
+ sizerElement.style.padding = '0';
+ document.body.appendChild(sizerElement);
+
+ // Our ideal line width is 66 characters.
+console.log('offsetwidth: ' + sizerElement.offsetWidth);
+console.log('letters.length: ' + letters.length);
+ var idealLineWidth = (sizerElement.offsetWidth / letters.length) * 66;
+ var measuredFontSize = document.defaultView.getComputedStyle(sizerElement, null).getPropertyValue('font-size').toString().replace('px', '');
+console.log('measured font size: ' + measuredFontSize);
+
+ // now that we have that, remove the sizer element.
+ document.body.removeChild(sizerElement);
+
+ var pageSize = pageWidth - Math.log(22) * 8
+console.log('content width: ' + pageSize);
+
+ // multiply the actual fontSize by our sizing ratio
+ var pixelFontSize = (measuredFontSize * pageSize / idealLineWidth) + 'px';
+console.log('pixelFontSize: ' + pixelFontSize);
+
+ // and apply that to the document body. All other sizes should be in ems.
+ document.body.style.fontSize = pixelFontSize;
+ }
+
var loadBook = function (epub) {
+ setPageSize();
+
+
selector.style.display = 'none';
container.style.display = 'block';
@@ -177,14 +270,15 @@
</div>
</div>
+ <div id="backgroundDiv">
+ <canvas id="background" width="952" height="686"></canvas>
+ </div>
+
<div id="container">
<div id="leftpage" class="page">
<div class="left header">
<span class="left pagenum"></span> &#183;
<h1 id="book_title"></h1>
-<!-- <span class="discoverable">
- <a href="javascript:pageHandler.prevPage()" title="Previous Page">&#8617;</a>
- </span> -->
</div>
<div id="leftcontent" class="left content"></div>
<div class="left footer">
@@ -195,9 +289,6 @@ <h1 id="chapter_heading"></h1>
<div id="rightpage" class="page landscape">
<div class="right header">
-<!-- <span class="discoverable">
- <a href="javascript:pageHandler.nextPage()" title="Next Page">&#8618;</a>
- </span> -->
<h1 id="author_heading"></h1> &#183;
<span class="right pagenum"></span>
</div>
View
@@ -78,8 +78,27 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
}
};
+ // TODO: This is a hard-coded hack, should be made modular.
+ this.pageRenderer = function () {
+ var totalPageCount = pageCounts.length;
+ for (var i = pageCounts.length - 1; i >= 0; i--) {
+ if (!pageCounts[i]) continue;
+
+ totalPageCount = pageCounts[i];
+ break;
+ }
+
+ var currPage = pageCounts[currSection] + sections[currSection].currPage;
+ if (!currPage) currPage = Math.min(currSection, totalPageCount - 1);
+ if (currPage >= totalPageCount) currPage = currPage - 1;
+
+ drawPct(currPage / totalPageCount);
+ };
+
this.pageDisplayer = function (pageIdx) {
+ this.pageRenderer();
+
// Expect to get called within 50 ms, or display the loading indicator.
showLoadingIndicator(50);
waiting++;
@@ -106,7 +125,7 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
// Move to the next section if we're at the end of this one.
if (sections[currSection].isLastPage()) {
- if (sections[currSection + 1]) {
+ if (sections.length > currSection + 1) {
currSection += 1;
sections[currSection].seekBeginning();
} else {
@@ -122,6 +141,7 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
this.prevPage = function () {
+ // Don't go back a page if we're already trying to do a page movement.
if (waiting > 0) return;
if (sections[currSection].currPage <= self.displayElements.length) {
Oops, something went wrong.

0 comments on commit 906bb60

Please sign in to comment.