diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 4ecf8eb5f..0116cd6b1 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -8,10 +8,18 @@ function wrapFrames() { }); } -// Strip out all styling so that we have better control over layout +// Strip out color and font styling + +function stripStylesFromElement(element, propertiesToStrip) { + for (name of propertiesToStrip) { + element.style.removeProperty(name); + } +} + function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove()); - document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => element.removeAttribute("style")); + // 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"])); } // Convert all image locations to be absolute @@ -21,6 +29,52 @@ function convertImgSrc() { }); } +// Wrap tables in an overflow-x: auto; div +function wrapTables() { + var tables = document.querySelector("div.articleBody").getElementsByTagName("table"); + + for (table of tables) { + var wrapper = document.createElement("div"); + wrapper.className = "nnw-overflow"; + table.parentNode.insertBefore(wrapper, table); + wrapper.appendChild(table); + } +} + +// Remove some children (currently just spans) from pre elements to work around a strange clipping issue +var ElementUnwrapper = { + unwrapSelector: "span", + unwrapElement: function (element) { + var parent = element.parentNode; + var children = Array.from(element.childNodes); + + for (child of children) { + parent.insertBefore(child, element); + } + + parent.removeChild(element); + }, + // `elements` can be a selector string, an element, or a list of elements + unwrapAppropriateChildren: function (elements) { + if (typeof elements[Symbol.iterator] !== 'function') + elements = [elements]; + else if (typeof elements === "string") + elements = document.querySelectorAll(elements); + + for (element of elements) { + for (unwrap of element.querySelectorAll(this.unwrapSelector)) { + this.unwrapElement(unwrap); + } + + element.normalize() + } + } +}; + +function flattenPreElements() { + ElementUnwrapper.unwrapAppropriateChildren("div.articleBody td > pre"); +} + function reloadArticleImage() { var image = document.getElementById("nnwImageIcon"); image.src = "nnwImageIcon://"; @@ -37,8 +91,10 @@ function render(data, scrollY) { window.scrollTo(0, scrollY); wrapFrames() + wrapTables() stripStyles() convertImgSrc() - + flattenPreElements() + postRenderProcessing() } diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index b90edd69e..aa2163cfe 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -131,6 +131,9 @@ pre { word-break: normal; -webkit-hyphens: none; } +.nnw-overflow { + overflow-x: auto; +} code, pre { font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; font-size: 14px; @@ -221,12 +224,6 @@ img[src*="share-buttons"] { display: none !important; } -/* Site specific styles */ -.wp-smiley { - height: 1em; - max-height: 1em; -} - /* Newsfoot specific styles. Structural styles come first, theme styles second */ .newsfoot-footnote-container { position: relative;