From mboxrd@z Thu Jan 1 00:00:00 1970 From: Andreas Reuleaux Subject: Re: aligning images, html attributes ignored when exporting to html (longish, sorry) Date: Sat, 21 Apr 2018 22:13:56 +0100 Message-ID: <87vackuusr.fsf@a-rx.info> References: <87muxwvbf9.fsf@a-rx.info> Mime-Version: 1.0 Content-Type: text/plain Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:53141) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1fAeqN-00079n-6L for emacs-orgmode@gnu.org; Mon, 23 Apr 2018 13:01:41 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1fAeqJ-0004ha-Dw for emacs-orgmode@gnu.org; Mon, 23 Apr 2018 13:01:35 -0400 Received: from sender-of-o51.zoho.com ([135.84.80.216]:21113) by eggs.gnu.org with esmtps (TLS1.0:RSA_AES_256_CBC_SHA1:32) (Exim 4.71) (envelope-from ) id 1fAeqJ-0004fF-3m for emacs-orgmode@gnu.org; Mon, 23 Apr 2018 13:01:31 -0400 Received: from rx by dell with local (Exim 4.90_1) (envelope-from ) id 1f9zpU-0005iN-AS for emacs-orgmode@gnu.org; Sat, 21 Apr 2018 22:13:56 +0100 List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: "Emacs-orgmode" To: emacs-orgmode@gnu.org 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: --

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: -----

org-mode-unicorn.png

Figure 1: the famous unicorn

... ----- 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