Subject: bug#47705: [PATCH] EWW: Customize display of images

From: Ralph Schleicher <[email-masked]>
Date: Tue, 13 Apr 2021 23:06:24 +0200

Hi Lars,

I have thought about it again and maybe we should approach the topic
from another side.  Images are inline elements and so, first of all,
there is no reason why the renderer should insert line breaks at all.
The decision whether an image shall be displayed as an inline element
or as a block element is actually made by the creator of the web page.
The renderer should only follow the instructions.  That means, if an
image is intermixed with text, or if multiple images are placed on a
single line, we should assume that there must be a reason and SHR
shouldn't try to be too smart.

After all, the user should be able to take the final decision.  Thus,
I've added an eww-toggle-inline-images command.  I checked the result
with, e.g. www.gnu.org, www.gnu.org/software/emacs, docs.gtk.org/gtk4,
and www.lispworks.com/documentation/HyperSpec/Front -- it looks good.

Maybe you reconsider adding the patch.  Thank you.

diff --git a/doc/misc/eww.texi b/doc/misc/eww.texi
index cc546a92d6..9500624859 100644
--- a/doc/misc/eww.texi
+++ b/doc/misc/eww.texi
@@ -143,6 +143,13 @@ Basics
 toggles whether to display images or not.  This also sets the
 @code{shr-inhibit-images} variable.
 
+@findex eww-toggle-inline-images
+@vindex shr-inline-images
+@cindex Image Display
+  The command @code{eww-toggle-inline-images} toggles whether to
+display images as inline elements or not.  This also sets the
+@code{shr-inline-images} variable.
+
 @findex eww-download
 @vindex eww-download-directory
 @kindex d
@@ -314,9 +321,12 @@ Advanced
 specific images completely by customizing @code{shr-blocked-images}.
 
 @vindex shr-inhibit-images
+@vindex shr-inline-images
   You can control image display by customizing
 @code{shr-inhibit-images}.  If this variable is @code{nil}, display
-the ``ALT'' text of images instead.
+the ``ALT'' text of images instead.  By definition, images are inline
+elements.  However, if the variable @code{shr-inline-images} is
+@code{nil}, images are displayed on a separate line.
 
 @vindex shr-color-visible-distance-min
 @vindex shr-color-visible-luminance-min
diff --git a/lisp/net/eww.el b/lisp/net/eww.el
index eec3ec7ba8..e6046bf145 100644
--- a/lisp/net/eww.el
+++ b/lisp/net/eww.el
@@ -1017,6 +1017,7 @@ eww-mode-map
 	["Toggle fonts" eww-toggle-fonts t]
 	["Toggle colors" eww-toggle-colors t]
 	["Toggle images" eww-toggle-images t]
+	["Toggle inline images" eww-toggle-inline-images t]
         ["Character Encoding" eww-set-character-encoding]
         ["Toggle Paragraph Direction" eww-toggle-paragraph-direction]))
     map))
@@ -1903,6 +1904,14 @@ eww-toggle-images
   (message "Images are now %s"
            (if shr-inhibit-images "off" "on")))
 
+(defun eww-toggle-inline-images ()
+  "Toggle whether or not to display images as inline elements."
+  (interactive nil eww-mode)
+  (setq shr-inline-images (not shr-inline-images))
+  (eww-reload)
+  (message "Inline images are now %s"
+           (if shr-inline-images "on" "off")))
+
 ;;; Bookmarks code
 
 (defvar eww-bookmarks nil)
diff --git a/lisp/net/shr.el b/lisp/net/shr.el
index cbdeb65ba8..673c4787a3 100644
--- a/lisp/net/shr.el
+++ b/lisp/net/shr.el
@@ -188,6 +188,11 @@ shr-inhibit-images
   :version "28.1"
   :type 'boolean)
 
+(defcustom shr-inline-images t
+  "If non-nil, render images as inline elements."
+  :version "28.1"
+  :type 'boolean)
+
 (defvar shr-external-rendering-functions nil
   "Alist of tag/function pairs used to alter how shr renders certain tags.
 For instance, eww uses this to alter rendering of title, forms
@@ -672,7 +677,9 @@ shr--translate-insertion-chars
 
 (defun shr-insert (text)
   (when (and (not (bolp))
-	     (get-text-property (1- (point)) 'image-url))
+	     (get-text-property (1- (point)) 'image-url)
+             (not shr-inhibit-images)
+             (not shr-inline-images))
     (insert "\n"))
   (cond
    ((eq shr-folding-mode 'none)
@@ -1147,7 +1154,8 @@ shr-put-image
 	  ;; When inserting big-ish pictures, put them at the
 	  ;; beginning of the line.
 	  (when (and (> (current-column) 0)
-		     (> (car (image-size image t)) 400))
+		     (> (car (image-size image t)) 400)
+                     (not shr-inline-images))
 	    (insert "\n"))
 	  (if (eq size 'original)
 	      (insert-sliced-image image (or alt "*") nil 20 1)
@@ -1662,7 +1670,9 @@ shr-tag-img
 	    (and dom
 		 (or (> (length (dom-attr dom 'src)) 0)
                      (> (length (dom-attr dom 'srcset)) 0))))
-    (when (> (current-column) 0)
+    (when (and (> (current-column) 0)
+               (not shr-inhibit-images)
+               (not shr-inline-images))
       (insert "\n"))
     (let ((alt (dom-attr dom 'alt))
           (width (shr-string-number (dom-attr dom 'width)))

-- 
Ralph