extra paragraph in image export?

extra paragraph in image export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 855 bytes --]

with org-html-html5-fancy is non-nil, images are exported with something
like this code:

<figure>
<p><img src="https://imgs.xkcd.com/comics/proof_2x.png" alt="proof_2x.png"
class="fragment (appear) visible current-fragment"
data-fragment-index="0"></p>
</figure>


At least in ox-reveal, this makes it quite difficult to address images
separately from text (e.g., to set the text-align property appropriately.
You can try this if you have ox-reveal installed with any simple image:
----------
* Test
[[https://imgs.xkcd.com/comics/proof_2x.png]]

--------
At least on my machine, the image won't be centered in the resultant slide,
and it will be hard to construct CSS to fix the issue.

Is there a strong reason to include the <p> tag? I've removed it from
org-html--wrap-image and haven't noticed any ill effects so far, but
haven't done much testing.

[-- Attachment #2: Type: text/html, Size: 1197 bytes --]

Re: extra paragraph in image export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 1301 bytes --]

On Sat, Jan 21, 2017 at 11:26 AM, Matt Price <moptop99@gmail.com> wrote:

> with org-html-html5-fancy is non-nil, images are exported with something
> like this code:
>
> <figure>
> <p><img src="https://imgs.xkcd.com/comics/proof_2x.png"
> alt="proof_2x.png" class="fragment (appear) visible current-fragment"
> data-fragment-index="0"></p>
> </figure>
>
> There is some cruft in here -- I hastily copied from `inspect element`
instead of from the code itself, and also included some ox-reveal-specific
markup.  This is a more representative output:
<figure>
<p><img src="https://imgs.xkcd.com/comics/proof_2x.png"
alt="proof_2x.png"></p>
</figure>

The following's still true:

>
> At least in ox-reveal, this makes it quite difficult to address images
> separately from text (e.g., to set the text-align property appropriately).
> You can try this if you have ox-reveal installed with any simple image:
> ----------
> * Test
> [[https://imgs.xkcd.com/comics/proof_2x.png]]
>
> --------
> At least on my machine, the image won't be centered in the resultant
> slide, and it will be hard to construct CSS to fix the issue.
>
> Is there a strong reason to include the <p> tag? I've removed it from
> org-html--wrap-image and haven't noticed any ill effects so far, but
> haven't done much testing.
>
>

[-- Attachment #2: Type: text/html, Size: 2337 bytes --]

Re: extra paragraph in image export?

[Nicolas Goaziou]

Hello,

Matt Price <moptop99@gmail.com> writes:

> with org-html-html5-fancy is non-nil, images are exported with something
> like this code:
>
> <figure>
> <p><img src="https://imgs.xkcd.com/comics/proof_2x.png" alt="proof_2x.png"
> class="fragment (appear) visible current-fragment"
> data-fragment-index="0"></p>
> </figure>
>
>
> At least in ox-reveal, this makes it quite difficult to address images
> separately from text (e.g., to set the text-align property appropriately.
> You can try this if you have ox-reveal installed with any simple image:
> ----------
> * Test
> [[https://imgs.xkcd.com/comics/proof_2x.png]]
>
> --------
> At least on my machine, the image won't be centered in the resultant slide,
> and it will be hard to construct CSS to fix the issue.
>
> Is there a strong reason to include the <p> tag? I've removed it from
> org-html--wrap-image and haven't noticed any ill effects so far, but
> haven't done much testing.

I'm not well-versed enough in HTML to answer this, but, from Org POV,
there should be a difference between

  A paragraph

  #+caption: foo
  [[block-image.png]]

  Another paragraph


and

  A paragraph with an [[inline-image.png]] and some text following.

Would removing the <p> tag blur the difference between the two examples
above ?


Regards,

-- 
Nicolas Goaziou

Re: extra paragraph in image export?

[Rasmus]

Hi,

>> with org-html-html5-fancy is non-nil, images are exported with something
>> like this code:
>>
>> <figure>
>> <p><img src="https://imgs.xkcd.com/comics/proof_2x.png" alt="proof_2x.png"
>> class="fragment (appear) visible current-fragment"
>> data-fragment-index="0"></p>
>> </figure>

I'm not an expert of HTML either.  However, the "p" tag inside the
"figure" is uncommon looking a bit on the example usages online.  Thus, I
agree with Matt that it should probably not be there.

> I'm not well-versed enough in HTML to answer this, but, from Org POV,
> there should be a difference between
>
>   A paragraph
>
>   #+caption: foo
>   [[block-image.png]]
>
>   Another paragraph
>
>
> and
>
>   A paragraph with an [[inline-image.png]] and some text following.
>
> Would removing the <p> tag blur the difference between the two examples
> above ?

(I hope I understand your concern correctly).

AFAIK, the CSS selector still differs so on the output side they are not
alike.  I.e. the former is "figure>img" the other is a "p>img".  Aside: If
anything, removing the "p" tag inside the figure would make it easier to
handle images.

Rasmus

-- 
Vote for proprietary math!

Re: extra paragraph in image export?

[Nicolas Goaziou]

[-- Attachment #1: Type: text/plain, Size: 567 bytes --]

Hello,

Rasmus <rasmus@gmx.us> writes:

> I'm not an expert of HTML either.  However, the "p" tag inside the
> "figure" is uncommon looking a bit on the example usages online.  Thus, I
> agree with Matt that it should probably not be there.

OK.

> AFAIK, the CSS selector still differs so on the output side they are not
> alike.  I.e. the former is "figure>img" the other is a "p>img".  Aside: If
> anything, removing the "p" tag inside the figure would make it easier to
> handle images.

So would the following patch fix the issue?

Regards,

-- 
Nicolas Goaziou

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-ox-html-Remove-p-tag-around-block-images-when-using-.patch --]
[-- Type: text/x-diff, Size: 971 bytes --]

From 49ebd5a8406bdee0c0a94b83f7135d94e35bb6ba Mon Sep 17 00:00:00 2001
From: Nicolas Goaziou <mail@nicolasgoaziou.fr>
Date: Tue, 24 Jan 2017 22:22:47 +0100
Subject: [PATCH] ox-html: Remove <p> tag around block images when using HTML5

* lisp/ox-html.el (org-html--wrap-image): Do not add a spurious <p>
  tag when using <figure> to mark images.
---
 lisp/ox-html.el | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index d3c1b2eb1..fa8476a05 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -1607,7 +1607,7 @@ arguments CAPTION and LABEL are given, use them for caption and
 	    ;; ID.
 	    (if (org-string-nw-p label) (format " id=\"%s\"" label) "")
 	    ;; Contents.
-	    (format "\n<p>%s</p>" contents)
+	    (if html5-fancy contents (format "\n<p>%s</p>" contents))
 	    ;; Caption.
 	    (if (not (org-string-nw-p caption)) ""
 	      (format (if html5-fancy "\n<figcaption>%s</figcaption>"
-- 
2.11.0

Re: extra paragraph in image export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 687 bytes --]

On Tue, Jan 24, 2017 at 4:27 PM, Nicolas Goaziou <mail@nicolasgoaziou.fr>
wrote:

> Hello,
>
> Rasmus <rasmus@gmx.us> writes:
>
> > I'm not an expert of HTML either.  However, the "p" tag inside the
> > "figure" is uncommon looking a bit on the example usages online.  Thus, I
> > agree with Matt that it should probably not be there.
>
> OK.
>
> > AFAIK, the CSS selector still differs so on the output side they are not
> > alike.  I.e. the former is "figure>img" the other is a "p>img".  Aside:
> If
> > anything, removing the "p" tag inside the figure would make it easier to
> > handle images.
>
> So would the following patch fix the issue?
>
> Regards,
>
> --
> Nicolas Goaziou
>

[-- Attachment #2: Type: text/html, Size: 1283 bytes --]

Re: extra paragraph in image export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 869 bytes --]

On Tue, Jan 24, 2017 at 4:27 PM, Nicolas Goaziou <mail@nicolasgoaziou.fr>
wrote:

> Hello,
>
> Rasmus <rasmus@gmx.us> writes:
>
> > I'm not an expert of HTML either.  However, the "p" tag inside the
> > "figure" is uncommon looking a bit on the example usages online.  Thus, I
> > agree with Matt that it should probably not be there.
>
> OK.
>
> > AFAIK, the CSS selector still differs so on the output side they are not
> > alike.  I.e. the former is "figure>img" the other is a "p>img".  Aside:
> If
> > anything, removing the "p" tag inside the figure would make it easier to
> > handle images.
>
> So would the following patch fix the issue?
>
>
I'm not sure. Doesn't look like it to me -- I would instead have put:

-        (format "\n<p>%s</p>" contents)
+        (format "\n%s" contents)

Because we never want the <p> tag inside the figure. Isn't that right?

[-- Attachment #2: Type: text/html, Size: 1545 bytes --]

Re: extra paragraph in image export?

[Nicolas Goaziou]

Hello,

Matt Price <moptop99@gmail.com> writes:

> I'm not sure. Doesn't look like it to me -- I would instead have put:
>
> -        (format "\n<p>%s</p>" contents)
> +        (format "\n%s" contents)
>
> Because we never want the <p> tag inside the figure. Isn't that right?

I don't think so. When `org-html-html5-fancy' is non-nil, "ox-html.el"
uses <p> tags to separate image and caption. 

Moreover, there is no <figure> in that case, but a <div
class=\"figure\">. Can't this contain a <p> block element?

Regards,

-- 
Nicolas Goaziou

Re: extra paragraph in image export?

[Rasmus]

Hi,

>> I'm not sure. Doesn't look like it to me -- I would instead have put:
>>
>> -        (format "\n<p>%s</p>" contents)
>> +        (format "\n%s" contents)
>>
>> Because we never want the <p> tag inside the figure. Isn't that right?
>
> I don't think so. When `org-html-html5-fancy' is non-nil, "ox-html.el"
> uses <p> tags to separate image and caption. 

I agree that the <p> could be retained in the non-HTML5 case.  That
corresponds to the W3 example below.  Note, strictly speaking I guess the
non-HTML5 org html output is not necessarily "HTML4", so the example may
not apply.

    https://www.w3.org/Style/Examples/007/figures.en.html#Illustrati

> Moreover, there is no <figure> in that case, but a <div
> class=\"figure\">. Can't this contain a <p> block element?

Yes.  HTML5 "figure" can hold "p" as well, but it's not necessary, and it
seems to be uncommon.

Rasmus

-- 
Human: An animal that complicates things more than strictly necessary

Re: extra paragraph in image export?

[Rasmus]

> So would the following patch fix the issue?

Looks fine to me.

Thanks!

Rasmus

-- 
The second rule of Fight Club is: You do not talk about Fight Club

Re: extra paragraph in image export?

[Nicolas Goaziou]

Hello,

Rasmus <rasmus@gmx.us> writes:

>> So would the following patch fix the issue?
>
> Looks fine to me.
>
> Thanks!

Applied. Thank you.

Regards,

-- 
Nicolas Goaziou

Re: extra paragraph in image export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 330 bytes --]

(I totally misread the patch, sorry. duh.)

On Wed, Jan 25, 2017 at 11:59 AM, Nicolas Goaziou <mail@nicolasgoaziou.fr>
wrote:

> Hello,
>
> Rasmus <rasmus@gmx.us> writes:
>
> >> So would the following patch fix the issue?
> >
> > Looks fine to me.
> >
> > Thanks!
>
> Applied. Thank you.
>
> Regards,
>
> --
> Nicolas Goaziou
>
>

[-- Attachment #2: Type: text/html, Size: 825 bytes --]