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.
parent a0236b15
......@@ -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>
......
......@@ -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);
......
......@@ -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"
......
......@@ -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);
......
types_headers = [
'ephy-prefs.h',
'ephy-security-levels.h',
'ephy-sqlite-connection.h',
'history/ephy-history-types.h'
......
......@@ -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>
......
......@@ -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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment