diff --git a/src/common/stylesheets/base/_base.scss b/src/common/stylesheets/base/_base.scss index 1abf8e32..1895ce6e 100644 --- a/src/common/stylesheets/base/_base.scss +++ b/src/common/stylesheets/base/_base.scss @@ -171,46 +171,35 @@ input[type="range"] { display: none; } - .page, .page canvas { - position: static; - padding: 0; - margin: 0; - } - - .page { - float: left; - display: none; - border: none; - box-shadow: none; - background-clip: content-box; - background-color: rgba(255, 255, 255, 1); - } - - .page[data-loaded] { - display: block; + #split-view iframe { + visibility: hidden !important; } body[data-pdfjsprinting] #printContainer { display: block; } - #printContainer { - height: 100%; - } + /* wrapper around (scaled) print canvas elements */ #printContainer > div { - position: relative; - top: 0; - left: 0; - width: 1px; - height: 1px; - overflow: visible; page-break-after: always; page-break-inside: avoid; + + /* The wrapper always cover the whole page. */ + height: 100%; + width: 100%; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } + #printContainer canvas, #printContainer img { direction: ltr; display: block; + max-width: 100%; + max-height: 100%; } } diff --git a/src/pdf/pdf-print-service.js b/src/pdf/pdf-print-service.js index f8cb7c67..03d17482 100644 --- a/src/pdf/pdf-print-service.js +++ b/src/pdf/pdf-print-service.js @@ -80,16 +80,13 @@ class PrintTask { const body = document.querySelector("body"); body.setAttribute("data-pdfjsprinting", true); - const hasEqualPageSizes = this.pagesOverview.every(function (size) { - return ( - size.width === this.pagesOverview[0].width && - size.height === this.pagesOverview[0].height - ); - }, this); + const { width, height } = this.pagesOverview[0]; + const hasEqualPageSizes = this.pagesOverview.every( + size => size.width === width && size.height === height + ); if (!hasEqualPageSizes) { console.warn( - "Not all pages have the same size. The printed " + - "result may be incorrect!" + "Not all pages have the same size. The printed result may be incorrect!" ); } @@ -99,22 +96,12 @@ class PrintTask { // TODO(robwu): Use named pages when size calculation bugs get resolved // (e.g. https://crbug.com/355116) AND when support for named pages is // added (http://www.w3.org/TR/css3-page/#using-named-pages). - // In browsers where @page + size is not supported (such as Firefox, - // https://bugzil.la/851441), the next stylesheet will be ignored and the - // user has to select the correct paper size in the UI if wanted. + // In browsers where @page + size is not supported, the next stylesheet + // will be ignored and the user has to select the correct paper size in + // the UI if wanted. this.pageStyleSheet = document.createElement("style"); - const pageSize = this.pagesOverview[0]; - this.pageStyleSheet.textContent = - // "size: " is what we need. But also add "A4" because - // Firefox incorrectly reports support for the other value. - "@supports ((size:A4) and (size:1pt 1pt)) {" + - "@page { size: " + - pageSize.width + - "pt " + - pageSize.height + - "pt;}" + - "}"; - body.appendChild(this.pageStyleSheet); + this.pageStyleSheet.textContent = `@page { size: ${width}pt ${height}pt;}`; + body.append(this.pageStyleSheet); } destroy() {