Patch: default CSS class for SVG images in HTML export

Patch: default CSS class for SVG images in HTML export

[Jarmo Hurri]

[-- Attachment #1: Type: text/plain, Size: 808 bytes --]


Greetings.

The attached patch
- adds a default CSS class org-svg to SVG images embedded in exported
  HTML if no other class is set for the image using attr_html
- documents the existence of this class.

The second attachment is an org-file that can be used to verify that the
patch works as expected. I have tested that it works in Safari, Firefox
and Chrome (Chromium).

If this patch is ok, then what is missing are the default CSS settings
for the new class org-svg in constant org-html-style-default. I simply
did not know what to put there. The manual says that this constant has
basic settings for _all_ defined CSS entities. Either defaults need to
be set for the new class, or the text in the manual needs to be
changed. Or we have to accept that the manual is not logically
coherent. :-)

Jarmo


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: patch --]
[-- Type: text/x-patch, Size: 2410 bytes --]

From 087dd280932867b2820f1b87ff2535732615b920 Mon Sep 17 00:00:00 2001
From: Jarmo Hurri <jarmo.hurri@iki.fi>
Date: Mon, 25 Jul 2016 08:25:58 +0300
Subject: [PATCH] lisp/ox-html.el: Provide a default CSS class for embedded SVG
 images

* lisp/ox-html.el (org-html--svg-image): Set CSS class of embedded SVG
images to be org-svg if no other class is set in attributes.

* doc/org.texi (CSS support): Documentation of default CSS class
org-svg for SVG images embedded into exported HTML.
---
 doc/org.texi    |  1 +
 lisp/ox-html.el | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/doc/org.texi b/doc/org.texi
index 1c3868c..75f5eac 100644
--- a/doc/org.texi
+++ b/doc/org.texi
@@ -11750,6 +11750,7 @@ div.footnotes       @r{footnote section headline}
 p.footnote          @r{footnote definition paragraph, containing a footnote}
 .footref            @r{a footnote reference number (always a <sup>)}
 .footnum            @r{footnote number in footnote definition (always <sup>)}
+.org-svg            @r{default class for a linked SVG image}
 @end example
 
 @vindex org-html-style-default
diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index ce4694d..79ac7e8 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -1629,16 +1629,24 @@ a communication channel."
 
 (defun org-html--svg-image (source attributes info)
   "Return \"object\" appropriate for embedding svg file SOURCE
-with assoicated ATTRIBUTES. INFO is a plist used as a
+with associated ATTRIBUTES. INFO is a plist used as a
 communication channel.
 
 The special attribute \"fallback\" can be used to specify a fallback
-image file to use if the object embedding is not supported."
+image file to use if the object embedding is not supported.
+
+CSS class \"org-svg\" is assigned as the class of the object
+unless a different class is specified with an attribute."
   (let ((fallback (plist-get attributes :fallback))
+	(css-class (plist-get attributes :class))
 	(attrs (org-html--make-attribute-string
 		(plist-put attributes :fallback nil))))
-  (format "<object type=\"image/svg+xml\" data=\"%s\" %s>\n%s</object>"
-	  source attrs
+  (format "<object type=\"image/svg+xml\" data=\"%s\" %s %s>\n%s</object>"
+	  source
+	  attrs
+	  (if css-class
+	      ""
+	    "class=\"org-svg\"")
 	  (if fallback
 	      (org-html-close-tag
 	       "img" (format "src=\"%s\" %s" fallback attrs) info)
-- 
2.4.11


[-- Attachment #3: test file --]
[-- Type: text/plain, Size: 429 bytes --]

#+HTML_HEAD_EXTRA: <style> .org-svg { width: 20vw; } .my-svg-class { width: 30vw; } </style>

* styling with default class
  #+BEGIN_SRC asymptote :file svg-image.svg
    size (1cm, 0);
    fill (unitsquare, red);
  #+END_SRC

  #+RESULTS:
  [[file:svg-image.svg]]

* styling with class specified with attribute

  #+ATTR_HTML: :class my-svg-class
  [[file:svg-image.svg]]

* going back to default class
  [[file:svg-image.svg]]

Re: Patch: default CSS class for SVG images in HTML export

[Christian Moe]

Jarmo Hurri writes:

> If this patch is ok, then what is missing are the default CSS settings
> for the new class org-svg in constant org-html-style-default. I simply
> did not know what to put there. The manual says that this constant has
> basic settings for _all_ defined CSS entities. Either defaults need to
> be set for the new class, or the text in the manual needs to be
> changed. Or we have to accept that the manual is not logically
> coherent. :-)

Logically, no settings could be the default settings, couldn't they?
:-)

Perhaps a percentage width, maybe 80% or 90% to scale all SVGs to fit
neatly inside their container?

Yours,
Christian

Re: Patch: default CSS class for SVG images in HTML export

[Nicolas Goaziou]

Hello,

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> The attached patch
> - adds a default CSS class org-svg to SVG images embedded in exported
>   HTML if no other class is set for the image using attr_html
> - documents the existence of this class.

Thank you.

> If this patch is ok,

It looks so, barring minor issues suggested below.

> then what is missing are the default CSS settings for the new class
> org-svg in constant org-html-style-default. I simply did not know what
> to put there. The manual says that this constant has basic settings
> for _all_ defined CSS entities. Either defaults need to be set for the
> new class, or the text in the manual needs to be changed. Or we have
> to accept that the manual is not logically coherent. :-)

The Manual is the Truth!

What setting would equivalent to the current one?

> @@ -11750,6 +11750,7 @@ div.footnotes       @r{footnote section headline}
>  p.footnote          @r{footnote definition paragraph, containing a footnote}
>  .footref            @r{a footnote reference number (always a <sup>)}
>  .footnum            @r{footnote number in footnote definition (always <sup>)}
> +.org-svg            @r{default class for a linked SVG image}

The manual would use @samp{svg}, but I think @file{.svg} would be more
accurate, per (info "(texinfo @file)").

>  (defun org-html--svg-image (source attributes info)
>    "Return \"object\" appropriate for embedding svg file SOURCE
> -with assoicated ATTRIBUTES. INFO is a plist used as a
> +with associated ATTRIBUTES. INFO is a plist used as a
>  communication channel.

The docstring was incorrect before your patch; this is a good time to
fix it. In particular:

- first line must stand on its own, i.e., it must be one or more
  complete sentences;

- Sentences have to be separated with two spaces.

Could you reword it?

>  The special attribute \"fallback\" can be used to specify a fallback
> -image file to use if the object embedding is not supported."
> +image file to use if the object embedding is not supported.
> +
> +CSS class \"org-svg\" is assigned as the class of the object
> +unless a different class is specified with an attribute."
>    (let ((fallback (plist-get attributes :fallback))
> +	(css-class (plist-get attributes :class))
>  	(attrs (org-html--make-attribute-string
>  		(plist-put attributes :fallback nil))))
> -  (format "<object type=\"image/svg+xml\" data=\"%s\" %s>\n%s</object>"
> -	  source attrs
> +  (format "<object type=\"image/svg+xml\" data=\"%s\" %s %s>\n%s</object>"
> +	  source
> +	  attrs
> +	  (if css-class
> +	      ""
> +	    "class=\"org-svg\"")

This would ignore ":class nil", which probably means no class at all.

You can do instead:

  (let ((fallback (plist-get attributes :fallback))
        (attrs (org-html--make-attribute-string
                (org-combine-plists
                 ;; Remove fallback attribute, which is not meant to
                 ;; appear directly in the attributes string, and
                 ;; provide a default class if none is set.
                 '(:class "org-class") attributes '(:fallback nil)))))
    (format ...))
  

Regards,

-- 
Nicolas Goaziou

Re: Patch: default CSS class for SVG images in HTML export

[Jarmo Hurri]

[-- Attachment #1: Type: text/plain, Size: 314 bytes --]


Ok, here is trial number 2, with patch and test files. The test file
shows multiple use cases.

Just let me know if something in this still needs fixing.

Jarmo

PS. org-combine-plists is a cool function
PPS. I just amended the commit of my first trial, that's why the
     timestamp is still from this morning.


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: patch --]
[-- Type: text/x-patch, Size: 3487 bytes --]

From 0cb1fd2f3507c7d5db060ba62711896698a5f67c Mon Sep 17 00:00:00 2001
From: Jarmo Hurri <jarmo.hurri@iki.fi>
Date: Mon, 25 Jul 2016 08:25:58 +0300
Subject: [PATCH] lisp/ox-html.el: Provide a default CSS class for embedded SVG
 images

* lisp/ox-html.el (org-html--svg-image): Set CSS class of embedded SVG
images to be org-svg if no other class is set in attributes.
org-html-style-default: Provide default properties for new CSS class.

* doc/org.texi (CSS support): Documentation of default CSS class
org-svg for SVG images embedded into exported HTML.
---
 doc/org.texi    |  1 +
 lisp/ox-html.el | 31 +++++++++++++++++++------------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/doc/org.texi b/doc/org.texi
index 1c3868c..68b3c69 100644
--- a/doc/org.texi
+++ b/doc/org.texi
@@ -11750,6 +11750,7 @@ div.footnotes       @r{footnote section headline}
 p.footnote          @r{footnote definition paragraph, containing a footnote}
 .footref            @r{a footnote reference number (always a <sup>)}
 .footnum            @r{footnote number in footnote definition (always <sup>)}
+.org-svg            @r{default class for a linked @file{.svg} image}
 @end example
 
 @vindex org-html-style-default
diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index ce4694d..456a236 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -440,6 +440,7 @@ for the JavaScript code in this tag.
     { font-size: 10px; font-weight: bold; white-space: nowrap; }
   .org-info-js_search-highlight
     { background-color: #ffff00; color: #000000; font-weight: bold; }
+  .org-svg { width: 90%; }
   /*]]>*/-->
 </style>"
   "The default style specification for exported HTML files.
@@ -1628,21 +1629,27 @@ a communication channel."
      info)))
 
 (defun org-html--svg-image (source attributes info)
-  "Return \"object\" appropriate for embedding svg file SOURCE
-with assoicated ATTRIBUTES. INFO is a plist used as a
-communication channel.
+  "Return \"object\" embedding svg file SOURCE with given ATTRIBUTES. 
+INFO is a plist used as a communication channel.
 
-The special attribute \"fallback\" can be used to specify a fallback
-image file to use if the object embedding is not supported."
+The special attribute \"fallback\" can be used to specify a
+fallback image file to use if the object embedding is not
+supported.  CSS class \"org-svg\" is assigned as the class of the
+object unless a different class is specified with an attribute."
   (let ((fallback (plist-get attributes :fallback))
 	(attrs (org-html--make-attribute-string
-		(plist-put attributes :fallback nil))))
-  (format "<object type=\"image/svg+xml\" data=\"%s\" %s>\n%s</object>"
-	  source attrs
-	  (if fallback
-	      (org-html-close-tag
-	       "img" (format "src=\"%s\" %s" fallback attrs) info)
-	    "Sorry, your browser does not support SVG."))))
+		(org-combine-plists
+                 ;; Remove fallback attribute, which is not meant to
+                 ;; appear directly in the attributes string, and
+                 ;; provide a default class if none is set.
+                 '(:class "org-svg") attributes '(:fallback nil)))))
+    (format "<object type=\"image/svg+xml\" data=\"%s\" %s>\n%s</object>"
+	    source
+	    attrs
+	    (if fallback
+		(org-html-close-tag
+		 "img" (format "src=\"%s\" %s" fallback attrs) info)
+	      "Sorry, your browser does not support SVG."))))
 
 (defun org-html--textarea-block (element)
   "Transcode ELEMENT into a textarea block.
-- 
2.4.11


[-- Attachment #3: test --]
[-- Type: text/plain, Size: 495 bytes --]

#+HTML_HEAD_EXTRA: <style> .my-svg-class { width: 30vw; } </style>

* styling with default class
  #+BEGIN_SRC asymptote :file svg-image.svg
    size (1cm, 0);
    fill (unitsquare, red);
  #+END_SRC

  #+RESULTS:
  [[file:svg-image.svg]]

* styling with class specified with attribute

  #+ATTR_HTML: :class my-svg-class
  [[file:svg-image.svg]]

* going back to default class
  [[file:svg-image.svg]]
* case where class id nil (no CSS class)
  #+ATTR_HTML: :class nil
  [[file:svg-image.svg]]

Re: Patch: default CSS class for SVG images in HTML export

[Nicolas Goaziou]

Hello,

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> Ok, here is trial number 2, with patch and test files. The test file
> shows multiple use cases.
>
> Just let me know if something in this still needs fixing.

It looks great. Thank you.

Would you mind providing an entry in ORG-NEWS for that change? It can go
in Version 9.0 > New features > Export. No need for a commit
message for this.


Regards,

-- 
Nicolas Goaziou

Re: Patch: default CSS class for SVG images in HTML export

[Jarmo Hurri]

[-- Attachment #1: Type: text/plain, Size: 240 bytes --]

Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:

> Would you mind providing an entry in ORG-NEWS for that change? It can
> go in Version 9.0 > New features > Export. No need for a commit
> message for this.

Please see attachment.

Jarmo


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: patch --]
[-- Type: text/x-patch, Size: 961 bytes --]

From 843f67d1fbed5a70e1b18de6dc25ee694694ebc5 Mon Sep 17 00:00:00 2001
From: Jarmo Hurri <jarmo.hurri@iki.fi>
Date: Tue, 26 Jul 2016 10:36:10 +0300
Subject: [PATCH]

---
 etc/ORG-NEWS | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/etc/ORG-NEWS b/etc/ORG-NEWS
index 391e282..12db376 100644
--- a/etc/ORG-NEWS
+++ b/etc/ORG-NEWS
@@ -208,6 +208,11 @@ point for the SRC/EXAMPLE block.
 With the global variable ~org-latex-images-centered~ or the local
 attribute ~:center~ it is now possible to center an image in LaTeX
 export.
+**** Default CSS class ~org-svg~ for SVG images in HTML export
+SVG images exported in HTML are now by default assigned a CSS class
+~org-svg~ if no CSS class is specified with the ~:class~ attribute. By
+default, the CSS styling of class ~org-svg~ specifies an image width
+of 90\thinsp{}% of the container the image.
 *** Babel
 **** Support for SLY in Lisp blocks
 See ~org-babel-lisp-eval-fn~ to activate it.
-- 
2.4.11

Re: Patch: default CSS class for SVG images in HTML export

[Nicolas Goaziou]

Hello,

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> Please see attachment.

Applied. Thank you!


Regards,

-- 
Nicolas Goaziou