Bug 1399616 - add emoji styling to reader mode, r?johannh
MozReview-Commit-ID: DHYjxva76Lb
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -522,8 +522,21 @@ body.dark > .container > .content blockq
/* Hide elements with common "hidden" class names */
.moz-reader-content .visually-hidden,
.moz-reader-content .visuallyhidden,
.moz-reader-content .hidden,
.moz-reader-content .invisible,
.moz-reader-content .sr-only {
display: none;
}
+
+/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width,
+ * see bug 1399616 for context. */
+.moz-reader-content img.wp-smiley,
+.moz-reader-content img.emoji {
+ display: inline-block;
+ border-width: 0;
+ /* height: auto is implied from `.moz-reader-content *` rule. */
+ width: 1em;
+ margin: 0 .07em;
+ padding: 0;
+}
+
--- a/toolkit/components/reader/ReaderMode.jsm
+++ b/toolkit/components/reader/ReaderMode.jsm
@@ -15,23 +15,25 @@ const PARSE_SUCCESS = 0;
const PARSE_ERROR_TOO_MANY_ELEMENTS = 1;
const PARSE_ERROR_WORKER = 2;
const PARSE_ERROR_NO_ARTICLE = 3;
// Class names to preserve in the readerized output. We preserve these class
// names so that rules in aboutReader.css can match them.
const CLASSES_TO_PRESERVE = [
"caption",
+ "emoji",
"hidden",
"invisble",
"sr-only",
"visually-hidden",
"visuallyhidden",
"wp-caption",
"wp-caption-text",
+ "wp-smiley",
];
ChromeUtils.import("resource://gre/modules/Services.jsm");
ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
XPCOMUtils.defineLazyGlobalGetters(this, ["XMLHttpRequest", "XMLSerializer"]);
ChromeUtils.defineModuleGetter(this, "CommonUtils", "resource://services-common/utils.js");
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -744,8 +744,20 @@ body:not(.loaded) .toolbar:-moz-locale-d
border-width: 0;
}
/* Hide elements with common "hidden" class names */
.moz-reader-content .hidden,
.moz-reader-content .invisible {
display: none;
}
+
+/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width,
+ * see bug 1399616 for context. */
+.moz-reader-content img.wp-smiley,
+.moz-reader-content img.emoji {
+ display: inline-block;
+ border-width: 0;
+ /* height: auto is implied from `.moz-reader-content *` rule. */
+ width: 1em;
+ margin: 0 .07em;
+ padding: 0;
+}