Show Your Readers the Context of your Quotations

Video Transcript:

Hello, this is Tim Langeman, creator of CiteIt.net:

1) Why the world needs CiteIt’s Contextual Citations:

Often when I read a quotation, I think to myself, “that’s a nice quote, but I wonder what it says two sentences prior, or two sentences after the quote. In other words, what’s that context, and how do I know that this quote wasn’t cherry-picked?

Example: Cherry-Picked Quotes

In Washington DC, the Jefferson Memorial has a badly cherry-picked quote etched into the northeastern wall.

Here is the quote:

Nothing is more certainly written in the book of fate than that these people are to be free.

That sounds great, but it’s just an excerpt.

Using CiteIt.net, I can link the quote to the source’s full text found in the online version of the Yale Law Library:

• http://avalon.law.yale.edu/19th_century/jeffauto.asp

View Quote Context:

This allows the reader to see the following context when they click on the blue down arrow (see quote above):

Nor is it less certain that the two races, equally free, cannot live in the same government. Nature, habit, opinion has drawn indelible lines of distinction between them. It is still in our power to direct the process of emancipation and deportation

If you look at the context above the original quote, by clicking on the blue up arrow, you can see Jefferson had argued that slaves “born after a certain date” should be freed and deported “at a proper age”.

Sometimes added context changes everything.

A Higher Standard: Differentiate from “Fake News”:

Given how CiteIt.net exposes out-of-context quotations, authors who use it signal to their readers that they are credible because they are willing to hold themselves to a higher standard of evidence. Using contextual citations further serves to differentiate them from the less serious and combat charges of “Fake News”.

2) Wikipedia Example:

Next, let’s take a look at an example of how CiteIt.net could be used on Wikipedia to provide readers a convenient way to verify and inspect the context of cited quotations.

To view the Wikipedia section of the CiteIt.net website, navigate to “Wikipedia Project” in the Navigation bar and click on a sample article such as Ruth Bader Ginsburg.

1. Scroll down until you see a quote with a grey-blue background, which designates that this quote can be expanded with a popup.
2. Click on the quote to see the 500 characters of context preceding and following the highlighted quote.
3. To read the full article, a reader can click on the “source” link.

Contextual Popups:

Below is a screenshot of the Ruth Bader Ginsburg article mock up which shows the Contextual Popup that appears when a reader clicks on the light grey-blue text of a contextual quotation, in this case: “Ginsburg precedent“.

Screenshot:

The Contextual Popup displays the 500 characters before and after the quote. In this instance, the quote is from a 2005 New York Times article.

Source: Ruth Bader Ginsburg Wikipedia Mock up

View Sample Article: Ruth Bader Ginsburg

As I scroll down in this sample Wikipedia article, I can see additional contextual citations that are marked with a grey-blue background. As I click on each of these links a contextual popup appears.Going back to the previous page. You can see additional sample Wikipedia articles on topics ranging from Hillary Clinton and Donald Trump to Pride and Prejudice, Hamlet, Syphilis, and the Inauguration of JFK.

View Sample Wikipedia Articles:

3) How CiteIt.net works:

1. Each of these Wikipedia articles has been marked up with Html quote tags (<blockquote> or <q>) to specify the URL associated with each quote:
   

   Inline Quotes:

   • Here’s an example of an inline quote, that is a quote that is within an existing paragraph. CiteIt.net uses javascript to turn these <q cite=’url’> tags into contextual popups:
   • Demo:
     Click on the grey-blue quote below to see the contextual popup

     Contextual Popup:

     Later, colleague Antonin Scalia praised Ginsburg’s skills as an advocate. She became the leading (and very successful) litigator on behalf of women’s rights—the Thurgood Marshall of that cause, so to speak. This was a comparison that had first been made by former Solicitor General Erwin Griswold who was also her former professor and dean at Harvard Law School, in a speech given in 1985.

   • Html:

     Later, colleague Antonin Scalia praised Ginsburg’s skills as an advocate.
     <q cite=”http://avalon.law.yale.edu/19th_century/jeffauto.asp“>
     She became the leading (and very successful) litigator on behalf of women’s rights—the Thurgood Marshall of that cause, so to speak.
     </q> This was a comparison that had first been made by former Solicitor General Erwin Griswold who was also her former professor and dean at Harvard Law School, in a speech given in 1985.

     Here’s the JSON generated by the CiteIt.net webservice
     • 9725aa4e445e23a755e34c3f6f3416b0e3e1e242f5e41e495ef52466d3a4f8bc.json

     View Sample Article: Ruth Bader Ginsburg

