How to genereate back links in bibliography reference?

[pipme]

Description

This question is related to #290 . backref=true seems not working for generating backlinks in the output pdf. A minimal reproducible example is below:

index.qmd file:

---
title: "Start Blogging with Quarto"
date: "2023-06-10"
bibliography: [local.bib]
format:
  html: default
  pdf:
    cite-method: biblatex
    biblatexoptions:
      - "backend=biber"
      - "backref=true"
    keep-tex: true
---

For testing backref. [@navarro2022]

With a local.bib file:

@online{navarro2022,
  author = {Navarro, Danielle},
  title = {Porting a Distill Blog to Quarto},
  date = {2022-04-20},
  url = {https://blog.djnavarro.net/posts/2022-04-20_porting-to-quarto},
  langid = {en}
}

The command I used is quarto preview index.qmd --to pdf.

---

Apart from the above question for generating backlinks in pdf, can we do the same thing for HTML? i.e., adding back links in the reference list to go back to some specific locations of the HTML where the article got cited. It would be something like the footnote backlink I guess, which is a nice feature.

Thanks!

Additional information

Quarto version: 1.3.361
MacOS: 13.4 (22F66)
Xelatex:

XeTeX 3.141592653-2.6-0.999995 (TeX Live 2023)
kpathsea version 6.3.5
Copyright 2023 SIL International, Jonathan Kew and Khaled Hosny.
There is NO warranty.  Redistribution of this software is
covered by the terms of both the XeTeX copyright and
the Lesser GNU General Public License.
For more information about these matters, see the file
named COPYING and the XeTeX source.
Primary author of XeTeX: Jonathan Kew.
Compiled with ICU version 72.1; using 72.1
Compiled with zlib version 1.2.13; using 1.2.13
Compiled with FreeType2 version 2.13.0; using 2.13.0
Compiled with Graphite2 version 1.3.14; using 1.3.14
Compiled with HarfBuzz version 7.0.1; using 7.0.1
Compiled with libpng version 1.6.39; using 1.6.39
Compiled with pplib version v2.05 less toxic i hope
Using Mac OS X Core Text and Cocoa frameworks

biber version: 2.19

Terminal output log:

❯ quarto preview index.qmd --to pdf
pandoc 
  to: latex
  output-file: index.tex
  standalone: true
  pdf-engine: xelatex
  variables:
    graphics: true
    tables: true
  default-image-extension: pdf
  cite-method: biblatex
  
metadata
  documentclass: scrartcl
  classoption:
    - DIV=11
    - numbers=noendperiod
  papersize: letter
  header-includes:
    - '\KOMAoption{captions}{tableheading}'
  block-headings: true
  title: Start Blogging with Quarto
  date: '2023-06-10'
  bibliography:
    - local.bib
  biblatexoptions:
    - backend=biber
    - backref=true
  
running xelatex - 1
  This is XeTeX, Version 3.141592653-2.6-0.999995 (TeX Live 2023) (preloaded format=xelatex)
   restricted \write18 enabled.
  entering extended mode
  
generating bibliography
  INFO - This is Biber 2.19
  INFO - Logfile is 'index.blg'
  INFO - Reading 'index.bcf'
  INFO - Found 1 citekeys in bib section 0
  INFO - Processing section 0
  INFO - Looking for bibtex file 'local.bib' for section 0
  INFO - LaTeX decoding ...
  INFO - Found BibTeX data source 'local.bib'
  INFO - Overriding locale 'en-US' defaults 'variable = shifted' with 'variable = non-ignorable'
  INFO - Overriding locale 'en-US' defaults 'normalization = NFD' with 'normalization = prenormalized'
  INFO - Sorting list 'nty/global//global/global' of type 'entry' with template 'nty' and locale 'en-US'
  INFO - No sort tailoring available for locale 'en-US'
  INFO - Writing 'index.bbl' with encoding 'UTF-8'
  INFO - Output to index.bbl
  
running xelatex - 2
  This is XeTeX, Version 3.141592653-2.6-0.999995 (TeX Live 2023) (preloaded format=xelatex)
   restricted \write18 enabled.
  entering extended mode
  

Output created: index.pdf

Watching files for changes
Browse at http://localhost:3243/web/viewer.html

[mcanouil]

Currently, I don't believe it's possible in HTML.
Regarding the option not working in LaTeX, could you look a the tex file and see if it is set correctly? Your issue might be an issue with LaTeX, not necessarily Quarto.
(cc @dragonstyle based on #290)

FYI:

• Showing internal backlinks #1353
• Backlinks in website output #1585

[pipme]

Thanks for the links! I checked the tex file and it's ok (please see my comment here).

My best guess is that Quarto only runs xelatex twice, i.e., xelatex -> biber -> xelatex but actually it need to be xelatex -> biber -> xelatex -> xelatex.

[cderv]

My best guess is that Quarto only runs xelatex twice, i.e., xelatex -> biber -> xelatex but actually it need to be xelatex -> biber -> xelatex -> xelatex.

@pipme we are indeed missing a rerun. I have opened #5969 to track and solve

Regarding HTML I would say this is a feature request.

[pipme]

OK thanks!

[cderv]

For the PDF rendering, this should be fixed in next pre-release version build later today or tomorrow. Thanks for the report!

[anrath]

I know this question has long since been answered but I haven't seen any documentation of backrefs being added to HTML with Quarto (I am new to Quarto so I may have just missed it).

I added this somewhat hacky solution to my Quarto website and am including it here for anyone new who comes across this question. It matches the footnote backrefs and supports multiple references to the same source.

function createReferenceBacklinks() {
  // Select all references in the bibliography except the citation for the post itself
  const references = document.querySelectorAll(
    ".csl-entry:not(.quarto-appendix-citeas)"
  );

  references.forEach((ref, index) => {
    // Get the reference ID and remove the "ref-" prefix
    const refId = ref.id.replace("ref-", "");

    // Find the corresponding citation spans
    const citationSpans = document.querySelectorAll(
      `span[data-cites="${refId}"]`
    );

    citationSpans.forEach((span, spanIndex) => {
      // Assign a unique ID to each citation span if it doesn't have one
      if (!span.id) {
        span.id = `citation-${refId}-${index}-${spanIndex}`;
      }

      // Create the backlink
      const backlink = document.createElement("a");
      backlink.href = `#${span.id}`;
      backlink.innerHTML = "↩️";
      backlink.style.marginLeft = "5px";

      // Append the backlink to the reference entry
      ref.appendChild(backlink);
    });
  });
}

document.addEventListener("DOMContentLoaded", createReferenceBacklinks());

Update:

To use this code, you must have a Quarto website and follow these steps.

1. Create a file reference-backlinks.js in your directory.
2. Add this file to your HTML by adding a reference in the _quarto.yml file as shown below.

format:
  html:
    include-after-body: 
      - text: |
          <script type="text/javascript" src="/path/to/reference-backlinks.js"></script>

[mcanouil]

@anrath Thanks for sharing! Would you mind updating your example to actually show how to use it. All users won't necessarily know how to use your code or even that it is JavaScript thus only for HTML-based formats.