From mboxrd@z Thu Jan  1 00:00:00 1970
From: Nick Dokos <ndokos@gmail.com>
Subject: [RFC] <img> vs <object> in HTML export
Date: Thu, 09 Jan 2014 16:10:53 -0500
Message-ID: <87vbxsamjm.fsf@alphaville.bos.redhat.com>
Mime-Version: 1.0
Content-Type: multipart/mixed; boundary="=-=-="
Return-path: <emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
Received: from eggs.gnu.org ([2001:4830:134:3::10]:34345)
	by lists.gnu.org with esmtp (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1W1Msk-00011Z-Ob
	for emacs-orgmode@gnu.org; Thu, 09 Jan 2014 16:11:20 -0500
Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1W1Msf-0007Wf-Ci
	for emacs-orgmode@gnu.org; Thu, 09 Jan 2014 16:11:14 -0500
Received: from plane.gmane.org ([80.91.229.3]:38518)
	by eggs.gnu.org with esmtp (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1W1Mse-0007W5-Tv
	for emacs-orgmode@gnu.org; Thu, 09 Jan 2014 16:11:09 -0500
Received: from list by plane.gmane.org with local (Exim 4.69)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1W1Msb-0008Jv-F6
	for emacs-orgmode@gnu.org; Thu, 09 Jan 2014 22:11:05 +0100
Received: from nat-pool-bos-t.redhat.com ([66.187.233.206])
	by main.gmane.org with esmtp (Gmexim 0.1 (Debian))
	id 1AlnuQ-0007hv-00
	for <emacs-orgmode@gnu.org>; Thu, 09 Jan 2014 22:11:05 +0100
Received: from ndokos by nat-pool-bos-t.redhat.com with local (Gmexim 0.1
	(Debian)) id 1AlnuQ-0007hv-00
	for <emacs-orgmode@gnu.org>; Thu, 09 Jan 2014 22:11:05 +0100
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <http://lists.gnu.org/archive/html/emacs-orgmode>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
To: emacs-orgmode@gnu.org

--=-=-=
Content-Type: text/plain

Summary
-------
I'm wondering whether it's a good idea to chnage the HTML exporter's
handling of images: my specific proposal is to use <object> tags instead
of <img> tags.

Rationale
----------
I got data to plot and I wanted to use SVG, rather than PNG,
in order to be able to resize the plots to fit whatever projection
requirements I came up against. I use gnuplot which has a nice svg
terminal that also includes some javascript functions that allow
interactive manipulation of the plot (e.g. you can click on the label
of a dataset in the legend of the plot to toggle its visibility -
that's something I really want.)

I found out that if I opened the SVG file in my browser, I could use
the interactivity features that gnuplot provides, but if I visit
the HTML page that includes all the plots, the interactivity was lost.

Googling a bit, I found out about <object> vs <img>, changed the <img>
tags to <object> tags and presto! interactivity!

Example
-------
Here is a simple example org file:

--8<---------------cut here---------------start------------->8---
* Plots


#+BEGIN_SRC gnuplot :var tbl=foo.tbl :results output :file foo.svg
set terminal svg size 1024,512 dynamic mouse standalone
set xrange [0:5]
set xlabel "x"
set yrange [0:*]
set ylabel "y"

set datafile missing " "

plot tbl using 1:2 title "squares", '' using 1:3 title "cubes", '' using 1:4 title "fourth powers"
#+END_SRC

#+BEGIN_SRC gnuplot :var tbl=foo.tbl :results output :file foo.png
set terminal png size 1024,512
set xrange [0:5]
set xlabel "x"
set yrange [0:*]
set ylabel "y"

set datafile missing " "

plot tbl using 1:2 title "squares", '' using 1:3 title "cubes", '' using 1:4 title "fourth powers"
#+END_SRC

** data												      :noexport:
#+name: foo.tbl
| 1 | 1 | 1 | 1 |
| 2 | 4 | 8 | 16 |
| 3 | 9 | 27 | 81 |
| 4 | 16 | 64 | 256 |

--8<---------------cut here---------------end--------------->8---

Exporting this to HTML produces <img> tags like this:

,----
| <div class="figure">
| <p><img src="foo.svg" alt="foo.svg" />
| </p>
| </div>
| 
| 
| <div class="figure">
| <p><img src="foo.png" alt="foo.png" />
| </p>
| </div>
`----

I attach a patch[fn:1] that changes these to <object> tags (the patch is
proof-of-concept only, not meant for integration into org core - it'll
need a fair amount of work before that happens, if it ever happens.)
With the patch, the relevant output is changed to this:

,----
| <div class="figure">
| <p><object data="foo.svg" type="image/svg+xml"> </object>
| </p>
| </div>
| 
| 
| <div class="figure">
| <p><object data="foo.png" type="image/png"> </object>
| </p>
| </div>
`----

I attach the HTML files for your amusement.[fn:2]

Open questions
--------------
Do I have this right? I'm neither an SVG nor an HTML expert. If there is
another way to do what I want, please let me know.

Do most browsers support <object> tags? Do they do the right thing with
images in <object> tags?

I tested this with Google Chrome (Version 31.0.1650.63) and Firefox
(Version 25.0), both on Linux. I have not tested any other browsers on
Linux and I have not tested *any* browsers on any other OSes. There are
probably compatibility problems which would imply that any change in org
mode would have to be made conditional on some global option
(org-html-accommodate-obsolete-browsers perhaps :-) - default would be t
to leave everything as it is currently i.e. <img> tags.)

BTW, I tried using

<object data="foo.png" type="image/png"/>

at first, but Chrome did not handle it correctly in my testing, whereas
it handles the

<object data="foo.png" type="image/png"> </object>

form correctly. I did not try the first form with FF: there was no point.

So, WDYT?

Footnotes:

[fn:1] 
--=-=-=
Content-Type: text/x-patch
Content-Disposition: attachment;
 filename=0001-Use-object-tags-instead-of-img.patch
Content-Description: Use <object> tags instead of <img> tags for images in
 HTML export

>From 0529562b428d421f8aaf398bc604bc8d2f9498e8 Mon Sep 17 00:00:00 2001
From: Nick Dokos <ndokos@redhat.com>
Date: Thu, 9 Jan 2014 15:38:28 -0500
Subject: [PATCH] Use <object> tags instead of <img>

---
 lisp/ox-html.el | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 7dbbfc8..b57c97d 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -1317,9 +1317,11 @@ CSS classes, then this prefix can be very useful."
   (let ((dt (downcase (plist-get info :html-doctype))))
 	(member dt '("html5" "xhtml5" "<!doctype html>"))))
 
-(defun org-html-close-tag (tag attr info)
+(defun org-html-close-tag (tag attr info &optional longopt)
   (concat "<" tag " " attr
-	  (if (org-html-xhtml-p info) " />" ">")))
+	  (if (not longopt)
+	      (if (org-html-xhtml-p info) " />" ">")
+	    (concat "> </" tag ">"))))
 
 (defun org-html-doctype (info)
   "Return correct html doctype tag from `org-html-doctype-alist',
@@ -1362,6 +1364,12 @@ arguments CAPTION and LABEL are given, use them for caption and
 			"\n<p>%s</p>")
 		      caption)))))
 
