Browser viewer: Allow the user to specify a CSS style sheet to control the look and feel of the text

src/pyj/read_book/prefs/main.pyj

@@ -8,6 +8,7 @@ from elementmaker import E
 from book_list.item_list import build_list, create_item
 from read_book.prefs.colors import create_colors_panel, commit_colors
 from read_book.prefs.layout import create_layout_panel, commit_layout
+from read_book.prefs.user_stylesheet import create_user_stylesheet_panel, commit_user_stylesheet
 
 
 class Prefs:
@@ -58,8 +59,9 @@ class Prefs:
         c = E.div()
         container.appendChild(c)
         build_list(c, [
-            create_item(_('Colors'), def():self.show_panel('colors');, _('Change the colors of the page and text')),
+            create_item(_('Colors'), def():self.show_panel('colors');, _('Colors of the page and text')),
-            create_item(_('Page layout'), def():self.show_panel('layout');, _('Change the page margins and number of pages per screen')),
+            create_item(_('Page layout'), def():self.show_panel('layout');, _('Page margins and number of pages per screen')),
+            create_item(_('User style sheet'), def():self.show_panel('user_stylesheet');, _('Style rules for text')),
         ])
 
     def display_colors(self, container):
@@ -76,5 +78,13 @@ class Prefs:
     def close_layout(self):
         commit_layout(self.onchange, self.container)
 
+    def display_user_stylesheet(self, container):
+        document.getElementById(self.title_id).textContent = _('User style sheet')
+        create_user_stylesheet_panel(container)
+
+    def close_user_stylesheet(self):
+        commit_user_stylesheet(self.onchange, self.container)
+
+
 def create_prefs_panel(container, close_func, on_change):
     Prefs(container, close_func, on_change)

src/pyj/read_book/prefs/user_stylesheet.pyj

@@ -0,0 +1,45 @@
+# vim:fileencoding=utf-8
+# License: GPL v3 Copyright: 2016, Kovid Goyal <kovid at kovidgoyal.net>
+from __python__ import hash_literals, bound_methods
+
+from gettext import gettext as _
+from dom import add_extra_css, build_rule, unique_id
+from book_list.globals import get_session_data
+from elementmaker import E
+
+CONTAINER = unique_id('reader-us-prefs')
+
+add_extra_css(def():
+    sel = '#' + CONTAINER
+    style = ''
+    style += build_rule(sel, display="flex", flex_direction="column")
+    style += build_rule(sel + ' textarea', margin_left='1em', margin_right='1em', min_height='75vh')
+    style += build_rule(sel + ' .simple-link', color='blue')
+    return style
+)
+
+def create_user_stylesheet_panel(container):
+    container.appendChild(E.div(id=CONTAINER))
+    container = container.lastChild
+    sd = get_session_data()
+    container.appendChild(E.div(style='margin:1ex 1rem; padding: 1ex 0'))
+    container.firstChild.innerHTML = _(
+        'A CSS style sheet that can be used to control the look and feel of books. For examples, click'
+        ' <a class="{cls}" href="{url}" target="{target}" title="Examples of user style sheets">here</a>.'
+    ).format(url='https://www.mobileread.com/forums/showthread.php?t=51500', target="_blank", cls="simple-link")
+    container.appendChild(E.textarea(style="flex-grow: 10"))
+    val = sd.get('user_stylesheet')
+    if val:
+        container.lastChild.value = val
+
+develop = create_user_stylesheet_panel
+
+
+def commit_user_stylesheet(onchange, container):
+    sd = get_session_data()
+    ta = document.getElementById(CONTAINER).querySelector('textarea')
+    val = ta.value or ''
+    old = sd.get('user_stylesheet')
+    if old is not val:
+        sd.set('user_stylesheet', val)
+        onchange()