Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.

Thu Oct 05 2017

Imagine you are a software developer for an online academic publisher. You have been asked to enhance the usability of an existing site:

Requirement

When hovering over any given in-text citation, show a tooltip with the actual corresponding reference text.

An example of in-text citations and references:

Finding treatments for breast cancer is a major goal for scientists.^1,2 Some classes of drugs show more promise than others. Gradishar evaluated taxanes as a class.³ Other scientists have investigated individual drugs within this class, including Andre and Zielinski ² and Joensuu and Gligorov. ⁴ Mita et al's investigation of cabazitaxel ⁵ seems to indicate a new role for this class of drugs.

References

1. Cancer Research Funding. National Cancer Institute. http://www.cancer.gov.offcampus.lib.washington.edu/cancertopics/factsheet/NCI/research-funding. Publication date unavailable. Updated June 6, 2011. Accessed November 3, 2012.

2. Andre F, Zielinski CC. Optimal strategies for the treatment of metastatic triple-negative breast cancer with currently approved agents. Ann Oncol. 2012;23(Suppl 2):vi46-vi51.

3. Gradishar WJ. Taxanes for the treatment of metastatic breast cancer. Breast Cancer (Auckl.). 2012;6:159-171.

4. Joensuu H, Gligorov J. Adjuvant treatments for triple-negative breast cancers. Ann Oncol. 2012;Suppl 6:vi40-45.

5. Mita AC, Figlin R, Mita MM. Cabazitaxel: more than a new taxane for metastatic castrate-resistant prostate cancer? Clin Cancer Res. 2012;18(24):OF1-OF

Explanation of the problem

Online readers are well aware that

1 refers to [reference 1]
1,3,5 refers to [1, 3 and 5]
1-3 refers to [1, 2 and 3]

Unfortunately, there is no concrete relationship between the superscript in-text citation and its corresponding reference. The publisher has no desire to update thousands of online papers by hand either. The HTML code is as follows.

In-text citation

<sup>1</sup>

Reference

<p>1. Cancer Research Funding. National Cancer Institute. http://www.cancer.gov.offcampus.lib.washington.edu/cancertopics/factsheet/NCI/research-funding. Publication date unavailable. Updated June 6, 2011. Accessed November 3, 2012.</p>

Solution

We must create a concrete “one to one” relationship, between these two HTML elements. Once you have connected the two HTML elements with a set of rules, you may store this relationship to create a reliable way to show the correct tooltip.

Firstly we must ‘define the relationship’ in verbose terms/rules/exceptions:

Any superscripted text inside the academic paper body is considered to be an ‘in-text citation’, if the text is of the form of:
- Digit
- Digit comma digit …
- Digit hyphen digit …
Much like a book, where the references come after the citations. The corresponding reference must be appear below the in-text citation on the page
The citation must refer to an actual reference on the page
The citation must find the closest reference within the same page, since multiple papers can exist on the same page

Source code

For brevity a JavaScript alert is used to show the reference text on hover, please modify this to a tooltip of your liking.

Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.

Source code

Find the number of non-contiguous islands in a 2d matrix world

Using recursion and depth-first search to find all islands in a given 2d matrix world

Find the median in a data stream

Adding incoming data in a way that it's optimized to always knowing the median

First missing positive

Find the first missing positive integer in an array in O(array_length) time from LeetCode

Median of two arrays

Getting the median of two sorted arrays in O(log(small_array_length)).

Merge k sorted linked lists

Disseminating the "merge k sorted linked lists" problem from Leetcode.com.

Setup Isso comments on your website today

This guide goes through everything you need to get the open source commenting software Isso running on your website for completely free with Google Cloud.

ZigZag conversion algorithm

A dive into the ZigZag letter conversion on Leetcode.com. Letters initially are written in a zig-zag formation and must be read back from left to right.

Cherry pickup algorithm

An in-depth look at the Cherry Pickup problem on Leetcode.com.

Autocomplete with static files [4/4] - Implementing autocomplete with generated static files

At this stage, we should have already have generated our 'data source' of autocomplete JSON files. We can now finally implement a working text box with autocomplete functionality, which consumes these files.

Autocomplete with static files [3/4] - Building an autocomplete static file generator

In this post we will be implementing an autocomplete static file generator, using the principles, learned in the past two articles in this series. Also within this post is a working demo which produces static autocomplete JSON files for a CSV.

Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Autocomplete with static files [1/4] - Introduction

An introduction to static files and the benefits of generating static files for your autocomplete implementation.

Representing numbers, using sticks and stones.

NHibernate QueryOver examples using the C# library

QueryOver is a powerful wrapper for the NHibernate ORM Criteria API. It is type-safe with a familiar syntax to Lambda expressions and LINQ. This post covers a nice range of real-world usage examples.

Creating an Android app, with a large offline database (over 4GB)

Today we will be covering large SQLite databases with the Android PhoneGap framework. We will be going over the challenges and opportunities of running offline Android apps with scale.

Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.