emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Jarmo Hurri <jarmo.hurri@iki.fi>
To: emacs-orgmode@gnu.org
Subject: Re: Patch: default CSS class for SVG images in HTML export
Date: Mon, 25 Jul 2016 21:34:06 +0300	[thread overview]
Message-ID: <87fuqxo9cx.fsf@iki.fi> (raw)
In-Reply-To: 87eg6ivz0u.fsf@saiph.selenimh

[-- 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]]

  reply	other threads:[~2016-07-25 18:34 UTC|newest]

Thread overview: 7+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
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 [this message]
2016-07-25 20:36     ` Nicolas Goaziou
2016-07-26  8:21       ` Jarmo Hurri
2016-07-26  8:39         ` Nicolas Goaziou

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=87fuqxo9cx.fsf@iki.fi \
    --to=jarmo.hurri@iki.fi \
    --cc=emacs-orgmode@gnu.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
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).