2. 

   Ruth Bader Ginsburg example

   When the author is ready to publish their article, they call the CiteIt.net webservice.

3. The webservice
   • looks up the cited source,
   • locates the quote, and
   • creates a JSON file with the contextual data.
4. The author’s page includes javascript libraries that:
   • loops through their article’s html,
   • finds quotes with <blockquote cite=”url”> and <q cite=”url”> tags,
   • computes a hash of the quote and citing and cited URLs,
   • looks up the JSON file named by the hash value,
   • adds the JSON context fields into hidden divs on the page.

Looked up Data: JSON file

• https://read.citeit.net/quote/sha256/0.4/0a/0a295e39ff33d53d9f6e6e3f4a7168ad0329e7152f0c49dcb85bacc6d66ed283.json

{
   "cited_url": "https://time.com/3823889/ruth-bader-ginsburg-2015-time-100/",
   "cited_quote": "she became the leading (and very successful) litigator on behalf of women's rights—the Thurgood Marshall of that cause, so to speak.",
   "cited_context_before": " Careers Press Room Contact the Editors U.S. Customer Service E.U. Customer Service Asia Customer Service Reprints and Permissions More Privacy Policy Your California Privacy Rights Terms of Use Site Map Connect with Us Ruth Bader Ginsburg Ruth Bader Ginsburg Sebastian Kim for TIME April 15, 2015 8:15 PM EDT Ruth Bader Ginsburg has had two distinguished legal careers, either one of which would alone entitle her to be one of TIME's 100. When she was a law professor at Rutgers and later Columbia, ",
   "cited_context_after": " President Carter appointed her to a seat on the U.S. Court of Appeals for the District of Columbia Circuit in 1980, and President Clinton to a seat on the Supreme Court in 1993. Having had the good fortune to serve beside her on both courts, I can attest that her opinions are always thoroughly considered, always carefully crafted and almost always correct (which is to say we sometimes disagree). That much is apparent for all to see. What only her colleagues know is that her suggestions improve the opinions the rest of us write, and that she is a source of collegiality and good judgment in all our work. Justice Scalia is the longest-serving member currently on the Supreme Court Pick up the TIME 100 issue on newsstands, or click here to buy it online. Contact us at letters@time.com. SHARE THIS STORY Read More From TIME Related Stories Next Up: Editor's Pick Donald Trump's Last Stand EDIT POST SPECIAL ELECTION OFFER 8 Issues for $8Sale Ends November 9th SUBSCRIBE NOW Sign Up for Newslett",
   "citing_url": "http://demo-sites.citeit.net/en.wikipedia.org/wiki/Ruth_Bader_Ginsburg",
   "citing_quote": "She became the leading (and very successful) litigator on behalf of women's rights—the Thurgood Marshall of that cause, so to speak.",
   "citing_context_before": " ↓ Legal scholars and advocates credit Ginsburg's body of work with making significant legal advances for women under the Equal Protection Clause of the Constitution.[31][23] Taken together, Ginsburg's legal victories discouraged legislatures from treating women and men differently under the law.[31][23][37] She continued to work on the ACLU's Women's Rights Project until her appointment to the Federal Bench in 1980.[31] Later, colleague Antonin Scalia praised Ginsburg's skills as an advocate. \"",
   "citing_context_after": "\" This was a comparison that had first been made by former Solicitor General Erwin Griswold who was also her former professor and dean at Harvard Law School, in a speech given in 1985.[40][41][d] U.S. Court of Appeals Ginsburg with President Jimmy Carter in 1980 Ginsburg was nominated by President Jimmy Carter on April 14, 1980, to a seat on the United States Court of Appeals for the District of Columbia Circuit vacated by Judge Harold Leventhal upon his death.[30] She was confirmed by the United States Senate on June 18, 1980, and received her commission later that day.[30] Her service terminated on August 9, 1993, due to her elevation to the United States Supreme Court.[30][42][43] During her time as a judge on the DC Circuit, Ginsburg often found consensus with her colleagues including conservatives Robert H. Bork and Antonin Scalia.[44][45] Her time on the court earned her a reputation as a \"cautious jurist\" and a moderate.[46] David S. Tatel replaced her after Ginsburg's appointme",
   "hashkey": "Shebecametheleading(andverysuccessful)litigatoronbehalfofwomensrightstheThurgoodMarshallofthatcause,sotospeak.|demo-sites.citeit.net/en.wikipedia.org/wiki/Ruth_Bader_Ginsburg|time.com/3823889/ruth-bader-ginsburg-2015-time-100",
   "sha256": "0a295e39ff33d53d9f6e6e3f4a7168ad0329e7152f0c49dcb85bacc6d66ed283"
}

4) WordPress: Test Drive Demo plugin

Finally, let’s look at how authors can easily create these expanding citations from a content management system or WordPress blog using the CiteIt.net javascript library and webservice.

In this example, I’m going to go to use the WordPress plugin already installed and on the demo site.

Try the WordPress Plugin:

Create Your Own Citations using WordPress Plugin Demo Site

1. Login with the username of “test and the supplied password.
2. I click “New” -> “Post“.
3. And I write my web content.

2 Types of Quotations:

There are two formats for quotations:

Let’s do a longer quote that forms it’s own paragraph first:

1) Long Quotations : <blockquote cite=’url’>

I’ll use a sample from Tyler Cowen‘s interview with Rabbi David Wolpe, found on medium.com.

Live Example:

I think that Judaism has the same problem that any thick civilization has in a world in which, as you say, context is stripped away. And not only is context stripped away, but attention to any one thing is scanter and less than it used to be. So, for example, a lot of Jewish commentary is based on your recognizing the reference that I make. Who recognizes references anymore? Because people don’t spend years studying books.

Here’s the Html:

<blockquote cite="https://medium.com/conversations-with-tyler/rabbi-david-wolpe-leaders-religion-israel-identity-7c159c2ed2d">I think that Judaism has the same problem that any thick civilization has in a world in which, as you say, context is stripped away. And not only is context stripped away, but attention to any one thing is scanter and less than it used to be. So, for example, a lot of Jewish commentary is based on your recognizing the reference that I make. Who recognizes references anymore? Because people don’t spend years studying books.</blockquote>

• 2a1fd0764e13ba00c134f86fc51b81d52da0ad5bf7f326daad238f68f3553dd5.json

If the author is using the WordPress plugin, they copy and paste the quoted text,

Next, they copy the article’s URL, which in this case comes from medium.com.

The CiteIt.net WordPress plugin adds two custom buttons to the TinyMce editor.

I click on the blockquote button and it prompts me to enter the source URL.

To view the Html for this example, I click the “Text” tab.

When I click publish, CiteIt.net’s webservice will look up the context surrounding this quote and inject it into a hidden div that expands when the reader clicks on the down arrow. I can view the resulting sample quote by clicking on the post’s permalink. Clicking on the arrows expands the context and if I go into Developer mode and click on “Network”, I can find the contextual JSON data file that corresponds to this quote. The quoted text is saved with the key “citing_quote” and the context is saved with the key “cited_context_before” and after.

2) Short Inline quotations : <q cite=’url’>

For a second example, I’ll use a quote from Jane Austen to show how CiteIt.net’s inline quotes create a contextual popup in the middle of a paragraph.

Live Example:

Click on the grey-blue quote (below) to see the popup:

Here’s the Html:

