diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 413906197..0b42889bd 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -18,10 +18,27 @@ function stripStylesFromElement(element, propertiesToStrip) { } } +// Strip inline styles that could harm readability. function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove()); // Removing "background" and "font" will also remove properties that would be reflected in them, e.g., "background-color" and "font-family" - document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height"])); + document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"])); +} + +// Constrain the height of iframes whose heights are defined relative to the document body to be at most +// 50% of the viewport width. +function constrainBodyRelativeIframes() { + let iframes = document.getElementsByTagName("iframe"); + + for (iframe of iframes) { + if (iframe.offsetParent === document.body) { + let heightAttribute = iframe.style.height; + + if (/%|vw|vh$/i.test(heightAttribute)) { + iframe.classList.add("nnw-constrained"); + } + } + } } // Convert all Feedbin proxy images to be used as src, otherwise change image locations to be absolute if not already @@ -29,7 +46,7 @@ function convertImgSrc() { document.querySelectorAll("img").forEach(element => { if (element.hasAttribute("data-canonical-src")) { element.src = element.getAttribute("data-canonical-src") - } else if (!element.src.match(/^[a-z]+\:\/\//i)) { + } else if (!/^[a-z]+\:\/\//i.test(element.src)) { element.src = new URL(element.src, document.baseURI).href; } }); @@ -136,6 +153,7 @@ function processPage() { wrapTables(); inlineVideos(); stripStyles(); + constrainBodyRelativeIframes(); convertImgSrc(); flattenPreElements(); styleLocalFootnotes(); diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css index 0c5705eda..fa2a5920d 100644 --- a/Shared/Article Rendering/shared.css +++ b/Shared/Article Rendering/shared.css @@ -204,6 +204,10 @@ iframe { margin: 0 auto; } +iframe.nnw-constrained { + max-height: 50vw; +} + figure { margin-bottom: 1em; margin-top: 1em;