aligning images, html attributes ignored when exporting to html (longish, sorry)

aligning images, html attributes ignored when exporting to html (longish, sorry)

[Andreas Reuleaux]

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)

	)
      )

    
    )
  )

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Andreas Reuleaux]

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

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Nicolas Goaziou]

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

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Andreas Reuleaux]

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

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Richard Lawrence]

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

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Andreas Reuleaux]

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!

Re: aligning images, html attributes ignored when exporting to html (longish, sorry)

[Bastien]

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