Adding More Tag Rendering Functions for SHR in Emacs

Adding More Default Styles of Browsers

As I’ve been using Emacs ^🔍, I’m favoring the Emacs Web Wowser (EWW ^🔍). The rendering logic uses the Simple HTML Renderer (SHR ^🔍) package.
Both EWW and SHR are part of the core Emacs distribution).

I like the experience of reading blogs via a text-based browser.
I also like eschewing
Cascading Stylesheet ^🔍 and
Javascript ^🔍 from websites.

However, as I was writing a new blog post, and previewing it with EWW, I noticed that some of the HTML tags I use didn’t render as I would’ve thought. I spent some time reading through the SHR source code to get clearer sense of defaults.

I then took inspiration from some of the other rendering functions for my favorite Emacs Web Wowser. These options align with many of the default user agent style sheets.

Each browser has a default stylesheet. You can find an excellent list at Jens Oliver Meiert’s User Agent Style Sheets: Basics and Samples.

I use the following tags throughout Take on Rules:

• dfn
• cite
• q
• small
• time

And the base SHR does not have corresponding shr-tag- functions for them.

Here Is the Code for the Tags

;; Inspired from shr-tag-em
(defun shr-tag-dfn (dom)
  (shr-fontize-dom dom 'italic))

;; Inspired from shr-tag-em
(defun shr-tag-cite (dom)
  (shr-fontize-dom dom 'italic))

;; Inspired from shr-tag-a
(defun shr-tag-q (dom)
  (shr-insert "“")
  (shr-generic dom)
  (shr-insert "”"))

;; Drawing inspiration from shr-tag-h1
(defun shr-tag-small (dom)
  (shr-fontize-dom
   dom (if shr-use-fonts '(variable-pitch (:height 0.8)))))

;; Drawing inspiration from shr-tag-abbr
(defun shr-tag-time (dom)
  (when-let* ((datetime (or
                         (dom-attr dom 'title)
                         (dom-attr dom 'datetime)))
          (start (point)))
    (shr-generic dom)
    (shr-add-font start (point) 'shr-abbreviation)
    (add-text-properties
     start (point)
     (list
      'help-echo datetime
      'mouse-face 'highlight))))

Conclusion and Next Steps

I added the above functions to my init.el file; These little tweaks improve my already fantastic EWW browsing experience.

I was also thinking it would be nice if I could get Imenu to render the headings of HTML pages. But that’s something for another time.