Re: [O] 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