fixed column width bug

build/epub.js

@@ -3885,10 +3885,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 			cutoff = 800;
 
 	//-- Check the width and create even width columns
-	var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
+	var fullWidth = Math.floor(_width);
-	var section = Math.ceil(width / 8);
+	var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
+	var section = Math.floor(width / 8);
 	var gap = (section % 2 === 0) ? section : section - 1;
-
 	//-- Double Page
 	var colWidth = Math.floor((width - gap) / divisor);
 
@@ -3896,11 +3896,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 	this.spreadWidth = (colWidth + gap) * divisor;
 	
 	
-	documentElement.style.width = "auto"; //-- reset width for calculations
-	
 	documentElement.style.overflow = "hidden";
 
-	//documentElement.style.width = width + "px";
+	// Must be set to the new calculated width or the columns will be off
+	documentElement.style.width = width + "px";
 
 	//-- Adjust height
 	documentElement.style.height = _height + "px";

build/epub_no_underscore.js

@@ -3884,10 +3884,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 			cutoff = 800;
 
 	//-- Check the width and create even width columns
-	var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
+	var fullWidth = Math.floor(_width);
-	var section = Math.ceil(width / 8);
+	var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
+	var section = Math.floor(width / 8);
 	var gap = (section % 2 === 0) ? section : section - 1;
-
 	//-- Double Page
 	var colWidth = Math.floor((width - gap) / divisor);
 
@@ -3895,11 +3895,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 	this.spreadWidth = (colWidth + gap) * divisor;
 	
 	
-	documentElement.style.width = "auto"; //-- reset width for calculations
-	
 	documentElement.style.overflow = "hidden";
 
-	//documentElement.style.width = width + "px";
+	// Must be set to the new calculated width or the columns will be off
+	documentElement.style.width = width + "px";
 
 	//-- Adjust height
 	documentElement.style.height = _height + "px";

build/reader.js

@@ -58,7 +58,7 @@ EPUBJS.Reader = function(path, _options) {
 		reload: this.settings.reload,
 		contained: this.settings.contained,
 		bookKey: this.settings.bookKey,
-		styles: this.settings.styles,
+		styles: this.settings.styles
 	});
 	
 	if(this.settings.previousLocationCfi) {

demo/css/main.css

@@ -262,6 +262,7 @@ input:-moz-placeholder {
   height: 80%;
   z-index: 1;
   left: 50%;
+  margin-left: -1px;
   top: 10%;
   opacity: .15;
   box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
@@ -734,4 +735,3 @@ input:-moz-placeholder {
 .icon-columns:before { content: '\e810'; } /* '' */
 .icon-list:before { content: '\e800'; } /* '' */
 .icon-resize-small:before { content: '\e808'; } /* '' */
-

reader/reader.js

@@ -58,7 +58,7 @@ EPUBJS.Reader = function(path, _options) {
 		reload: this.settings.reload,
 		contained: this.settings.contained,
 		bookKey: this.settings.bookKey,
-		styles: this.settings.styles,
+		styles: this.settings.styles
 	});
 	
 	if(this.settings.previousLocationCfi) {

src/layout.js

@@ -65,10 +65,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 			cutoff = 800;
 
 	//-- Check the width and create even width columns
-	var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
+	var fullWidth = Math.floor(_width);
-	var section = Math.ceil(width / 8);
+	var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
+	var section = Math.floor(width / 8);
 	var gap = (section % 2 === 0) ? section : section - 1;
-
 	//-- Double Page
 	var colWidth = Math.floor((width - gap) / divisor);
 
@@ -76,11 +76,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
 	this.spreadWidth = (colWidth + gap) * divisor;
 	
 	
-	documentElement.style.width = "auto"; //-- reset width for calculations
-	
 	documentElement.style.overflow = "hidden";
 
-	//documentElement.style.width = width + "px";
+	// Must be set to the new calculated width or the columns will be off
+	documentElement.style.width = width + "px";
 
 	//-- Adjust height
 	documentElement.style.height = _height + "px";

tests/qunit/qunit.css

@@ -235,10 +235,15 @@
 
 /** Fixture */
 
-#qunit-fixture {
+/* #qunit-fixture {
 	position: absolute;
 	top: -10000px;
 	left: -10000px;
 	width: 1000px;
 	height: 1000px;
+} */
+
+#qunit-fixture #viewer {
+	margin: 10px auto;
+	display: block;
 }

tests/render.js

@@ -213,3 +213,130 @@ asyncTest("Switch Spreads to Single", 3, function() {
 	render.then(result);
 });
 
+asyncTest("Go to chapter 4 and advance through chapter, checking position with width set", 11, function() {
+	var Book = ePub('../demo/moby-dick/', { width: 1100.5, height: 612 });
+
+	var render = Book.renderTo("qunit-fixture");
+
+	var result = function(){
+
+		var $iframe = $( "iframe", "#qunit-fixture" ),
+			$body;
+		
+		equal( $iframe.length, 1, "iframe added successfully" );
+
+		start();
+
+		$body = $iframe.contents().find("body");
+		equal( $body.scrollLeft(), 0, "on page 1");
+
+		stop();
+
+		Book.goto("chapter_003.xhtml").then(function(){
+			
+			start();
+			
+			equal(Book.renderer.layout.spreadWidth, 1240);
+			
+			$body = $iframe.contents().find("body");
+
+			Book.nextPage();
+			equal( $body.scrollLeft(), 1240, "on page 2");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 2480, "on page 3");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 3720, "on page 4");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 4960, "on page 5");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 6200, "on page 6");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 7440, "on page 7");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 8680, "on page 8");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), 9920, "on page 9");
+		});
+		
+
+	};
+
+	render.then(result);
+
+	
+});
+
+asyncTest("Go to chapter 4 and advance through chapter, checking position with width from div", 11, function() {
+	var Book = ePub('../demo/moby-dick/');
+	var viewer = document.createElement("div");
+	var $viewer;
+	var render;
+	var width = 1236;
+	
+	var result = function(){
+
+		var $iframe = $( "iframe", "#viewer" ),
+			$body;
+		
+		equal( $iframe.length, 1, "iframe added successfully" );
+
+		start();
+
+		$body = $iframe.contents().find("body");
+		equal( $body.scrollLeft(), 0, "on page 1");
+
+		stop();
+
+		Book.goto("chapter_003.xhtml").then(function(){
+			
+			start();
+			
+			console.log(Book.renderer.render.width)
+			equal(Book.renderer.layout.spreadWidth, width, "Spread width is correctly calculated");
+			$body = $iframe.contents().find("body");
+
+			Book.nextPage();
+			equal( $body.scrollLeft(), width, "on page 2");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 2, "on page 3");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 3, "on page 4");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 4, "on page 5");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 5, "on page 6");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 6, "on page 7");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 7, "on page 8");
+			
+			Book.nextPage();
+			equal( $body.scrollLeft(), width * 8, "on page 9");
+			
+		});
+		
+
+	};
+	viewer.id = "viewer";
+	$("#qunit-fixture").append(viewer);
+	$viewer = $("#viewer");
+	
+	$viewer.width(1100.797);
+	$viewer.height(612);
+	
+	render = Book.renderTo("viewer");
+	render.then(result);
+});