GNOME.org
 

[epiphany] First pass at improving reader mode styling

commit 301ac60608d063063d14e12994ecc52da6043471
Author: Adrian Perez de Castro <aperez igalia com>
Date:   Fri Jul 20 00:16:57 2018 +0200

    First pass at improving reader mode styling
    
    The following fonts are used for reader mode:
    
    - Merriweather (both the serif and sans variants) for text and titles.
    - Adobe Source Pro for monospaced/preformatted text content.
    
    A copy of the fonts is included and used as Web fonts. The CSS rules
    are designed to match locally installed copies first, thus avoiding
    the need for WebKit to fetch them from the bundled resources when
    available in the system. The fonts are distributed under the terms of
    the SIL OFL license.
    
    On addition to the existing styling, a dark variant is provided as
    well. Chosing the colorscheme is achieved by setting the "light" or
    "dark" class in the <body> element. Whether to use the serif or
    sans-serif font variant is chosen similarly using the "sans" and
    "serif" CSS classes.
    
    This adds two settings as well in a new org.gnome.Epiphany.reader
    scheme, which for now can be set using external tools like dconf Editor
    or the gsettings command line tools:
    
    - font-style: Chooses between sans-serif and serif font.
    - color-scheme: Chooses between light or dark background.
    
    For the moment the settings are read only when reader mode is activated.

 data/org.gnome.epiphany.gschema.xml                |  13 ++
 embed/ephy-web-view.c                              |  30 ++-
 lib/ephy-prefs.h                                   |  16 ++
 lib/ephy-settings.h                                |   1 +
 lib/meson.build                                    |   1 +
 src/resources/epiphany.gresource.xml               |  12 ++
 src/resources/fonts/Merriweather-Bold.ttf          | Bin 0 -> 115116 bytes
 src/resources/fonts/Merriweather-BoldItalic.ttf    | Bin 0 -> 117040 bytes
 src/resources/fonts/Merriweather-Italic.ttf        | Bin 0 -> 116780 bytes
 src/resources/fonts/Merriweather-Regular.ttf       | Bin 0 -> 115636 bytes
 src/resources/fonts/MerriweatherSans-Bold.ttf      | Bin 0 -> 62316 bytes
 .../fonts/MerriweatherSans-BoldItalic.ttf          | Bin 0 -> 60352 bytes
 src/resources/fonts/MerriweatherSans-Italic.ttf    | Bin 0 -> 59920 bytes
 src/resources/fonts/MerriweatherSans-Regular.ttf   | Bin 0 -> 60880 bytes
 src/resources/fonts/SourceCodePro-Bold.ttf         | Bin 0 -> 211716 bytes
 src/resources/fonts/SourceCodePro-BoldIt.ttf       | Bin 0 -> 174372 bytes
 src/resources/fonts/SourceCodePro-It.ttf           | Bin 0 -> 180472 bytes
 src/resources/fonts/SourceCodePro-Regular.ttf      | Bin 0 -> 212880 bytes
 src/resources/reader.css                           | 219 ++++++++++++++++++++-
 19 files changed, 287 insertions(+), 5 deletions(-)
---
diff --git a/data/org.gnome.epiphany.gschema.xml b/data/org.gnome.epiphany.gschema.xml
index 2855145ba..3e8af4305 100644
--- a/data/org.gnome.epiphany.gschema.xml
+++ b/data/org.gnome.epiphany.gschema.xml
@@ -7,6 +7,7 @@
                <child schema="org.gnome.Epiphany.lockdown" name="lockdown"/>
                <child schema="org.gnome.Epiphany.permissions" name="permissions"/>
                <child schema="org.gnome.Epiphany.sync" name="sync"/>
+               <child schema="org.gnome.Epiphany.reader" name="reader"/>
                <key type="b" name="enable-caret-browsing">
                        <default>false</default>
                        <summary>Browse with caret</summary>
@@ -118,6 +119,18 @@
                        <description>Controls when the tabs bar is shown. Possible values are “always” (the 
tabs bar is always shown), “more-than-one” (the tabs bar is only shown if there’s two or more tabs) and 
“never” (the tabs bar is never shown).</description>
                </key>
        </schema>
