From 6209fcf65d67702a8cb7b1773785c98484f5187d Mon Sep 17 00:00:00 2001 From: "r.hanson" Date: Mon, 21 Nov 2016 17:05:49 -0600 Subject: [PATCH] Cover images on the Chrome browser are sized so that they take up 100% width; whereas on firefox, etc they take up 100% height. This leads to the cover image appearing correct on firefox; but on chrome the image takes up multiple columns (and thus appears to occupy several pages). This code change causes Chrome to size the images so that they are 100% height, not 100% width. --- js/views/reflowable_view.js | 92 +++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/js/views/reflowable_view.js b/js/views/reflowable_view.js index 8b8a7e9b0..c64adb43a 100644 --- a/js/views/reflowable_view.js +++ b/js/views/reflowable_view.js @@ -485,7 +485,7 @@ var ReflowableView = function(options, reader){ function updateViewportSize() { var newWidth = _$contentFrame.width(); - + // Ensure that the new viewport width is always even numbered // this is to prevent a rendering inconsistency between browsers when odd-numbered bounds are used for CSS columns // See https://github.com/readium/readium-shared-js/issues/37 @@ -510,7 +510,8 @@ var ReflowableView = function(options, reader){ redraw(); _.defer(function () { - + resizeImages(); + Globals.logEvent("InternalEvents.CURRENT_VIEW_PAGINATION_CHANGED", "EMIT", "reflowable_view.js"); self.emit(Globals.InternalEvents.CURRENT_VIEW_PAGINATION_CHANGED, { paginationInfo: self.getPaginationInfo(), @@ -578,27 +579,25 @@ var ReflowableView = function(options, reader){ var forced = (isDoublePageSyntheticSpread === false) || (isDoublePageSyntheticSpread === true); // excludes 0 and 1 falsy/truthy values which denote non-forced result -// console.debug("isDoublePageSyntheticSpread: " + isDoublePageSyntheticSpread); -// console.debug("forced: " + forced); -// - if (isDoublePageSyntheticSpread === 0) - { + // console.debug("isDoublePageSyntheticSpread: " + isDoublePageSyntheticSpread); + // console.debug("forced: " + forced); + // + if (isDoublePageSyntheticSpread === 0) { isDoublePageSyntheticSpread = 1; // try double page, will shrink if doesn't fit -// console.debug("TRYING SPREAD INSTEAD OF SINGLE..."); + // console.debug("TRYING SPREAD INSTEAD OF SINGLE..."); } _paginationInfo.visibleColumnCount = isDoublePageSyntheticSpread ? 2 : 1; - if (_htmlBodyIsVerticalWritingMode) - { + 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"); + // console.debug("Vertical Writing Mode => single CSS column, but behaves as if two-page spread"); } - if(!_$epubHtml) { + if (!_$epubHtml) { return; } @@ -606,65 +605,61 @@ var ReflowableView = function(options, reader){ // "borderLeft" is the blank vertical strip (e.g. 40px wide) where the left-arrow button resides, i.e. previous page command var borderLeft = parseInt(_$viewport.css("border-left-width")); - + // The "columnGap" separates two consecutive columns in a 2-page synthetic spread (e.g. 60px wide). // This middle gap (blank vertical strip) actually corresponds to the left page's right-most margin, combined with the right page's left-most margin. // So, "adjustedGapLeft" is half of the center strip... - var adjustedGapLeft = _paginationInfo.columnGap/2; + var adjustedGapLeft = _paginationInfo.columnGap / 2; // ...but we include the "borderLeft" strip to avoid wasting valuable rendering real-estate: - adjustedGapLeft = Math.max(0, adjustedGapLeft-borderLeft); + adjustedGapLeft = Math.max(0, adjustedGapLeft - borderLeft); // Typically, "adjustedGapLeft" is zero because the space available for the 'previous page' button is wider than half of the column gap! // "borderRight" is the blank vertical strip (e.g. 40px wide) where the right-arrow button resides, i.e. next page command var borderRight = parseInt(_$viewport.css("border-right-width")); - + // The "columnGap" separates two consecutive columns in a 2-page synthetic spread (e.g. 60px wide). // This middle gap (blank vertical strip) actually corresponds to the left page's right-most margin, combined with the right page's left-most margin. // So, "adjustedGapRight" is half of the center strip... - var adjustedGapRight = _paginationInfo.columnGap/2; + var adjustedGapRight = _paginationInfo.columnGap / 2; // ...but we include the "borderRight" strip to avoid wasting valuable rendering real-estate: - adjustedGapRight = Math.max(0, adjustedGapRight-borderRight); + adjustedGapRight = Math.max(0, adjustedGapRight - borderRight); // Typically, "adjustedGapRight" is zero because the space available for the 'next page' button is wider than half of the column gap! (in other words, the right-most and left-most page margins are fully included in the strips reserved for the arrow buttons) // Note that "availableWidth" does not contain "borderLeft" and "borderRight" (.width() excludes the padding and border and margin in the CSS box model of div#epub-reader-frame) var availableWidth = _$viewport.width(); - + // ...So, we substract the page margins and button spacing to obtain the width available for actual text: var textWidth = availableWidth - adjustedGapLeft - adjustedGapRight; - + // ...and if we have 2 pages / columns, then we split the text width in half: - if (isDoublePageSyntheticSpread) - { + if (isDoublePageSyntheticSpread) { textWidth = (textWidth - _paginationInfo.columnGap) * 0.5; } var filler = 0; // Now, if the resulting width actually available for document content is greater than the maximum allowed value, we create even more left+right blank space to "compress" the horizontal run of text. - if (textWidth > MAXW) - { + if (textWidth > MAXW) { var eachPageColumnReduction = textWidth - MAXW; - + // if we have a 2-page synthetic spread, then we "trim" left and right sides by adding "eachPageColumnReduction" blank space. // if we have a single page / column, then this loss of text real estate is shared between right and left sides filler = Math.floor(eachPageColumnReduction * (isDoublePageSyntheticSpread ? 1 : 0.5)); } - // Let's check whether a narrow two-page synthetic spread (impeded reabability) can be reduced down to a single page / column: - else if (!forced && textWidth < MINW && isDoublePageSyntheticSpread) - { + // Let's check whether a narrow two-page synthetic spread (impeded reabability) can be reduced down to a single page / column: + else if (!forced && textWidth < MINW && isDoublePageSyntheticSpread) { isDoublePageSyntheticSpread = false; _paginationInfo.visibleColumnCount = 1; textWidth = availableWidth - adjustedGapLeft - adjustedGapRight; - if (textWidth > MAXW) - { + if (textWidth > MAXW) { filler = Math.floor((textWidth - MAXW) * 0.5); } } - - _$el.css({"left": (filler+adjustedGapLeft + "px"), "right": (filler+adjustedGapRight + "px")}); - + + _$el.css({ "left": (filler + adjustedGapLeft + "px"), "right": (filler + adjustedGapRight + "px") }); + updateViewportSize(); //_$contentFrame ==> _lastViewPortSize var resultingColumnWidth = _$el.width(); @@ -672,10 +667,10 @@ var ReflowableView = function(options, reader){ resultingColumnWidth = (resultingColumnWidth - _paginationInfo.columnGap) / 2; } resultingColumnWidth = Math.floor(resultingColumnWidth); - if ((resultingColumnWidth-1) > MAXW) { + if ((resultingColumnWidth - 1) > MAXW) { console.debug("resultingColumnWidth > MAXW ! " + resultingColumnWidth + " > " + MAXW); } - + _$iframe.css("width", _lastViewPortSize.width + "px"); _$iframe.css("height", _lastViewPortSize.height + "px"); @@ -710,19 +705,18 @@ var ReflowableView = function(options, reader){ _$epubHtml.css("column-fill", "auto"); - _$epubHtml.css({left: "0", right: "0", top: "0"}); + _$epubHtml.css({ left: "0", right: "0", top: "0" }); Helpers.triggerLayout(_$iframe); _paginationInfo.columnCount = ((_htmlBodyIsVerticalWritingMode ? _$epubHtml[0].scrollHeight : _$epubHtml[0].scrollWidth) + _paginationInfo.columnGap) / (_paginationInfo.columnWidth + _paginationInfo.columnGap); _paginationInfo.columnCount = Math.round(_paginationInfo.columnCount); - var totalGaps = (_paginationInfo.columnCount-1) * _paginationInfo.columnGap; + var totalGaps = (_paginationInfo.columnCount - 1) * _paginationInfo.columnGap; var colWidthCheck = ((_htmlBodyIsVerticalWritingMode ? _$epubHtml[0].scrollHeight : _$epubHtml[0].scrollWidth) - totalGaps) / _paginationInfo.columnCount; colWidthCheck = Math.round(colWidthCheck); - if (colWidthCheck > _paginationInfo.columnWidth) - { + if (colWidthCheck > _paginationInfo.columnWidth) { console.debug("ADJUST COLUMN"); console.log(_paginationInfo.columnWidth); console.log(colWidthCheck); @@ -730,13 +724,13 @@ var ReflowableView = function(options, reader){ _paginationInfo.columnWidth = colWidthCheck; } - _paginationInfo.spreadCount = Math.ceil(_paginationInfo.columnCount / _paginationInfo.visibleColumnCount); + _paginationInfo.spreadCount = Math.ceil(_paginationInfo.columnCount / _paginationInfo.visibleColumnCount); - if(_paginationInfo.currentSpreadIndex >= _paginationInfo.spreadCount) { + if (_paginationInfo.currentSpreadIndex >= _paginationInfo.spreadCount) { _paginationInfo.currentSpreadIndex = _paginationInfo.spreadCount - 1; } - if(_deferredPageRequest) { + if (_deferredPageRequest) { //if there is a request for specific page we get here openDeferredElement(); @@ -841,8 +835,18 @@ var ReflowableView = function(options, reader){ // if we set max-width/max-height to 100% columnizing engine chops images embedded in the text // (but not if we set it to 99-98%) go figure. // TODO: CSS min-w/h is content-box, not border-box (does not take into account padding + border)? => images may still overrun? - $elem.css('max-width', '98%'); - $elem.css('max-height', '98%'); + $elem.css('max-width', _$epubHtml.css("width")); + $elem.css('max-height', _$epubHtml.css("height")); + + if ($elem.attr('height') == '100%') + $elem.css('height', _$epubHtml.css("height")); + else if (!$elem.css('height')) { + $elem.css('height', 'auto'); + } + + if (!$elem.css('width')) { + $elem.css('width', 'auto'); + } if(!$elem.css('height')) { $elem.css('height', 'auto');