Jane Austen’s “Pride and Prejudice” draws its title, in part, from a line where the books’ main character, Elizabeth says: <q cite="https://en.wikisource.org/wiki/Pride_and_Prejudice/Chapter_5">I could easily forgive his pride, if he had not mortified mine.</q> If we look at the context, we can see that Miss Lucas had previously affirmed Darcy’s right to be proud, while Mary responds didactically by defining the word “pride” and distinguishing it from “vanity”.

• 59137b97e93432ed35022616ecf4339c808d4ccd915d37f08b328bb447748d97.json

Use the “CiteIt Inline Popup” Button:

I’ll copy the quote from Wikisource.

Notice this time when I select the quoted text and supply the source URL, I click the other button — the CiteIt.net “inline popup” button.

TinyMce Editor:

As a quick demo, I’ll switch to the editor’s text view and you can see that the editor has created a <q cite=’url’> tag with the supplied URL.

Publish Button:

I’ll switch back to “Visual” mode and click “Publish“.

The CiteIt.net WordPress plugin customizes the “Publish” button to make a call to the CiteIt.net webservice, which looks up the cited quote and creates the contextual JSON file.

Once the page is published I can click on the blog post’s URL to view the page with the JSON data.

When I view the page, I can click on the quoted text to view the contextual popup.

Developer Mode:

To see where the data is coming from, I can open developer mode and locate and inspect the JSON data.

The JSON data format for the <blockquote> and <q> tags is identical. It is only the choice of tag type which determines whether the data is displayed as a popup or expanding blockquote.

Summary: Demonstrate the Context of your Citations

To summarize, CiteIt.net uses a javascript jquery library and python webservice to:

• allow responsible authors to demonstrate the context of their citations
• bolstering their credibility by differentiating them from the less serious
• combat scurrilous charges of “Fake news”

This allows readers to easily:

• verify the source of citations and
• learn more

 

 

Volunteers Wanted!

How to Help:

I’m looking for collaborators to help with several tasks.

Here are the top 3 highest priorities:

1) WordPress Gutenberg:

• One important task involves converting the WordPress plugin, which uses the Classic TinyMce editor to Gutenberg. (more info)
• Develop the ability to add metadata to quotes, including #tagging using custom Html attributes.

2) Machine Learning: Wikipedia

Another important task for the Wikipedia portion of the project would likely involve machine learning to automate the extraction of URLs from the Wikipedia footnotes for each quote. (more info)

3) Quote Matching:

Add support for quote validation and partial matching:

Additional Tasks:

You can learn more about additional tasks on the Volunteer section of the CiteIt.net website.

 

Credit: Ted Nelson

Finally, I’d like to credit Ted Nelson for inspiring me to think beyond traditional html links.

CiteIt.net is not Xanadu, but it is my hope that marking up quote sources can lay the groundwork for others to upgrade our current web to a Xanadu-like internet.

I got the idea for CiteIt in 2015 while writing a review of Ted Nelson‘s Ph.D thesis and, in the spirit of Xanadu, imagined that it would be more appropriate if I wrote the review in a way more similar to Nelson’s original vision for parallel hypertext.

CiteIt.net doesn’t achieve full parallel hypertext, but I’m hoping that by marking up the quotes, future programmers could build upon what I started, eventually adding a parallel user interface. I imagine native support for this could be built into Web Browsers so that the contextual popup is a native browser-rendered view of the original source, not just a plain text-version.

• Read my original article: Ted Nelson’s Philosophy of Hypertext

 

Bonus: YouTube Video

You can quote and embed YouTube videos from their transcripts. I would also like to expand to allow CiteIt to provide context for citations of audio transcripts. If you would like to volunteer for the audio/video part of the project, send me an email or comment below.

• Quoting YouTube transcripts

 

 

More Information:

View more information about the WordPress plugin and code:

WordPress plugin:

• Test-drive WordPress plugin: demo site
• Download WordPress plugin: (Classic editor)

Developers:

• Add CiteIt to your Website: View Sample Code & Video
• View list of Volunteer Tasks

Code:

• Code Summary: both front-end and backend
• Github: all repositories

Contact:

View Tim’s home page: email & phone number