Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cross-reference to figure in revealjs presentation not working #9742

Closed
itsmevictor opened this issue May 22, 2024 · 5 comments · Fixed by #10688
Closed

Cross-reference to figure in revealjs presentation not working #9742

itsmevictor opened this issue May 22, 2024 · 5 comments · Fixed by #10688
Assignees
Labels
enhancement New feature or request revealjs Issues with the revealjs format
Milestone

Comments

@itsmevictor
Copy link

itsmevictor commented May 22, 2024

Bug description

Hi, thank you for the great software!

My problem is that cross-references to a figure in a revealjs presentation does not seem to work. The figure appears correctly and with its caption and the cross-reference (Figure X) also appears with a link, but clicking it leads nowhere.

I initially tried by following the "Basics" section of the Cross-references guide which did not work. I've now opted for the div syntax, which means that I basically have this:

See reference @fig-scatterplot. 

------------------------------------------------------------------------

::: {#fig-scatterplot}

![](bv_scatterplot.png-1.png)

Scatter plot of the running and outcome variables at the level of the voting office
:::

For context, my yaml header is the following:

---
title: "MY_TITLE"
subtitle: "MY_SUBTITLE"
author: "MY_NAME"
institute: "MY_INSTITUTE"
format: 
  revealjs:
    theme:
        - default
        # - mycustomstyle.scss
    embed-resources: true
    self-contained-math: false
    html-math-method: mathjax
    transition: fade
    transition-speed: fast
    callout-icon: true
    fontsize: 18pt
    incremental: true
    progress: true
    # linkcolor: green
    # fontcolor: blue
editor: visual
bibliography: thesis_bibliography.bib
citeproc: true
zotero: false
---

Steps to reproduce

Writing the same code should do the trick.

Expected behavior

Clicking the link to the figure should bring to the figure.

Actual behavior

Clicking the link to the figure does absolutely nothing.

Your environment

  • IDE : Visual Studio Code, but the problem is the same if I open the html file in my browser.
  • OS : Mac OS Sonoma 14.4

Quarto check output

Quarto 1.4.554
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.554
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /opt/homebrew/opt/[email protected]/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.0
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /opt/homebrew/lib/R/library
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.46
      rmarkdown: 2.26

[✓] Checking Knitr engine render......OK
@itsmevictor itsmevictor added the bug Something isn't working label May 22, 2024
@itsmevictor itsmevictor changed the title Cross-reference to figure revealjs presentation not working Cross-reference to figure in revealjs presentation not working May 22, 2024
@cscheid cscheid added enhancement New feature or request revealjs Issues with the revealjs format and removed bug Something isn't working labels May 22, 2024
@cscheid
Copy link
Collaborator

cscheid commented May 22, 2024

The crossreference itself exists and "is correct"; the issue is that revealjs hijacks the URLs so that links don't behave as regular documents.

We should try to do something about this. @cderv, what do you think?

@cscheid cscheid added the triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone. label May 22, 2024
@cderv
Copy link
Collaborator

cderv commented May 23, 2024

I think the cross reference exists, but it is not correct in a slide presentation context.

I believe this is an oversight, as we do the right thing for bibliography references already with a special processing and same for end-document footnotes (orignal commit 5246d7d)

---
title: test
format: revealjs
bibliography: ref.bib
---

## 

```{r}
#| include: false
knitr::write_bib("knitr", "ref.bib")
```


See [@R-knitr] for more information.

## References
---
title: test
format: revealjs
reference-location: document
---

## Start

See this content[^1]

[^1]: This is a footnote  

## End

So we probably need to do something similar.

To be clear on Reveal js presentation, the use of # is reserved for slides (name or number) when navigating the presentation. So we need to tweak all the cross ref links to change href id by the slide id the link is on.

I believe this is how we need work around to make the cross refs links work in Revealjs context

@cderv cderv removed the triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone. label May 23, 2024
@cscheid cscheid added this to the Future milestone Jun 5, 2024
@cderv cderv modified the milestones: Future, v1.6 Jul 23, 2024
@cderv
Copy link
Collaborator

cderv commented Sep 2, 2024

FWIW, this works now with Revealjs 5

---
title: test reveal
format: 
  revealjs: 
    auto-stretch: false
---

## Slide 1

![Elephant](https://quarto.org/docs/authoring/images/crossref-figure.png){#fig-elephant}

## Another slide

See [Figure Element](#fig-elephant)

I just need to fix an issue with stretching image which is loosing id - which is probably source of the issue with previous revealjs version

@itsmevictor
Copy link
Author

Excellent, many thanks for the fix/development!

@cderv
Copy link
Collaborator

cderv commented Sep 2, 2024

It is not fixed yet. #10688 is needed. The issue will be closed upon PR being merged.

@cderv cderv reopened this Sep 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request revealjs Issues with the revealjs format
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants