Re: [O] [RFC] img vs object in HTML export
On Sat, Jan 11, 2014 at 10:21:39AM +0100, Bastien wrote: Rick Frankel r...@rickster.com writes: I thing the solution is to use an object tag for svg, but an img tag for the rest. Yes -- I'm no HTML guru, but this corresponds to what I see in most HTML pages. Change applied. You can use the html attribute ':fallback' to specify a fallback image file.e.g. #+ATTR_HTML: :width 100 :height 50 :fallback my.png [[file:my.svg]] rick
Re: [O] [RFC] img vs object in HTML export
Rick Frankel r...@rickster.com writes: On Sat, Jan 11, 2014 at 10:21:39AM +0100, Bastien wrote: Rick Frankel r...@rickster.com writes: I thing the solution is to use an object tag for svg, but an img tag for the rest. Yes -- I'm no HTML guru, but this corresponds to what I see in most HTML pages. Change applied. You can use the html attribute ':fallback' to specify a fallback image file.e.g. #+ATTR_HTML: :width 100 :height 50 :fallback my.png [[file:my.svg]] Thanks for doing this, Rick! I tested the basic functionality (i.e. what I need :-)) and it works fine for me (with Chrome/FF on Linux.) Nick
Re: [O] [RFC] img vs object in HTML export
Hello, Rick Frankel r...@rickster.com writes: On Sat, Jan 11, 2014 at 10:21:39AM +0100, Bastien wrote: Rick Frankel r...@rickster.com writes: I thing the solution is to use an object tag for svg, but an img tag for the rest. Yes -- I'm no HTML guru, but this corresponds to what I see in most HTML pages. Change applied. You can use the html attribute ':fallback' to specify a fallback image file.e.g. #+ATTR_HTML: :width 100 :height 50 :fallback my.png [[file:my.svg]] Nit-pick: As a side note, please make the first line in your docstring a complete sentence, and put two spaces between subsequent sentences. Thank you ! Regards, -- Nicolas Goaziou
Re: [O] [RFC] img vs object in HTML export
Rick Frankel r...@rickster.com writes: I thing the solution is to use an object tag for svg, but an img tag for the rest. Yes -- I'm no HTML guru, but this corresponds to what I see in most HTML pages. -- Bastien
Re: [O] [RFC] img vs object in HTML export
On 2014-01-09 16:10, Nick Dokos wrote: Exporting this to HTML produces img tags like this: , | div class=figure | pimg src=foo.svg alt=foo.svg / | /p | /div | | | div class=figure | pimg 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 | pobject data=foo.svg type=image/svg+xml /object | /p | /div | | | div class=figure | pobject data=foo.png type=image/png /object | /p | /div ` 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? BTW, I tried using object data=foo.png type=image/png/ This does not work because the close tag is required according to the spec (like a script tag). From a quick read on the interwebs, yes, it seems that object is an html4 specification. One problem with your solution, is that object does not allow an 'alt' attribute The problem w/ img src='foo.svg/ according to my reading, is that it is not officially supported, and is only incidentally supported by the browsers (but, as you can see, without svg interactivity). I thing the solution is to use an object tag for svg, but an img tag for the rest. It might also make sense to just inline the svg? see: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML for an interesting writeup on the issues. rick
Re: [O] [RFC] img vs object in HTML export
Rick Frankel r...@rickster.com writes: BTW, I tried using object data=foo.png type=image/png/ This does not work because the close tag is required according to the spec (like a script tag). Yes, I figured that that was probably the case, even though FF seemed to accept it (although I'm no longer sure what I have and have not tried...) The primary reason I considered it was because org-html-close-tag currently produces that form and I was trying to be as non-intrusive (a.k.a. lazy) as possible. From a quick read on the interwebs, yes, it seems that object is an html4 specification. One problem with your solution, is that object does not allow an 'alt' attribute I don't know if it's part of the standard or yet another hack but I found this: http://www.w3schools.com/tags/tag_object.asp in particular the Note in Tips and Notes, which seems to imply that I can do object data=foo.png type=image/pngimg src=foo.png alt=foo.png//object to accommodate browsers which don't recognize the object tag, as well as accommodating the absence of a foo.png file (or the disallowing of images). In my limited testing, that seems to work if the file is abesnt. The problem w/ img src='foo.svg/ according to my reading, is that it is not officially supported, and is only incidentally supported by the browsers (but, as you can see, without svg interactivity). I thing the solution is to use an object tag for svg, but an img tag for the rest. It might also make sense to just inline the svg? If the above form works with all browsers, I'd prefer to go with that. If it's actually part of a standard, I think it would be the perfect solution, but I'm not holding my breath about that. I have a patch (much better than the original one) that implements this. I'll post it this weekend for comments. see: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML for an interesting writeup on the issues. I found that one in my search but I was somewhat discouraged by the number of pages (167) and its age (2010) and I did not really try to read it carefully. But I've taken another look at the section you point out and it is indeed a good reference - thanks for pushing me towards it! And thanks for the comments! Nick
[O] [RFC] img vs object in HTML export
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 | pimg src=foo.svg alt=foo.svg / | /p | /div | | | div class=figure | pimg 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 | pobject data=foo.svg type=image/svg+xml /object | /p | /div | | | div class=figure | pobject 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] From 0529562b428d421f8aaf398bc604bc8d2f9498e8 Mon Sep 17 00:00:00 2001 From: Nick Dokos ndo...@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 \np%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