+(defun org-html-image-type (source info)
+  (let ((suffix (file-name-extension source)))
+    (if (string= suffix "svg")
+	"svg+xml"
+      suffix)))
+
 (defun org-html--format-image (source attributes info)
   "Return \"img\" tag with given SOURCE and ATTRIBUTES.
 SOURCE is a string specifying the location of the image.
@@ -1369,16 +1377,18 @@ ATTRIBUTES is a plist, as returned by
 `org-export-read-attribute'.  INFO is a plist used as
 a communication channel."
   (org-html-close-tag
-   "img"
+   "object"
    (org-html--make-attribute-string
     (org-combine-plists
-     (list :src source
-	   :alt (if (string-match-p "^ltxpng/" source)
-		    (org-html-encode-plain-text
-		     (org-find-text-property-in-string 'org-latex-src source))
-		  (file-name-nondirectory source)))
+     (list :data source
+	   :type (concat "image/" (org-html-image-type source info))
+	   ;; :alt (if (string-match-p "^ltxpng/" source)
+	   ;; 	    (org-html-encode-plain-text
+	   ;; 	     (org-find-text-property-in-string 'org-latex-src source))
+	   ;; 	  (file-name-nondirectory source))
+	   )
      attributes))
-   info))
+   info t))
 
 (defun org-html--textarea-block (element)
   "Transcode ELEMENT into a textarea block.
-- 
1.8.5.rc0


--=-=-=
Content-Type: text/plain


[fn:2] 
--=-=-=
Content-Type: text/html
Content-Disposition: attachment; filename=object-tags.html
Content-Description: HTML file with object tags

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>gnuplot-svg</title>
<!-- 2014-01-09 Thu 15:06 -->
<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta  name="generator" content="Org-mode" />
<meta  name="author" content="Nick Dokos" />
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
  .title  { text-align: center; }
  .todo   { font-family: monospace; color: red; }
  .done   { color: green; }
  .tag    { background-color: #eee; font-family: monospace;
            padding: 2px; font-size: 80%; font-weight: normal; }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  .right  { margin-left: auto; margin-right: 0px;  text-align: right; }
  .left   { margin-left: 0px;  margin-right: auto; text-align: left; }
  .center { margin-left: auto; margin-right: auto; text-align: center; }
  .underline { text-decoration: underline; }
  #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  p.verse { margin-left: 3%; }
  pre {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #eee;
    padding: 8pt;
    font-family: monospace;
    overflow: auto;
    margin: 1.2em;
  }
  pre.src {
    position: relative;
    overflow: visible;
    padding-top: 1.2em;
  }
  pre.src:before {
    display: none;
    position: absolute;
    background-color: white;
    top: -10px;
    right: 10px;
    padding: 3px;
    border: 1px solid black;
  }
  pre.src:hover:before { display: inline;}
  pre.src-sh:before    { content: 'sh'; }
  pre.src-bash:before  { content: 'sh'; }
  pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  pre.src-R:before     { content: 'R'; }
  pre.src-perl:before  { content: 'Perl'; }
  pre.src-java:before  { content: 'Java'; }
  pre.src-sql:before   { content: 'SQL'; }

  table { border-collapse:collapse; }
  caption.t-above { caption-side: top; }
  caption.t-bottom { caption-side: bottom; }
  td, th { vertical-align:top;  }
  th.right  { text-align: center;  }
  th.left   { text-align: center;   }
  th.center { text-align: center; }
  td.right  { text-align: right;  }
  td.left   { text-align: left;   }
  td.center { text-align: center; }
  dt { font-weight: bold; }
  .footpara:nth-child(2) { display: inline; }
  .footpara { display: block; }
  .footdef  { margin-bottom: 1em; }
  .figure { padding: 1em; }
  .figure p { text-align: center; }
  .inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
  }
  #org-div-home-and-up
   { text-align: right; font-size: 70%; white-space: nowrap; }
  textarea { overflow-x: auto; }
  .linenr { font-size: smaller }
  .code-highlighted { background-color: #ffff00; }
  .org-info-js_info-navigation { border-style: none; }
  #org-info-js_console-label
    { font-size: 10px; font-weight: bold; white-space: nowrap; }
  .org-info-js_search-highlight
    { background-color: #ffff00; color: #000000; font-weight: bold; }
  /*]]>*/-->
</style>
<script type="text/javascript">
/*
@licstart  The following is the entire license notice for the
JavaScript code in this tag.

Copyright (C) 2012-2013 Free Software Foundation, Inc.

The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version.  The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.


@licend  The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
 function CodeHighlightOn(elem, id)
 {
   var target = document.getElementById(id);
   if(null != target) {
     elem.cacheClassElem = elem.className;
     elem.cacheClassTarget = target.className;
     target.className = "code-highlighted";
     elem.className   = "code-highlighted";
   }
 }
 function CodeHighlightOff(elem, id)
 {
   var target = document.getElementById(id);
   if(elem.cacheClassElem)
     elem.className = elem.cacheClassElem;
   if(elem.cacheClassTarget)
     target.className = elem.cacheClassTarget;
 }
/*]]>*///-->
</script>
</head>
<body>
<div id="content">
<h1 class="title">gnuplot-svg</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1. SVG image</a></li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> SVG image</h2>
<div class="outline-text-2" id="text-1">

<div class="figure">
<p><object data="foo.svg" type="image/svg+xml"> </object>
</p>
</div>


<div class="figure">
<p><object data="foo.png" type="image/png"> </object>
</p>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="author">Author: Nick Dokos</p>
<p class="date">Created: 2014-01-09 Thu 15:06</p>
<p class="creator"><a href="http://www.gnu.org/software/emacs/">Emacs</a> 24.3.50.1 (<a href="http://orgmode.org">Org</a> mode 8.2.5c)</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>

--=-=-=
Content-Type: text/html
Content-Disposition: attachment; filename=img-tags.html
Content-Description: HTML file with img tags

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>gnuplot-svg</title>
<!-- 2014-01-09 Thu 15:45 -->
<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta  name="generator" content="Org-mode" />
<meta  name="author" content="Nick Dokos" />
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
  .title  { text-align: center; }
  .todo   { font-family: monospace; color: red; }
  .done   { color: green; }
  .tag    { background-color: #eee; font-family: monospace;
            padding: 2px; font-size: 80%; font-weight: normal; }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  .right  { margin-left: auto; margin-right: 0px;  text-align: right; }
  .left   { margin-left: 0px;  margin-right: auto; text-align: left; }
  .center { margin-left: auto; margin-right: auto; text-align: center; }
  .underline { text-decoration: underline; }
  #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  p.verse { margin-left: 3%; }
  pre {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #eee;
    padding: 8pt;
    font-family: monospace;
    overflow: auto;
    margin: 1.2em;
  }
  pre.src {
    position: relative;
    overflow: visible;
    padding-top: 1.2em;
  }
  pre.src:before {
    display: none;
    position: absolute;
    background-color: white;
    top: -10px;
    right: 10px;
    padding: 3px;
    border: 1px solid black;
  }
  pre.src:hover:before { display: inline;}
  pre.src-sh:before    { content: 'sh'; }
  pre.src-bash:before  { content: 'sh'; }
  pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  pre.src-R:before     { content: 'R'; }
  pre.src-perl:before  { content: 'Perl'; }
  pre.src-java:before  { content: 'Java'; }
  pre.src-sql:before   { content: 'SQL'; }

  table { border-collapse:collapse; }
  caption.t-above { caption-side: top; }
  caption.t-bottom { caption-side: bottom; }
  td, th { vertical-align:top;  }
  th.right  { text-align: center;  }
  th.left   { text-align: center;   }
  th.center { text-align: center; }
  td.right  { text-align: right;  }
  td.left   { text-align: left;   }
  td.center { text-align: center; }
  dt { font-weight: bold; }
  .footpara:nth-child(2) { display: inline; }
  .footpara { display: block; }
  .footdef  { margin-bottom: 1em; }
  .figure { padding: 1em; }
  .figure p { text-align: center; }
  .inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
  }
  #org-div-home-and-up
   { text-align: right; font-size: 70%; white-space: nowrap; }
  textarea { overflow-x: auto; }
  .linenr { font-size: smaller }
  .code-highlighted { background-color: #ffff00; }
  .org-info-js_info-navigation { border-style: none; }
  #org-info-js_console-label
    { font-size: 10px; font-weight: bold; white-space: nowrap; }
  .org-info-js_search-highlight
    { background-color: #ffff00; color: #000000; font-weight: bold; }
  /*]]>*/-->
</style>
<script type="text/javascript">
/*
@licstart  The following is the entire license notice for the
JavaScript code in this tag.

Copyright (C) 2012-2013 Free Software Foundation, Inc.

The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version.  The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.


@licend  The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
 function CodeHighlightOn(elem, id)
 {
   var target = document.getElementById(id);
   if(null != target) {
     elem.cacheClassElem = elem.className;
     elem.cacheClassTarget = target.className;
     target.className = "code-highlighted";
     elem.className   = "code-highlighted";
   }
 }
 function CodeHighlightOff(elem, id)
 {
   var target = document.getElementById(id);
   if(elem.cacheClassElem)
     elem.className = elem.cacheClassElem;
   if(elem.cacheClassTarget)
     target.className = elem.cacheClassTarget;
 }
/*]]>*///-->
</script>
</head>
<body>
<div id="content">
<h1 class="title">gnuplot-svg</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1. SVG image</a></li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> SVG image</h2>
<div class="outline-text-2" id="text-1">

<div class="figure">
<p><img src="foo.svg" alt="foo.svg" />
</p>
</div>


<div class="figure">
<p><img src="foo.png" alt="foo.png" />
</p>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="author">Author: Nick Dokos</p>
<p class="date">Created: 2014-01-09 Thu 15:45</p>
<p class="creator"><a href="http://www.gnu.org/software/emacs/">Emacs</a> 24.3.50.1 (<a href="http://orgmode.org">Org</a> mode 8.2.5c)</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>

--=-=-=
Content-Type: text/plain


Nick

--=-=-=--