diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 78e01f8f0..0116cd6b1 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -29,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://"; @@ -45,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 b8f43e914..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;