+       <schema path="/org/gnome/epiphany/reader/" id="org.gnome.Epiphany.reader">
+               <key name="font-style" enum="org.gnome.Epiphany.EphyPrefsReaderFontStyle">
+                       <default>'sans'</default>
+                       <summary>Reader mode article font style.</summary>
+                       <description>Chooses the style of the main body text for articles in reader mode. 
Possible values are “sans” and “serif”.</description>
+               </key>
+               <key name="color-scheme" enum="org.gnome.Epiphany.EphyPrefsReaderColorScheme">
+                       <default>'light'</default>
+                       <summary>Reader mode color scheme.</summary>
+                       <description>Selects the style of colors for articles displayed in reader mode. 
Possible values are “light” (dark text on light background) and “dark” (light text on dark 
background).</description>
+               </key>
+       </schema>
        <schema id="org.gnome.Epiphany.web">
                <key type="i" name="min-font-size">
                        <default>0</default>
diff --git a/embed/ephy-web-view.c b/embed/ephy-web-view.c
index c61075487..3283e9fdf 100644
--- a/embed/ephy-web-view.c
+++ b/embed/ephy-web-view.c
@@ -3631,6 +3631,24 @@ ephy_web_view_set_visit_type (EphyWebView *view, EphyHistoryPageVisitType visit_
 }
 
 
