emacs-orgmode
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[O] [RFC] <img> vs <object> in HTML export


From: Nick Dokos
Subject: [O] [RFC] <img> vs <object> in HTML export
Date: Thu, 09 Jan 2014 16:10:53 -0500
User-agent: Gnus/5.13 (Gnus v5.13) Emacs/24.3.50 (gnu/linux)

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] 

Attachment: 0001-Use-object-tags-instead-of-img.patch
Description: Use <object> tags instead of <img> tags for images in HTML export

[fn:2] 

gnuplot-svg

Table of Contents

1 SVG image

Author: Nick Dokos

Created: 2014-01-09 Thu 15:06

Emacs 24.3.50.1 (Org mode 8.2.5c)

Validate

gnuplot-svg

Table of Contents

1 SVG image

foo.svg

foo.png

Author: Nick Dokos

Created: 2014-01-09 Thu 15:45

Emacs 24.3.50.1 (Org mode 8.2.5c)

Validate

Nick

reply via email to

[Prev in Thread] Current Thread [Next in Thread]