diff --git a/mobile/android/themes/core/aboutReader.css b/mobile/android/themes/core/aboutReader.css index bc7d5ba364ea..5d74bacd1cb6 100644 --- a/mobile/android/themes/core/aboutReader.css +++ b/mobile/android/themes/core/aboutReader.css @@ -197,18 +197,17 @@ body { .content p > a:only-child > img:only-child, .content .wp-caption img, .content figure img { - max-width: none !important; - height: auto !important; - display: block !important; - margin-top: 0px !important; - margin-bottom: 32px !important; + display: block; + margin-left: auto; + margin-right: auto; } -/* If image is place inside one of these blocks - there's no need to add margin at the bottom */ -.content .wp-caption img, -.content figure img { - margin-bottom: 0px !important; +/* Account for body padding to make image full width */ +.content img[moz-reader-full-width] { + width: calc(100% + 40px); + margin-left: -20px; + margin-right: -20px; + max-width: none !important; } /* Image caption text */ diff --git a/toolkit/components/reader/AboutReader.jsm b/toolkit/components/reader/AboutReader.jsm index 2615f78b5587..55b0baa6d893 100644 --- a/toolkit/components/reader/AboutReader.jsm +++ b/toolkit/components/reader/AboutReader.jsm @@ -618,39 +618,29 @@ AboutReader.prototype = { _updateImageMargins: function Reader_updateImageMargins() { let windowWidth = this._win.innerWidth; - let contentWidth = this._contentElement.offsetWidth; - let maxWidthStyle = windowWidth + "px !important"; + let bodyWidth = this._doc.body.clientWidth; let setImageMargins = function(img) { - if (!img._originalWidth) - img._originalWidth = img.offsetWidth; + // If the image is at least as wide as the window, make it fill edge-to-edge on mobile. + if (img.naturalWidth >= windowWidth) { + img.setAttribute("moz-reader-full-width", true); + } else { + img.removeAttribute("moz-reader-full-width"); + } - let imgWidth = img._originalWidth; - - // If the image is taking more than half of the screen, just make - // it fill edge-to-edge. - if (imgWidth < contentWidth && imgWidth > windowWidth * 0.55) - imgWidth = windowWidth; - - let sideMargin = Math.max((contentWidth - windowWidth) / 2, - (contentWidth - imgWidth) / 2); - - let imageStyle = sideMargin + "px !important"; - let widthStyle = imgWidth + "px !important"; - - let cssText = "max-width: " + maxWidthStyle + ";" + - "width: " + widthStyle + ";" + - "margin-left: " + imageStyle + ";" + - "margin-right: " + imageStyle + ";"; - - img.style.cssText = cssText; + // If the image is at least half as wide as the body, center it on desktop. + if (img.naturalWidth >= bodyWidth/2) { + img.setAttribute("moz-reader-center", true); + } else { + img.removeAttribute("moz-reader-center"); + } } let imgs = this._doc.querySelectorAll(this._BLOCK_IMAGES_SELECTOR); for (let i = imgs.length; --i >= 0;) { let img = imgs[i]; - if (img.width > 0) { + if (img.naturalWidth > 0) { setImageMargins(img); } else { img.onload = function() { diff --git a/toolkit/themes/windows/global/aboutReader.css b/toolkit/themes/windows/global/aboutReader.css index 27393b2ec0d8..aea90e683c3c 100644 --- a/toolkit/themes/windows/global/aboutReader.css +++ b/toolkit/themes/windows/global/aboutReader.css @@ -171,19 +171,27 @@ body { } .content p, -.content img, .content code, .content pre, .content blockquote, .content ul, .content ol, -.content li { +.content li, +.content figure, +.content .wp-caption { margin: 0 0 30px 0; } -.content .wp-caption, -.content figure { - margin: 0 30px 30px 30px; +.content p > img:only-child, +.content p > a:only-child > img:only-child, +.content .wp-caption img, +.content figure img { + display: block; +} + +.content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; } .content .caption,