[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]
0001-Use-object-tags-instead-of-img.patch
Description: Use <object> tags instead of <img> tags for images in HTML export
[fn:2]
Author: Nick Dokos
Created: 2014-01-09 Thu 15:06
Emacs 24.3.50.1 (Org mode 8.2.5c)
Validate
Author: Nick Dokos
Created: 2014-01-09 Thu 15:45
Emacs 24.3.50.1 (Org mode 8.2.5c)
Validate
Nick
- [O] [RFC] <img> vs <object> in HTML export,
Nick Dokos <=