+static const char *
+enum_nick (GType enum_type,
+           int   value)
+{
+    GEnumClass *enum_class;
+    const GEnumValue *enum_value;
+    const char *nick = NULL;
+
+    enum_class = g_type_class_ref (enum_type);
+    enum_value = g_enum_get_value (enum_class, value);
+    if (enum_value)
+        nick = enum_value->value_nick;
+
+    g_type_class_unref (enum_class);
+    return nick;
+}
+
+
 /**
  * ephy_web_view_toggle_reader_mode:
  * @view: an #EphyWebView
@@ -3646,6 +3664,8 @@ ephy_web_view_toggle_reader_mode (EphyWebView *view,
   GString *html;
   GBytes *style_css;
   const gchar *title;
+  const gchar *font_style;
+  const gchar *color_scheme;
 
   if (view->reader_active == active)
     return;
@@ -3666,9 +3686,15 @@ ephy_web_view_toggle_reader_mode (EphyWebView *view,
   html = g_string_new ("");
   style_css = g_resources_lookup_data ("/org/gnome/epiphany/reader.css", G_RESOURCE_LOOKUP_FLAGS_NONE, NULL);
   title = webkit_web_view_get_title (web_view);
+  font_style = enum_nick (EPHY_TYPE_PREFS_READER_FONT_STYLE,
+                          g_settings_get_enum (EPHY_SETTINGS_READER,
+                                               EPHY_PREFS_READER_FONT_STYLE));
+  color_scheme = enum_nick (EPHY_TYPE_PREFS_READER_COLOR_SCHEME,
+                            g_settings_get_enum (EPHY_SETTINGS_READER,
+                                                 EPHY_PREFS_READER_COLOR_SCHEME));
   g_string_append_printf (html, "<style>%s</style>"
                                 "<title>%s</title>"
-                                "<body>"
+                                "<body class='%s %s'>"
                                 "<article>"
                                 "<h2>"
                                 "%s"
@@ -3679,6 +3705,8 @@ ephy_web_view_toggle_reader_mode (EphyWebView *view,
                                 "<hr>",
                                 (gchar *)g_bytes_get_data (style_css, NULL),
                                 title,
+                                font_style,
+                                color_scheme,
                                 title,
                                 view->reader_byline != NULL ? view->reader_byline : "");
   g_string_append (html, view->reader_content);
diff --git a/lib/ephy-prefs.h b/lib/ephy-prefs.h
index ebf3a7447..0dad6b131 100644
--- a/lib/ephy-prefs.h
+++ b/lib/ephy-prefs.h
@@ -31,6 +31,18 @@ typedef enum
   EPHY_PREFS_UI_TABS_BAR_POSITION_RIGHT
 } EphyPrefsUITabsBarPosition;
 
+typedef enum
+{
+  EPHY_PREFS_READER_FONT_STYLE_SANS,
+  EPHY_PREFS_READER_FONT_STYLE_SERIF,
+} EphyPrefsReaderFontStyle;
+
+typedef enum
+{
+  EPHY_PREFS_READER_COLORS_LIGHT,
+  EPHY_PREFS_READER_COLORS_DARK,
+} EphyPrefsReaderColorScheme;
+
 typedef enum
 {
   EPHY_PREFS_RESTORE_SESSION_POLICY_ALWAYS,
@@ -63,6 +75,10 @@ typedef enum
 #define EPHY_PREFS_UI_TABS_BAR_POSITION          "tabs-bar-position"
 #define EPHY_PREFS_UI_TABS_BAR_VISIBILITY_POLICY "tabs-bar-visibility-policy"
 
+#define EPHY_PREFS_READER_SCHEMA                 "org.gnome.Epiphany.reader"
+#define EPHY_PREFS_READER_FONT_STYLE             "font-style"
+#define EPHY_PREFS_READER_COLOR_SCHEME           "color-scheme"
+
 #define EPHY_PREFS_STATE_SCHEMA                 "org.gnome.Epiphany.state"
 #define EPHY_PREFS_STATE_DOWNLOAD_DIR           "download-dir"
 #define EPHY_PREFS_STATE_RECENT_ENCODINGS       "recent-encodings"
diff --git a/lib/ephy-settings.h b/lib/ephy-settings.h
index 2988fbabb..48ed7fcc2 100644
--- a/lib/ephy-settings.h
+++ b/lib/ephy-settings.h
@@ -34,6 +34,7 @@ G_BEGIN_DECLS
 #define EPHY_SETTINGS_STATE     ephy_settings_get (EPHY_PREFS_STATE_SCHEMA)
 #define EPHY_SETTINGS_SYNC      ephy_settings_get (EPHY_PREFS_SYNC_SCHEMA)
 #define EPHY_SETTINGS_WEB_APP   ephy_settings_get (EPHY_PREFS_WEB_APP_SCHEMA)
+#define EPHY_SETTINGS_READER    ephy_settings_get (EPHY_PREFS_READER_SCHEMA)
 
 GSettings *ephy_settings_get (const char *schema);
 
diff --git a/lib/meson.build b/lib/meson.build
index c5056676c..5b2affa49 100644
--- a/lib/meson.build
+++ b/lib/meson.build
@@ -1,4 +1,5 @@
 types_headers = [
+  'ephy-prefs.h',
   'ephy-security-levels.h',
   'ephy-sqlite-connection.h',
   'history/ephy-history-types.h'
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index b9b12e28d..ea68beee2 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -34,6 +34,18 @@
     <file preprocess="xml-stripblanks" compressed="true">gtk/webapp-additional-urls-dialog.ui</file>
     <file compressed="true">readability.js</file>
     <file compressed="true">reader.css</file>
+    <file compressed="true">fonts/Merriweather-Regular.ttf</file>
+    <file compressed="true">fonts/Merriweather-Bold.ttf</file>
+    <file compressed="true">fonts/Merriweather-Italic.ttf</file>
+    <file compressed="true">fonts/Merriweather-BoldItalic.ttf</file>
+    <file compressed="true">fonts/MerriweatherSans-Regular.ttf</file>
+    <file compressed="true">fonts/MerriweatherSans-Bold.ttf</file>
+    <file compressed="true">fonts/MerriweatherSans-Italic.ttf</file>
+    <file compressed="true">fonts/MerriweatherSans-BoldItalic.ttf</file>
+    <file compressed="true">fonts/SourceCodePro-Regular.ttf</file>
+    <file compressed="true">fonts/SourceCodePro-Bold.ttf</file>
+    <file compressed="true">fonts/SourceCodePro-It.ttf</file>
+    <file compressed="true">fonts/SourceCodePro-BoldIt.ttf</file>
   </gresource>
   <gresource prefix="/org/gnome/Epiphany/icons">
     <file compressed="true" 
alias="scalable/actions/ephy-bookmarks-symbolic.svg">ephy-bookmarks-symbolic.svg</file>
diff --git a/src/resources/fonts/Merriweather-Bold.ttf b/src/resources/fonts/Merriweather-Bold.ttf
new file mode 100644
index 000000000..e6e8e1bfe
Binary files /dev/null and b/src/resources/fonts/Merriweather-Bold.ttf differ
diff --git a/src/resources/fonts/Merriweather-BoldItalic.ttf b/src/resources/fonts/Merriweather-BoldItalic.ttf
new file mode 100644
index 000000000..b402e1218
Binary files /dev/null and b/src/resources/fonts/Merriweather-BoldItalic.ttf differ
diff --git a/src/resources/fonts/Merriweather-Italic.ttf b/src/resources/fonts/Merriweather-Italic.ttf
new file mode 100644
index 000000000..ed2001f80
Binary files /dev/null and b/src/resources/fonts/Merriweather-Italic.ttf differ
diff --git a/src/resources/fonts/Merriweather-Regular.ttf b/src/resources/fonts/Merriweather-Regular.ttf
new file mode 100644
index 000000000..15e7c9960
Binary files /dev/null and b/src/resources/fonts/Merriweather-Regular.ttf differ
diff --git a/src/resources/fonts/MerriweatherSans-Bold.ttf b/src/resources/fonts/MerriweatherSans-Bold.ttf
new file mode 100644
index 000000000..2a914ad4e
Binary files /dev/null and b/src/resources/fonts/MerriweatherSans-Bold.ttf differ
diff --git a/src/resources/fonts/MerriweatherSans-BoldItalic.ttf 
b/src/resources/fonts/MerriweatherSans-BoldItalic.ttf
new file mode 100644
index 000000000..20bdac901
Binary files /dev/null and b/src/resources/fonts/MerriweatherSans-BoldItalic.ttf differ
diff --git a/src/resources/fonts/MerriweatherSans-Italic.ttf b/src/resources/fonts/MerriweatherSans-Italic.ttf
new file mode 100644
index 000000000..79a985c1b
Binary files /dev/null and b/src/resources/fonts/MerriweatherSans-Italic.ttf differ
diff --git a/src/resources/fonts/MerriweatherSans-Regular.ttf 
b/src/resources/fonts/MerriweatherSans-Regular.ttf
new file mode 100644
index 000000000..6670b91d0
Binary files /dev/null and b/src/resources/fonts/MerriweatherSans-Regular.ttf differ
diff --git a/src/resources/fonts/SourceCodePro-Bold.ttf b/src/resources/fonts/SourceCodePro-Bold.ttf
new file mode 100644
index 000000000..5a5be2fd4
Binary files /dev/null and b/src/resources/fonts/SourceCodePro-Bold.ttf differ
diff --git a/src/resources/fonts/SourceCodePro-BoldIt.ttf b/src/resources/fonts/SourceCodePro-BoldIt.ttf
new file mode 100644
index 000000000..0b6d2122e
Binary files /dev/null and b/src/resources/fonts/SourceCodePro-BoldIt.ttf differ
diff --git a/src/resources/fonts/SourceCodePro-It.ttf b/src/resources/fonts/SourceCodePro-It.ttf
new file mode 100644
index 000000000..437cbe16d
Binary files /dev/null and b/src/resources/fonts/SourceCodePro-It.ttf differ
diff --git a/src/resources/fonts/SourceCodePro-Regular.ttf b/src/resources/fonts/SourceCodePro-Regular.ttf
new file mode 100644
index 000000000..c58300335
Binary files /dev/null and b/src/resources/fonts/SourceCodePro-Regular.ttf differ
diff --git a/src/resources/reader.css b/src/resources/reader.css
index 878e66070..81d54bf6f 100644
--- a/src/resources/reader.css
+++ b/src/resources/reader.css
@@ -24,12 +24,225 @@
  * - append FeedView css selectors
  *
  * - Adjusted for Epiphany (Removing footer)
+ *
+ * Notes:
+ *
+ * - WCAG 2.0 level AA recommends at least 4.5 for normal text, 3 for large
+ *   text. See: https://marijohannessen.github.io/color-contrast-checker/
+ *
+ * - The @font-face rules try to use locally installed copies of the fonts,
+ *   and fallback to the bundled versions. As per W3C recommendation, the
+ *   rules include both full font names and PostScript names to assure
+ *   proper matching across platforms and installed font formats. See:
+ *   https://www.w3.org/TR/css-fonts-3/#font-face-rule
  */
 
