Merge branch 'ios-candidate' of https://github.com/brentsimmons/NetNewsWire into ios-candidate

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()
 }

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;