bookdown cross-reference links pointing below figures

[GuillaumeBiessy]

In reports generated using bookdown, the cross-reference hyperlinks pointing toward Figures seem to point below the Figures (roughly at the caption level), meaning that when clicking on the hyperlink one ends up having only the caption visible on the top of the screen and the reste of the Figure is out of the screen.

This issue only occurs with some browsers such as Chrome or Edge, but not with Firefox, Safari, Internet Explorer or the RStudio viewer. It occurs with both Windows 10 and Android 11 OS.

This message was initially posted on both stackoverflow and RStudio Community :
https://stackoverflow.com/questions/67298237/bookdown-cross-reference-links-pointing-below-figures
https://community.rstudio.com/t/bookdown-cross-reference-links-pointing-below-figures/104394

[cderv]

Do you have a link toward an online book with this issue ?

It seems this behave differently depending of the book and the browser:

• https://bookdown.org/yihui/rmarkdown/html-document.html#fig:tabset

  • This reproduce what you are saying when I click in Chrome.
  • But not when I look in Firefox

• https://bookdown.org/yihui/rmarkdown-cookbook/details-tag.html#fig:details-tag

  • This works in Firefox
  • And it seems to work in Chrome

I both case, The link is done in a span to the top of the image - this is done so that it links at this position, above the figure and not after

<div class="figure" style="text-align: center"><span id="fig:tabset"></span>
<img src="images/tabset.png" alt="Traditional tabs and pill tabs on an HTML page." width="50%">
<p class="caption">
FIGURE 3.1: Traditional tabs and pill tabs on an HTML page.
</p>
</div>

<div class="figure"><span id="fig:details-tag"></span>
<img src="images/details-closed.png" alt="Wrap text output in the details element."><img src="images/details-open.png" alt="Wrap text output in the details element.">
<p class="caption">
FIGURE 7.5: Wrap text output in the details element.
</p>
</div>

I am not sure this has something to do with the R package directly. It seems a Browser issue that handles links to anchors differently.

To be sure this has nothing to do with old versions, can you update packages (at least bookdown, rmarkdown and knitr) and maybe also be sure to use a recent Pandoc version (if you are using RStudio 1.4 this is fine).

I think we need to look into the possibility that this is a browser issue. If there is better way to write the HTML code, then we'll be happy to do it.

[cderv]

Oh! looking at the Browser inspector, it seems has the span is of height 0 it is 'kind of moved' by the browser below the image. And that would be why we have this behavior.

Maybe we need to style this anchor span a specific way so that it is really on the HTML page as it is expected from the source.

[cderv]

Seems like adding a display: block; to the span leads to the correct behavior.
It seems easy enough and I don't think this will have side effect.

[cderv]

You can try #1156 and this should be better.

[GuillaumeBiessy]

I am glad that there is an easy fix.
Thank you very much for looking into this issue !

[cderv]

Did you test the fix before closing ?

Usually we close issue when this is tested and also after the related PR is merged

[GuillaumeBiessy]

Oh sorry I am quite new to this.
I am going to wait for the merge then and test it once it is done.

[cderv]

You can test the PR if you want

remotes::install_github("rstudio/bookdown#1156")

This will install the version with the modification.

You can then reinstall the last CRAN version after you test

install.packages("bookdown")

[GuillaumeBiessy]

Indeed the issue appears to be fixed on both Chrome and Edge using the #1156 release.

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.