+@font-face {
+  font-family: ephy-reader-serif;
+  src: local('Merriweather'),
+       local('Merriweather-Regular'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/Merriweather-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-serif;
+  src: local('Merriweather Italic'),
+       local('Merriweather-Italic'),
+       local('Merriweather-It'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/Merriweather-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-serif;
+  src: local('Merriweather Bold'),
+       local('Merriweather-Bold'),
+       local('Merriweather-Bd'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/Merriweather-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-serif;
+  src: local('Merriweather Bold Italic'),
+       local('Merriweather-BoldItalic'),
+       local('Merriweather-BoldIt'),
+       local('Merriweather-BdItalic'),
+       local('Merriweather-BdIt'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/Merriweather-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-sans;
+  src: local('Merriweather Sans'),
+       local('MerriweatherSans-Regular'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/MerriweatherSans-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-sans;
+  src: local('Merriweather Sans Italic'),
+       local('MerriweatherSans-Italic'),
+       local('MerriweatherSans-It'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/MerriweatherSans-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-sans;
+  src: local('Merriweather Sans Bold'),
+       local('MerriweatherSans-Bold'),
+       local('MerriweatherSans-Bd'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/MerriweatherSans-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-sans;
+  src: local('Merriweather Sans Bold Italic'),
+       local('MerriweatherSans-BoldItalic'),
+       local('MerriweatherSans-BoldIt'),
+       local('MerriweatherSans-BdItalic'),
+       local('MerriweatherSans-BdIt'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/MerriweatherSans-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-mono;
+  src: local('Source Code Pro'),
+       local('SourceCodePro-Regular'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/SourceCodePro-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-mono;
+  src: local('Source Code Pro Italic'),
+       local('SourceCodePro-Italic'),
+       local('SourceCodePro-It'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/SourceCodePro-It.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-mono;
+  src: local('Source Code Pro Bold'),
+       local('SourceCodePro-Bold'),
+       local('SourceCodePro-Bd'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/SourceCodePro-Regular.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: ephy-reader-mono;
+  src: local('Source Code Pro Bold Italic'),
+       local('SourceCodePro-BoldItalic'),
+       local('SourceCodePro-BoldIt'),
+       local('SourceCodePro-BdItalic'),
+       local('SourceCodePro-BdIt'),
+       url('ephy-resource:///org/gnome/epiphany/fonts/SourceCodePro-Regular.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: block;
+}
+
+
+body.sans,
+body.sans * {
+  font-family: ephy-reader-sans, sans-serif;
+}
+
+body.serif,
+body.serif * {
+  font-family: ephy-reader-serif, serif;
+}
+
+* {
+  line-height: 165%;
+  text-rendering: optimizeLegibility;
+}
+
+body.light {
+  /* Contrast ratio: 10.49 */
+  color: #333333;
+  background: #efefee;
+}
+
+body.dark {
+  color: #efefef;
+  background: #181818;
+}
+
 h1,
 h2,
-h3 {
+h3,
+h4,
+h5,
+h6 {
+  /* Contrast ratio: 4.77 */
   font-weight: bold;
+  color: #555555;
+  font-family: ephy-reader-serif, serif;
+}
+
+body.serif h1,
+body.serif h2,
+body.serif h3,
+body.serif h4,
+body.serif h5,
+body.serif h6 {
+  font-family: ephy-reader-sans, sans-serif;
+}
+
+
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4,
+body.dark h5,
+body.dark h6 {
+  color: #999999;
+}
+
+
+tt,
+code,
+pre {
+  font-family: ephy-reader-mono, monospace;
+}
+
+hr {
+  border: 1px solid #efefef;
+}
+
+picture img {
+  border-radius: 3px;
 }
 
 h1 {
@@ -129,8 +342,6 @@ article {
   overflow-y: hidden;
   margin: 20px auto;
   width: 640px;
-  color: #333;
-  font-family: Sans;
   font-size: 18px;
-  word-wrap:break-word;
+  word-wrap: break-word;
 }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]