rstudio/rmarkdown-cookbook

'width' parameter getting lost with custom blocks in gitbook output

Blake-Madden opened this issue · 6 comments

Blake-Madden commented

Running the example from https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html:

::: {#hello .greeting .message width="40%"}
Hello **world**!
:::

I should get output like this in my gitbook output:

<div id="hello" class="greeting message" width="40%">
  Hello <strong>world</strong>!
</div>

However, what I get is:

<div id="hello" class="greeting message">

The width="40%" didn't make it into the output. However, I try other arguments like align='right' and they make it to the output no problem; it seems like "width" is specifically being blocked from the output. I've tried with other classes and custom blocks, and it is always "width" that gets ignored.

A better example:

::: {#hello .greeting .message float='right' width="40%" align='right'}
Hello **world**!
:::

Will yield:

<div id="hello" class="greeting message" float="right" align="right">
<p>Hello <strong>world</strong>!</p>
</div>

"float" and "align" are there, but "width" is gone. Is "width" not supported, or is this a bookdown bug? I'm using the latest bookdown on Windows.

cderv commented

Hi @Blake-Madden,

it seems to be a Pandoc behavior.

❯ pandoc -t html
::: {#hello .greeting .message width="40%"}
Hello **world**!
:::
^Z
<div id="hello" class="greeting message">
<p>Hello <strong>world</strong>!</p>
</div>

I know Pandoc has special treatment of width and height attributes but it was my understanding that it concerned images only. See https://pandoc.org/MANUAL.html#extension-link_attributes

We need to ask upstream to know more.

cderv commented

I am just wondering : not sure width attributes is valid on HTML <div> tag, is it ?

From https://validator.w3.org/ using this document

<!DOCTYPE html>
<html lang = "fr">
<head>
<title>Hello</title>
</head>
<body>
<div width="40%">
Dummy
</div>
</body>
</html>

We get an error
image

<div> only supports some generic attributes : From https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element and https://html.spec.whatwg.org/multipage/dom.html#global-attributes

So it may be expected from Pandoc to only generate valid HTML. Why do you need to add a width attribute on a div tag ?

cderv commented

It seems this is an issue in Pandoc. It has been reported here: jgm/pandoc#7342

This will be fixed in a future version of Pandoc.

Blake-Madden commented

Thank you for investigating!

Yeah, now I'm thinking a width attribute with a div is wrong; I tried it with this instead:

style="width: 40%;"

and that works. Perhaps the example in the book should use that instead. Corrected example:

::: {#hello .greeting .message style="width: 40%;"}
Hello **world**!
:::
cderv commented

Thanks, I used an example using style attributes but using color as it get a clear result if someone tries.

Thanks for catching that in the first place!