Hi, following this tutorial https://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html I am trying to export some sample.org file to html, and have the images floated to the right, with no success however. to that end ATTR_HTML is used in the tutorial and in my sample.org: ----- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #+ATTR_HTML: style="float:right;" [[./img/org-mode-unicorn.png]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #+ATTR_HTML: style="float:right;" [[./img/org-mode-unicorn.png]] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. ----- but no matter how I export this sample.org snippet, the html attributes (ATTR_HTML) are ignored. - below is an emacs bash script that I use for the export (making my results reproducible hopefully). all I get is the plain html image tags, no style attributes: --- .... <p> <img src="./img/org-mode-unicorn.png" alt="org-mode-unicorn.png"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> <img src="./img/org-mode-unicorn.png" alt="org-mode-unicorn.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. </p> ... --- I have no idea why these attributes are ignored, or how to make them appear: - attr_html seems a fairly standard mechanism, and works for everybody but me ?, cf eg. https://linevi.ch/en/org-link-extra-attrs.html - I have tried with different export options, but of course there are endless possibilies / combinations, and I have no clue here. I have tried to keep my export script below simple, but have kept a few lines as comments (or not) to more easily experiment with different export setting, like (setq org-html-head-include-default-style nil) (setq org-html-head-include-scripts nil) (setq org-html-doctype "html5") (setq org-html-html-fancy t) ;; (setq org-html-htmlize-output-type 'css) with no impact for the export of my html attributes however. - maybe the org mode syntax / behaviour has changed ? - however I have tried both: - org version 9.1.9 - as comes with my debian elpa-org package - and org version 8.2.10 - as comes with my emacs 25.2.2 on debian buster. I can can choose either one be commenting / uncommenting the first few lines in my export script below ---- (let ((package-dir (car (file-expand-wildcards (concat "/usr/share/" ;; emacs25 (symbol-name debian-emacs-flavor) "/site-lisp/elpa/org-*"))) )) (when (file-directory-p package-dir) (add-to-list 'load-path package-dir) (add-to-list 'auto-mode-alist '("\\.org\\(-mode\\)?\\'" . org-mode)) ) ) ---- ie. I try to load from "/usr/share/emacs25/site-lisp/elpa/org-*" if not commented out. the script will respond by printing either org mode version: org version 8.2.10 org version 9.1.9 - I *can* have extra style config added at the beginning of my export with ---- #+html_head: <style type="text/css"> #+html_head:<!--/*--><![CDATA[/*><!--*/ #+html_head: img { float:right; } #+html_head: /*]]>*/--> #+html_head: </style> ---- but in general don't want *all* my images floated to the right: I want to be able to assign attributes to individual images: one image floated to the right, say, another one to the left. and of course I may want to assign other attributes (besides float) as well. OK, thanks in advance. Find my export script below, and call with $ ./exporthtml.el sample.org sample.html or $ ./exporthtml.el sample.org that way either org-html-export-as-html or org-html-export-to-html gets used. -Andreas exporthtml.el ----- :;exec /usr/bin/env emacs -batch -Q -l "$0" -f main "$@" (let ((package-dir (car (file-expand-wildcards (concat "/usr/share/" ;; emacs25 (symbol-name debian-emacs-flavor) "/site-lisp/elpa/org-*"))) )) (when (file-directory-p package-dir) (add-to-list 'load-path package-dir) (add-to-list 'auto-mode-alist '("\\.org\\(-mode\\)?\\'" . org-mode)) ) ) (require 'cl) (toggle-debug-on-error) ;; (require 'cask "~/cfg/emacs/cask/cask.el") ;; (cask-initialize) (defun main () (interactive) (destructuring-bind (org-file &optional outfile) command-line-args-left (progn (setq make-backup-files nil) (require 'org) (require 'ox-html) (message "org version %s" (org-version)) (when (file-exists-p org-file) (process-org-file org-file outfile) ) ) ) ) (defun process-org-file (orgfile &optional outfile) (interactive) (progn ;; (defvar my-extra-head "<link rel='stylesheet' type='text/css' href='mytheme.css'/>") ;; (setq org-html-head-extra my-extra-head) (setq org-html-head-include-default-style nil) (setq org-html-head-include-scripts nil) (setq org-html-doctype "html5") (setq org-html-html-fancy t) ;; (setq org-html-htmlize-output-type 'css) ;; (setq org-html-htmlize-font-prefix "org-") (if (eq nil outfile) (progn (message "no outfile given") (find-file org-file) (org-html-export-to-html) ) (progn (message "outfile is %s" outfile) (find-file org-file) (org-html-export-as-html) (write-file outfile) ) ) ) )
adding to my own mail: I have progressed since: I can add style attributes if I start them with a colon (:style) and then don't use quotes (not: :style "float: right;" ) this sample.org thus works for me: ----- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #+attr_html: :style float: right; border: 1px solid brown; [[./imgs/org-mode-unicorn.png]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #+attr_html: :style float: left ; border: 1px solid brown; [[./imgs/org-mode-unicorn.png]] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. ----- Leaving out the double quotes may be comfortable, but I am not sure if this was a good idea: makes it difficult to see which parts belong to the style, and where the alt attribute starts: #+attr_html: :style float: right; border: 1px solid brown; :alt foo this would have been easier to read I think #+attr_html: :style "float: right; border: 1px solid brown;" :alt "foo" Anyway, in the example above: if I remove the newlines, like so: ----- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #+attr_html: :style float: right; border: 1px solid brown; [[./imgs/org-mode-unicorn.png]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #+attr_html: :style float: left ; border: 1px solid brown; [[./imgs/org-mode-unicorn.png]] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. ----- then I get brown boxes around the paragraphs as well, the style is applied to the image and the paragraph, why is that? rendered by org mode: -- <p style="float: right; border: 1px solid brown;"> <img src="./imgs/org-mode-unicorn.png" style="float: right; border: 1px solid brown;" /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum ... -- All I want is: images floated to the right/left, and text that flows around these images. Or: text that appears to flow around the images (even though technically the img tags are not children of a paragraph (p) tag). The situation gets more difficult / confusing if I try to add captions to the images -- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #+caption: the famous unicorn #+attr_html: :style float: right; [[./imgs/org-mode-unicorn.png]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #+caption: another one #+attr_html: :style float: left; [[./imgs/org-mode-unicorn.png]] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. --- First observation: the rendered output does not use the html5 figure, figcaption tags -even though I have requested (setq org-html-html-fancy t) instead: some div with class figure, and likewise span with class figure (cf below), OK, fine with me, can live with that. but more importantly: I would have expected the whole image+caption to be floated to the left/right, but njet: the image is floated to the right, but the caption text is on the left: ----- <div class="figure"> <p><img src="./imgs/org-mode-unicorn.png" alt="org-mode-unicorn.png" style="float: right;" /> </p> <p><span class="figure-number">Figure 1: </span>the famous unicorn</p> </div> ... ----- Now that gets in my way. Am I missing something? And hm: not sure how to say this properly: org mode is very nice, it has a thousand bells and whistles that I don't need, but of course I understand that people have different tastes/needs. But writing some paragraphs with left/right floated images is essential to me, and has not been and smooth/easy experience so far, as explained in detail above (how do I get image+caption floated to the right eg.?) Thanks. -Andreas
Hello,
Andreas Reuleaux <rx@a-rx.info> writes:
> following this tutorial
>
> https://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html
>
> I am trying to export some sample.org file to html, and have the images
> floated to the right, with no success however.
>
> to that end ATTR_HTML is used in the tutorial and in my sample.org:
> -----
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> aliquip ex ea commodo consequat.
> #+ATTR_HTML: style="float:right;"
> [[./img/org-mode-unicorn.png]]
I think the correct syntax is
#+ATTR_HTML: :style float:right;
The tutorial is probably outdated.
Regards,
--
Nicolas Goaziou
Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:
> I think the correct syntax is
>
> #+ATTR_HTML: :style float:right;
>
> The tutorial is probably outdated.
>
>
> Regards,
Thanks a lot, and yes: I found that out myself already in the meantime.
I had sent another mail to the mailing list is this regard, which hasn't
made it to the list yet (not sure why it's taking that long, but I am in
contact with Bastien already).
Thanks,
Andreas
Hi Andreas,
Andreas Reuleaux <rx@a-rx.info> writes:
> Leaving out the double quotes may be comfortable, but I am not
> sure if this was a good idea: makes it difficult to see which
> parts belong to the style, and where the alt attribute starts:
>
> #+attr_html: :style float: right; border: 1px solid brown; :alt
> foo
> this would have been easier to read I think
>
> #+attr_html: :style "float: right; border: 1px solid brown;"
> :alt "foo"
This would be a good place to use a CSS class.
In your CSS file (or between <style> tags that you put in the HTML
header), you can write something like this:
.right { float: right; border: 1px solid brown; }
And then for the individual right-floated images, you can write:
#+ATTR_HTML: :class right :alt foo
Using :class here is both more readable and more maintainable:
there's just one place to update your style code if you want to
change how the right-floated images display.
Hope that helps!
--
Best,
Richard
Ah, yes, you are right, thanks. Have used class before,
but start out with style usually when experimenting.
Thanks,
Andreas
Richard Lawrence <richard.lawrence@berkeley.edu> writes:
> Hi Andreas,
>
> Andreas Reuleaux <rx@a-rx.info> writes:
>
>> Leaving out the double quotes may be comfortable, but I am not sure
>> if this was a good idea: makes it difficult to see which parts
>> belong to the style, and where the alt attribute starts:
>>
>> #+attr_html: :style float: right; border: 1px solid brown; :alt
>> foo this would have been easier to read I think
>>
>> #+attr_html: :style "float: right; border: 1px solid brown;"
>> :alt "foo"
>
> This would be a good place to use a CSS class.
>
> In your CSS file (or between <style> tags that you put in the HTML
> header), you can write something like this:
>
> .right { float: right; border: 1px solid brown; }
>
> And then for the individual right-floated images, you can write:
>
> #+ATTR_HTML: :class right :alt foo
>
> Using :class here is both more readable and more maintainable: there's
> just one place to update your style code if you want to change how the
> right-floated images display.
>
> Hope that helps!
Hi Andreas and Nicolas,
Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:
> #+ATTR_HTML: :style float:right;
>
> The tutorial is probably outdated.
FWIW I've update the tutorial on Worg, thanks for reporting this.
--
Bastien