From 9e4dfb70171ceb0cb716b534fef3085c47e0a31a Mon Sep 17 00:00:00 2001 From: Juan Corona Date: Sat, 6 Sep 2014 12:53:50 -0700 Subject: [PATCH 1/5] Modify rectangle-based visibility detection so it supports vertical writing mode. --- js/views/cfi_navigation_logic.js | 43 ++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/js/views/cfi_navigation_logic.js b/js/views/cfi_navigation_logic.js index 77d53ba59..53303e78c 100644 --- a/js/views/cfi_navigation_logic.js +++ b/js/views/cfi_navigation_logic.js @@ -61,15 +61,30 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ return options.paginationInfo && !!options.paginationInfo.rightToLeft; } + /** + * @private + * Checks whether or not pages are rendered with vertical writing mode + * + * @returns {boolean} + */ + function isVerticalWritingMode() { + return options.paginationInfo && !!options.paginationInfo.isVerticalWritingMode; + } + + /** * @private * Checks whether or not a (fully adjusted) rectangle is at least partly visible * * @param {Object} rect * @param {Object} frameDimensions + * @param {boolean} [isVwm] isVerticalWritingMode * @returns {boolean} */ - function isRectVisible(rect, frameDimensions) { + function isRectVisible(rect, frameDimensions, isVwm) { + if (isVwm) { + return rect.top >= 0 && rect.top < frameDimensions.height; + } return rect.left >= 0 && rect.left < frameDimensions.width; } @@ -81,7 +96,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ */ function getColumnFullWidth() { - if (!options.paginationInfo || options.paginationInfo.isVerticalWritingMode) + if (!options.paginationInfo || isVerticalWritingMode()) { return $iframe.width(); } @@ -169,6 +184,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ } var isRtl = isPageProgressionRightToLeft(); + var isVwm = isVerticalWritingMode(); var columnFullWidth = getColumnFullWidth(); var frameDimensions = { width: $iframe.width(), @@ -179,7 +195,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ // because of webkit inconsistency, that single rectangle should be adjusted // until it hits the end OR will be based on the FIRST column that is visible adjustRectangle(clientRectangles[0], frameDimensions, columnFullWidth, - isRtl, true); + isRtl, isVwm, true); } // for an element split between several CSS columns, @@ -187,7 +203,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ // each of those should be checked var visibilityPercentage = 0; for (var i = 0, l = clientRectangles.length; i < l; ++i) { - if (isRectVisible(clientRectangles[i], frameDimensions)) { + if (isRectVisible(clientRectangles[i], frameDimensions, isVwm)) { visibilityPercentage = shouldCalculateVisibilityPercentage ? measureVisibilityPercentageByRectangles(clientRectangles, i) : 100; @@ -387,13 +403,20 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ * @param {Object} frameDimensions * @param {number} columnFullWidth * @param {boolean} isRtl + * @param {boolean} isVwm isVerticalWritingMode * @param {boolean} shouldLookForFirstVisibleColumn * If set, there'll be two-phase adjustment * (to align a rectangle with a viewport) + */ - function adjustRectangle(rect, frameDimensions, columnFullWidth, isRtl, + function adjustRectangle(rect, frameDimensions, columnFullWidth, isRtl, isVwm, shouldLookForFirstVisibleColumn) { + // Rectangle adjustment is not needed in VWM since it does not deal with columns + if (isVwm) { + return; + } + if (isRtl) { columnFullWidth *= -1; // horizontal shifts are reverted in RTL mode } @@ -409,7 +432,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ // (i.e., is the first visible one). if (shouldLookForFirstVisibleColumn) { while (rect.bottom >= frameDimensions.height) { - if (isRectVisible(rect, frameDimensions)) { + if (isRectVisible(rect, frameDimensions, isVwm)) { break; } offsetRectangle(rect, columnFullWidth, -frameDimensions.height); @@ -426,9 +449,15 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ * @param {number} frameHeight * @param {number} columnFullWidth * @param {boolean} isRtl + * @param {boolean} isVwm isVerticalWritingMode */ function trimRectanglesByVertOffset( - rects, verticalOffset, frameHeight, columnFullWidth, isRtl) { + rects, verticalOffset, frameHeight, columnFullWidth, isRtl, isVwm) { + + //TODO: Support vertical writing mode + if (isVwm) { + return; + } var totalHeight = _.reduce(rects, function(prev, cur) { return prev + cur.height; From c0201f7b18224bbe43f65556bc6e7e282f8fd1b7 Mon Sep 17 00:00:00 2001 From: Juan Corona Date: Sat, 6 Sep 2014 12:54:52 -0700 Subject: [PATCH 2/5] Attempt at fixing findPageByRectangles for vertical writing mode --- js/views/cfi_navigation_logic.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/js/views/cfi_navigation_logic.js b/js/views/cfi_navigation_logic.js index 53303e78c..484ca99e4 100644 --- a/js/views/cfi_navigation_logic.js +++ b/js/views/cfi_navigation_logic.js @@ -230,6 +230,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ } var isRtl = isPageProgressionRightToLeft(); + var isVwm = isVerticalWritingMode(); var columnFullWidth = getColumnFullWidth(); var frameHeight = $iframe.height(); @@ -237,22 +238,31 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ if (spatialVerticalOffset) { trimRectanglesByVertOffset(clientRectangles, spatialVerticalOffset, - frameHeight, columnFullWidth, isRtl); + frameHeight, columnFullWidth, isRtl, isVwm); } var firstRectangle = _.first(clientRectangles); if (clientRectangles.length === 1) { adjustRectangle(firstRectangle, { height: frameHeight, width: frameWidth - }, columnFullWidth, isRtl); + }, columnFullWidth, isRtl, isVwm); } - var leftOffset = firstRectangle.left; - if (isRtl) { - leftOffset = (columnFullWidth * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - leftOffset; - } + var pageIndex; - var pageIndex = Math.floor(leftOffset / columnFullWidth); + if (isVwm) { + var topOffset = firstRectangle.top; + if (isRtl) { + topOffset = (frameHeight * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - topOffset; + } + pageIndex = Math.floor(topOffset / frameHeight); + } else { + var leftOffset = firstRectangle.left; + if (isRtl) { + leftOffset = (columnFullWidth * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - leftOffset; + } + pageIndex = Math.floor(leftOffset / columnFullWidth); + } if (pageIndex < 0) { pageIndex = 0; @@ -458,7 +468,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ if (isVwm) { return; } - + var totalHeight = _.reduce(rects, function(prev, cur) { return prev + cur.height; }, 0); From 95c51f9f45badb29ce67ef16e7f8825b1f08263b Mon Sep 17 00:00:00 2001 From: Juan Corona Date: Sat, 6 Sep 2014 14:04:52 -0700 Subject: [PATCH 3/5] Second attempt at fixing findPageByRectangles for vertical writing mode (works but confused about the requirement of RTL checks) --- js/views/cfi_navigation_logic.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/js/views/cfi_navigation_logic.js b/js/views/cfi_navigation_logic.js index 484ca99e4..a405930be 100644 --- a/js/views/cfi_navigation_logic.js +++ b/js/views/cfi_navigation_logic.js @@ -113,6 +113,12 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ * @returns {Object} */ function getVisibleContentOffsets() { + if(isVerticalWritingMode()){ + return { + top: (options.paginationInfo ? options.paginationInfo.pageOffset : 0) +// * (isPageProgressionRightToLeft() ? -1 : 1) + }; + } return { left: (options.paginationInfo ? options.paginationInfo.pageOffset : 0) * (isPageProgressionRightToLeft() ? -1 : 1) @@ -252,9 +258,9 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ if (isVwm) { var topOffset = firstRectangle.top; - if (isRtl) { - topOffset = (frameHeight * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - topOffset; - } +// if (isRtl) { +// topOffset = (frameHeight * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - topOffset; +// } pageIndex = Math.floor(topOffset / frameHeight); } else { var leftOffset = firstRectangle.left; From 03cc95bb6990cad3edc4a83673704dce6fe23ecf Mon Sep 17 00:00:00 2001 From: Juan Corona Date: Mon, 8 Sep 2014 09:33:48 -0700 Subject: [PATCH 4/5] Remove disabled code for RTL handling when in VWM. Special handling of RTL is not needed in this case. --- js/views/cfi_navigation_logic.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/js/views/cfi_navigation_logic.js b/js/views/cfi_navigation_logic.js index a405930be..40333e01b 100644 --- a/js/views/cfi_navigation_logic.js +++ b/js/views/cfi_navigation_logic.js @@ -116,7 +116,6 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ if(isVerticalWritingMode()){ return { top: (options.paginationInfo ? options.paginationInfo.pageOffset : 0) -// * (isPageProgressionRightToLeft() ? -1 : 1) }; } return { @@ -258,9 +257,6 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){ if (isVwm) { var topOffset = firstRectangle.top; -// if (isRtl) { -// topOffset = (frameHeight * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - topOffset; -// } pageIndex = Math.floor(topOffset / frameHeight); } else { var leftOffset = firstRectangle.left; From 9a30f50d21c257b8262ca595d95ba458e837933a Mon Sep 17 00:00:00 2001 From: Daniel Weck Date: Mon, 8 Sep 2014 21:54:14 +0100 Subject: [PATCH 5/5] adjusted CSS column algorithm in reflowable view to take into account single-column vertical writing mode (user setting has no effect, max text width corresponds 2x single-column threshold) --- js/views/reflowable_view.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/js/views/reflowable_view.js b/js/views/reflowable_view.js index 913b9ae23..e343b2f2f 100644 --- a/js/views/reflowable_view.js +++ b/js/views/reflowable_view.js @@ -497,11 +497,15 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){ function updatePagination() { - + + // At 100% font-size = 16px (on HTML, not body or descendant markup!) + var MAXW = 550; //TODO user/vendor-configurable? + var MINW = 400; + var isDoublePageSyntheticSpread = ReadiumSDK.Helpers.deduceSyntheticSpread(_$viewport, _currentSpineItem, _viewSettings); var forced = (isDoublePageSyntheticSpread === false) || (isDoublePageSyntheticSpread === true); - // excludes 0 and 1 truthy values which denote non-forced result + // excludes 0 and 1 falsy/truthy values which denote non-forced result // console.debug("isDoublePageSyntheticSpread: " + isDoublePageSyntheticSpread); // console.debug("forced: " + forced); @@ -512,8 +516,17 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){ // console.debug("TRYING SPREAD INSTEAD OF SINGLE..."); } - _paginationInfo.visibleColumnCount = _htmlBodyIsVerticalWritingMode ? 1 : (isDoublePageSyntheticSpread ? 2 : 1); + _paginationInfo.visibleColumnCount = isDoublePageSyntheticSpread ? 2 : 1; + if (_htmlBodyIsVerticalWritingMode) + { + MAXW *= 2; + isDoublePageSyntheticSpread = false; + forced = true; + _paginationInfo.visibleColumnCount = 1; +// console.debug("Vertical Writing Mode => single CSS column, but behaves as if two-page spread"); + } + if(!_$epubHtml) { return; } @@ -529,10 +542,6 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){ var filler = 0; - // At 100% font-size = 16px (on HTML, not body or descendant markup!) - var MAXW = 550; //TODO user/vendor-configurable? - var MINW = 400; - // var win = _$iframe[0].contentDocument.defaultView || _$iframe[0].contentWindow; // var htmlBodyComputedStyle = win.getComputedStyle(_$htmlBody[0], null); // if (htmlBodyComputedStyle)