fig.margin = TRUE does not work with fig.align = "center" for HTML output

[flyaflya]

Thanks for the great package. I am using it to write a bookdown book with HTML and PDF output.

My problem is that I am trying to center a margin figure instead of accepting the defaul of left-align. PDF output works fine, but HTML output does not handle the below snippet properly:

{r nice-fig, fig.cap='Here is a nice figure!', fig.asp=.75, 
fig.margin = TRUE, out.width = "30%", fig.align = "center"}
par(mar = c(4, 4, .1, .1))
plot(pressure, type = 'b', pch = 19)

Output puts figure in center of main text instead of centering in margin:

[yihui]

Sounds like a bug, but I don't have time to fix it. Sorry. And pull requests are welcome!

[flyaflya]

Alright, I can embrace the challenge of debugging this, but I need a hint.

Using fig.margin = TRUE, but WITHOUT the chunk option of fig.align = "center" in the .rmd file I get the following working output in the .md file:

<p><span class="marginnote shownote">
<!--
<div class="figure">-->
<img src="image.png" alt="Alt title." width="30%"  />
<!--
<p class="caption marginnote">-->MPG vs horsepower, colored by transmission.<!--</p>-->
<!--</div>--></span></p>

As soon as I add fig.align = "center", then the .md file reads:

Last sentence of text in a normal paragraph.</p>
<div class="figure" style="text-align: center">
<img src="image.png" alt="Screwy: MPG vs horsepower, colored by transmission." width="30%"  />
<!--
<p class="caption marginnote">-->Screwy: MPG vs horsepower, colored by transmission.<!--</p>-->
<!--</div>--></span></p>

As you can see, the addition of the align option omits the two first lines which start the HTML paragraph. Specifically, these are missing:

<p><span class="marginnote shownote">
<!--

And also, the align option alters the third line in a way that is not helpful to centering the image: <div class="figure" style="text-align: center">

I have trouble now finding a function in the knitr, tufte, or rmarkdownpackages responsible for generating the .md file with the marginnotedesignation. Any advice? Thanks!!!!

[ericpgreen]

@flyaflya did you manage to get fig.align = "center" to work?

[flyaflya]

I never got it to work as above. I chose to center all images by default. To do this, I created a file called center.css in the directory of my index.rmd file. The contents are here:

img { display: block;
  margin-left: auto;
  margin-right: auto;
    /*border-style: solid;
  border-width: 2px;*/
  padding-right: 5em;
}

Then, added center.css to my _output.yml file like this:

bookdown::tufte_html_book:
    tufte_variant: "envisioned"
    toc: yes
    split_by: chapter
    css: [toc2.css, googleAPIFont.css, center.css]
    highlight: tango
    includes:
      in_header: doc_prefix.html