* Patch: default CSS class for SVG images in HTML export
@ 2016-07-25 5:48 Jarmo Hurri
2016-07-25 9:28 ` Christian Moe
2016-07-25 9:37 ` Nicolas Goaziou
0 siblings, 2 replies; 7+ messages in thread
From: Jarmo Hurri @ 2016-07-25 5:48 UTC (permalink / raw)
To: emacs-orgmode
[-- 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]]
^ permalink raw reply related [flat|nested] 7+ messages in thread* Re: Patch: default CSS class for SVG images in HTML export
2016-07-25 5:48 Patch: default CSS class for SVG images in HTML export Jarmo Hurri
@ 2016-07-25 9:28 ` Christian Moe
2016-07-25 9:37 ` Nicolas Goaziou
1 sibling, 0 replies; 7+ messages in thread
From: Christian Moe @ 2016-07-25 9:28 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
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
^ permalink raw reply [flat|nested] 7+ messages in thread
* Re: Patch: default CSS class for SVG images in HTML export
2016-07-25 5:48 Patch: default CSS class for SVG images in HTML export Jarmo Hurri
2016-07-25 9:28 ` Christian Moe
@ 2016-07-25 9:37 ` Nicolas Goaziou
2016-07-25 18:34 ` Jarmo Hurri
1 sibling, 1 reply; 7+ messages in thread
From: Nicolas Goaziou @ 2016-07-25 9:37 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
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
^ permalink raw reply [flat|nested] 7+ messages in thread* Re: Patch: default CSS class for SVG images in HTML export
2016-07-25 9:37 ` Nicolas Goaziou
@ 2016-07-25 18:34 ` Jarmo Hurri
2016-07-25 20:36 ` Nicolas Goaziou
0 siblings, 1 reply; 7+ messages in thread
From: Jarmo Hurri @ 2016-07-25 18:34 UTC (permalink / raw)
To: emacs-orgmode
[-- 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]]
^ permalink raw reply related [flat|nested] 7+ messages in thread* Re: Patch: default CSS class for SVG images in HTML export
2016-07-25 18:34 ` Jarmo Hurri
@ 2016-07-25 20:36 ` Nicolas Goaziou
2016-07-26 8:21 ` Jarmo Hurri
0 siblings, 1 reply; 7+ messages in thread
From: Nicolas Goaziou @ 2016-07-25 20:36 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
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
^ permalink raw reply [flat|nested] 7+ messages in thread
end of thread, other threads:[~2016-07-26 8:39 UTC | newest]
Thread overview: 7+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2016-07-25 5:48 Patch: default CSS class for SVG images in HTML export Jarmo Hurri
2016-07-25 9:28 ` Christian Moe
2016-07-25 9:37 ` Nicolas Goaziou
2016-07-25 18:34 ` Jarmo Hurri
2016-07-25 20:36 ` Nicolas Goaziou
2016-07-26 8:21 ` Jarmo Hurri
2016-07-26 8:39 ` Nicolas Goaziou
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).