Show Your Readers the Context of your Quotations
Video Transcript:
Hello, this is Tim Langeman, creator of CiteIt.net:
Setting a higher standard of citation for:
- news organizations,
- academics, and
- web authors.
About this Video:
In this video I’m going to show you:
- Why the world needs CiteIt.net‘s Contextual Citations
- A demonstration of what Wikipedia would look like if it used CiteIt.net
- How you can use CiteIt.net on your WordPress blog.
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:
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.
- Scroll down until you see a quote with a grey-blue background, which designates that this quote can be expanded with a popup.
- Click on the quote to see the 500 characters of context preceding and following the highlighted quote.
- 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
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:
- 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 popupContextual 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
-
When the author is ready to publish their article, they call the CiteIt.net webservice.
- The webservice
- looks up the cited source,
- locates the quote, and
- creates a JSON file with the contextual data.
- 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
{ "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.

Test-drive CiteIt on Demo site.
Try the WordPress Plugin:
- Login with the username of “test and the supplied password.
- I click “New” -> “Post“.
- 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>
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:
Contextual Popup:
Jane Austen’s “Pride and Prejudice” draws its title, in part, from a line where the books’ main character, Elizabeth says: I could easily forgive his pride, if he had not mortified mine.
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”.
The process is identical to the <blockquote>, but because the quote occurs in the middle of the paragraph, the context is provided in a popup window rather than by expanding the paragraph.
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”.
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:

WordPress TinyMce Popup Button
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:

Developer Console: (full resolution) for: 59137b97e93432 .. json
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

Machine Learning: Help Wanted
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:

Quote Validation: Diff Syntax
- Allow quotations to [C]hange the case of a word with brackets.
- Allow quotes to add [words] that are not in the original, if brackets are used to note which words were added.
- Quotes that have ellipses .. should be expandable using a [+] sign, to view the omitted text, just like <blockquotes> are expandabble with arrows.
- Allow unique specification of a quote, even if the quoted phrase occurs multiple times in a document.
- This could be done by specifying enough of the “before” and “after” text to make the phrase unique.
- A variation of this approach is taken by Google’s Text fragments, which I would like to use for CiteIt.nets “source” link. This would highlight the quoted text when linking to the original.
Email Tim if you’re interested in helping.
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.
Roadmap: Future ideas
Now:
CiteIt’s contextual citations can be added to an author’s website using the custom jquery library or WordPress plugin.
Future:
PDF Support: Webservice
The python version of the webservice currently supports using digital PDFs1 as sources but the Docker-based public webservice does not yet support PDFs. Adding PDF support, both “digital” and scanned, to the Docker image is important to academic disciplines like history, as well as discussions of public affairs that cite many government documents2.
Video & Audio Transcripts
There is a draft version of CiteIt which allows citing YouTube transcripts. More could be done to enable audio and video contextual citations.
Common Database
Authors’ citations could be added to a database when the authors index their pages. The database could be made available to aggregation services.
The Value of Citation Data & Aggregation Services
-
There is great value in citation data, as Google’s PageRank has shown. Adding source urls to specific quotations allows citations to become more granular and adding tagging and meta data allows citations to become more expressive and informative.
- This database could be published using an API and programmers could compete to offer annotation, moderation, and search aggregation services.

Promote Public Good by Demetria Rose from the Noun Project
Funding & Organization:
I believe citation is a public good upon which many private companies can build to offer competitive services. One idea I have to develop the public infrastructure is to pursue a grant from a foundation like the Knight Foundation or Sloan Foundation to fund the project in partnership with the Internet Archive. I haven’t talked to anyone at these organizations yet. Email me if you have other ideas.
Decentralized:
Ultimately, this seems like a service that might be built as a decentralized system.
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

GitHub: CiteIt project
Code:
- Code Summary: both front-end and backend
- Github: all repositories
Contact:
View Tim’s home page: email & phone number
How to Use the Demo CiteIt.net Site
Transcript
Hello this is Tim Langeman, creator of CiteIt.net:
a higher standard of citation
for news organizations, academics, and web authors.
Wouldn’t it be great if web authors could easily demonstrate the authenticity and context of their quotations to skeptical and curious readers?
2 Types of Citations
CiteIt.net enables authors to do just that through the choice of two different citation options depending upon a citation’s length.
1) The first type of citation is the expanding block quote which is used for longer quotes that form their own paragraphs.
2) The second type of citation is for shorter quotations and uses a popup window to display the context without disturbing the original paragraph.
We don’t need to have a WordPress website or install the plugin to do a test-drive. Simply go to the demo area and login with the supplied password.
Let’s begin by clicking Posts > Add New to create a new Post.
We are now ready to create each of the 2 types of citations:
- the blockquote, and
- the inline popup.
Blockquote Citations
We can enter the title and intro for our post like we ordinarily would compose a post.
In the next step, we grab a copy of our quote, which in this case is on the medium.com website.
We select our text and then right-click and select copy.
Next, we switch back to the editor tab and paste the quote in the position where we want it.
Making sure to first select the quote, we next click on the CiteIt.net blockquote button. This is one of two buttons that the CiteIt.net WordPress plugin adds to the editor.
When we click on the CiteIt.net blockquote button, a window pops up for us to enter our source’s URL.
To enter the URL, we switch to the tab containing the Medium.com article and copy the URL from the address bar using “right-click Copy”.
We then switch back to the blog post and paste the URL into the popup window and click “OK“.
The blockquote paragraph should now be indented and we are ready to click on the “Publish button“.
For webpages, the app should only require a few seconds to request the article and find the 500 characters of context before and after the original source. PDF and YouTube pages take longer unless they’ve been previously downloaded and cached.
We’re now ready to view the published post by locating the post’s permalink and clicking on it.
We should now see the published post, with the blue arrows above and below the quote.
If we click on the arrows, we should see the surrounding context appear and disappear as we toggle the arrows.
If we want to visit the original source, we can click on the “source” link.
Inline Popups
Ok, we’ve done with the first of the two citation formats. Now its time to do the second type of citation — the “inline popup“.
We can make a new post for the inline popup example and enter some text for a title and body. The source for this post is a Wikisource publication of Jane Austen’s Pride and Prejudice.
So I’ll grab one of the lines that helps explain the book’s title:
“I could easily forgive his pride, if he had not mortified mine.”
The process that we use next is exactly the same as for the blockquote, but this time we will click on the “inline popup button“.
After we’ve copied the quote into the blog post, we make sure it is selected and we click the second CiteIt.net button — the inline popup.
We locate the page’s URL and copy it into the popup prompt.
This time, the quotation is not automatically indented. Rather, the inline popup can appear in the middle of a paragraph without breaking up the text.
When we click “Publish” the App contacts Wikisource for the original quote and locates the 500 characters before and after the quote. It then saves the context in a little text snippet which the readers load when they click on the arrows or popup link.
Let’s now click on the “permalink” button again to view the published post.
This time, instead of expanding arrows, we see double-blue lines under our quote.
If we click on the link, a popup appears, showing the original quote, along with the surrounding context.
Summary:
Thank you for your interest in CiteIt.net
a higher standard of citation
for news organizations, academics, and web authors.
In this video I’ve demonstrated how to use the CiteIt.net WordPress plugin to make two types of citations:
- Using the blockquote tag for longer quotations
- Using the inline popup for shorter selections
CiteIt.net aims to change norms,
so next time you read or hear someone make an unsubstantiated quotation or claim, ask them:
How to Install and Use the CiteIt.net WordPress Plugin
Video Transcript
Hello, this is Tim Langeman, creator of CiteIt.net
a higher standard of citation
for news organizations, academics, and web authors.
Today’s video will demonstrate how to:
- install the CiteIt.net WordPress Plugin and
- how to use the plugin to cite a sample article on medium.com
About this Version:
This plugin is designed for the older WordPress version 4 editor.
If you would like to help me program a WordPress Gutenberg plugin, check out the GitHub ticket and send me an email.
1) How to Install the CiteIt.net WordPress Plugin
Let’s start by going to the CiteIt.net homepage and clicking on the “WordPress Plugin” link in the top navigation bar.
This will take us to the plugin page where we can scroll down and click on the blue “Download WordPress Plugin” button.

We should now have a CiteIt.net.zip file saved to our local Downloads folder. Let’s remember where this file is while we log in to our WordPress site and click “Plugins“.1

The next thing we want to do after we’ve clicked “Plugins” is click the “Add New” button to add the new plugin.

When we do this, we should see an “Upload Plugin” button.

(This plugin is not in the WordPress store yet because it is still in alpha testing mode while I work out the bugs.)
We next click on the “Upload Plugin” option which produces a screen that allows us to upload the plugin’s zip file by selecting the “Choose file” button.2
(TODO: get a Windows screenshot)
Now that we have the plugin’s zip file selected, we should see the CiteIt.net.zip filename appear next to the “Choose File” button:

After you’ve selected your file, the next step is to select: “Install Now“:

We should next see a screen offering us the chance to “Activate Plugin“, which we now click.

The plugin is now installed.
You should see the Plugin listed alongside your other plugins.
One thing to note is that the plugin version number is displayed in the bottom left of the Description.
This version number can be useful in telling you whether you are running the latest version.

If you decide that you no longer want to use the plugin, just click “Deactivate“.
- This will give you the option to delete all the files in the CiteIt.net folder and then delete the folder.
FYI: If you are wondering where the plugin is stored, here’s the directory structure of my Linux server:

2) How to Cite a quotation using the CiteIt.net WordPress Plugin:
Ok, so assuming that you’ve got the Citeit.net WordPress Plugin already installed, here is how you can use the plugin to create expanding citations.
a) First, go to the “Posts” section and click “Add New“.

b) Next, give the post a title and begin typing your post body:

Copy Quote from Article
c) In this next step, you locate the quote you want to cite and copy it into your blog post.
In my case, I already know the quote I want is in a medium.com article which I have open in another tab.
I switch to the other tab and select the quote I want.

I then copy the text to my clipboard, which on my computer involves “Right Clicking” and selecting “Copy” from the menu. (shortcut: Ctrl-C)

d) I next switch back to the blog post tab and paste the quote contents by “Right Clicking” in the space under the previous paragraph and selecting “Paste“. (shortcut: Ctrl-V)

I now have pasted the quote in my blog post and the next step is to turn this into a linked CiteIt.net expanding blockquote.

It is now time to take advantage of the Two new CiteIt.net custom buttons that the CiteIt.net WordPress plugin has added to the editor.

e) I highlight my quote and click on the “CiteIt.net blockquote” button.

f) This pops up a window that prompts me for the source’s URL, which in my case is the medium.com article.
The URL can be copied from the browser address bar:

g) so I switch tabs back to the medium.com article and copy the URL from the address bar (right-click-copy).
and paste it into the custom popup window: (right-click paste)

h) Click “OK” to submit the URL; and you should notice that the quote is now indented:
For the Technically Inclined
The following technical info is useful for troubleshooting:
(You can skip it if you want.)
This next bit of the video is For the Technically included to troubleshoot the code if something goes wrong. Don’t fret if the following technical detail goes over your head.
If you’re technically inclined, you can inspect the Html code and you will notice that a <blockquote> Html tag has been wrapped around the quote.

If you switch the editor to code view (Text), you can see the new blockquote tag in the Html code:

Notice the “<blockquote cite=”https://medium.com/..”> tag
For our purposes, the most important part of the code is that the blockquote has a “cite” attribute in which the medium.com URL is populated.
(End Technical Troubleshooting segment)
Publishing the Post
i) We can now switch back to visual mode by clicking on the “Visual” tab and clicking “Publish“

j) After a brief wait, we can view the post by clicking on the “Permalink” or “View Post” link.
Clicking on the Permalink will take us to the published post.

Viewing the Post
k) When we view the post, we should see the blue contextual arrows above and below the quote.

When we click on the arrows, we should see that the text between the quote expands to show the grey hidden context of the 500 characters before and after the quote.

Summary
If you have followed along with this video, you have now successfully:
1) installed the CiteIt.net WordPress Plugin and
2) created your first expanding contextual quotation.
More Information
As you get more comfortable with contextual blockquotes, you can expand your knowledge by:
- creating contextual popup windows with the second button — the “CiteIt inline popup” and by
- creating an expanding quotation for a YouTube video that has a transcript
Thank you for your interest in CiteIt.net
a higher standard of citation
for news organizations, academics, and web authors
CiteIt.net aims to change norms,
so next time you read or hear someone make an unsubstantiated quotation or claim, ask them:
Can you CiteIt? Can you CiteIt?
If you don’t have a WordPress site of your own, you can test-drive the WordPress plugin which is already installed on the demo.citeit.net website.↩
You can also drag and drop the file onto the “Choose file” button.↩
Understanding the CiteIt.net Front-end Code
Video Transcript
Hello, this is Tim Langeman, creator of CiteIt.net:
a citation app which enables web authors to easily demonstrate the authenticity and context of their quotations to skeptical and curious readers.
Today’s video is targeted at developers who want to learn more about how to use the CiteIt.net javascript library, with the goal of integrating it with their own website or CMS and the CiteIt.net web service. It assumes that the developer has the ability to upload the sample code to a public website.1
Let’s start by going to the CiteIt.net home page and clicking on the Sample Code examples.
- We see a plain, bare-bones html page that contains several examples.
- We also see the blue CiteIt.net expanding arrows above and below the quotations.
- If the user is using Chrome, we can enter the Developer mode by right-clicking on the web page’s background and select “Inspect“.2
- Next, click on “Network” 3 and then Reload the page.
You should notice a few numerically-named JSON files.
Notice the highlighted JSON file: 4174a04d8a3f.. .json
If you select a JSON file from the networking panel, you should be able to inspect the field values and observe that the JSON file contains the contextual data for each quote.
This JSON file is requested by the example page’s javascript and the data is saved to a hidden div on the page.
The page dependencies are:
- jquery.min.js: used for dom manipulation and popup window
- forge-sha256.min.js : calculate the hash
- jsVideoUrlParse.min.js : detect if the cited URL is a media provider (YouTube, Vimeo, Soundcloud)
- Main logic: CiteIt-quote-context.js
CiteIt-quote-context.js queries your Html for the following:
<blockquote> and <q> tags that contain a “cite=url” attribute.
It then uses forge-sha256.min.js to create a hash. The hash key is:4
Having constructed a sha256 hash identifier, CiteIt-quote-context.js downloads the JSON file with that name from read.citeit.net.
CiteIt-quote-context.js then adds a hidden div#citeit_container to the bottom the the page.
It then appends the JSON content to the hidden div so the blockquote or q tag can later display it if clicked on.
Download Sample Code
So let’s go to GitHub to download the Sample Code to get started
Let’s click the green “Code“ button and select “Download Zip“.
Upload Sample Code to your Website
I’ve already got a copy of the sample code on the CiteIt.net website so for demonstration purposes, I’ll extract and rename the file to sample-123.
I’ll use my FTP client to upload this folder to the my website.
Inspect Code before Indexing
I’ll then load the page in my browser:
I notice that the page looks normal, except for the blue contextual arrows, which don’t appear because the the JSON files don’t exist yet for the quotation on this URL.
Submit URL to be Indexed
The contextual JSON file can be created by clicking on the “New Submission” link in the footer.
Submit the url of a page that contains the CiteIt.net javascript libraries and a quote tagged with a <blockquote cite=url> or <q cite=url> tag.
Inspect Code after Indexing
Now that we have submitted the URL for indexing, we can reload the cited page to view the contextual data.
Saving JSON Files locally
The sample code saves a copy of the JSON files to a local folder, but points the reader to the read.citeit.net CDN. This is done to simplify the deployment process but a local configuration can be setup by a knowledgeable developer.
Let’s go back to the FTP client and open the CiteIt.net_json folder. We can see the JSON files and you should observe that the filenames of your JSON files are different because the URL of your site is different.5
Footnotes
It is possible to run CiteIt.net’s expanding quotations on a local server by running your own instance of the web service which has access to your private pages.↩
Other browsers have different Developer Tools which enable similar functionality.↩
You may have to expand the list of options if you window is narrow.↩
The protocols are filtered out of the URLs so that sites can change the protocol (from http to https)↩
The filename is determined by a hash of the hashkey.↩
CiteIt.net Releases Version 0.4 of Webservice
In a previous blog post, I asked “What Bugs Would Bill Gates Find in my Spec?“
If Gates were looking for problems, the first thing he might do is look for Unicode bugs that prevent a computer from matching a citing quote with a source quote.
So, This weekend, I put together a new version of the webservice that I hope reduces the number missed quotes.
The key change involves the hashing mechanism, which previously excluded characters on an ad/hoc basis.
The new system systematically screens all incoming quotes and urls against a list of unicode code points.
The implementation of this is found in the client javascript and server python code.
# Remove the following Unicode code points from Hash
TEXT_ESCAPE_CODE_POINTS = set ( [
2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 39
, 96, 160, 173, 699, 700, 701, 702, 703, 712, 713, 714, 715, 716
, 717, 718, 719, 732, 733, 750, 757, 8211, 8212, 8213, 8216, 8217
, 8219, 8220, 8221, 8226, 8203, 8204, 8205, 65279, 8232, 8233, 133
, 5760, 6158, 8192, 8193, 8194, 8195, 8196, 8197, 8198, 8199, 8200
, 8201, 8202, 8239, 8287, 8288, 12288
])
def escape_text(str):
"""Remove characters from the string"""
str_return = ''
for char in str:
if (ord(char) not in settings.TEXT_ESCAPE_CODE_POINTS):
str_return = str_return + char
return str_return
CiteIt Examples
Example 1: Pride & Prejudice
In Chapter 5 of Pride and Prejudice, Elizabeth confesses how Darcy offended her:
I could easily forgive his pride, if he had not mortified mine.
Example 2: Tyler Cowen interviews David Wolpe
Tyler Cowen commented to David Wolpe about how social media strips away context:
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.
Example 3: Quoting the Supreme Court
In Citizens United vs FEC, Justice Anthony Kennedy expressed his concern that the valuable knowledge of corporations would be suppressed.
data-citeit-cited_audio_url=’https://s3.amazonaws.com/oyez.case-media.ogg/case_data/2008/08-205/20090909r_08-205.ogg’,
data-citeit-cited_audio_start_time=’3433′,
data-citeit-cited_transcript_url=’https://apps.oyez.org/player/#/roberts2/oral_argument_audio/22476′,
data-citeit-citing_tags=’supreme-court, supreme-court-citizens-united, justice-kennedy’,
data-citeit-cited_title=’Case 08-205, Citizens United v. The Federal Election Commission’,
data-citeit-cited_authors_names=’Anthony Kennedy’,
data-citeit-cited_authors_urls=’https://supremecourthistory.org/history-of-the-court/the-current-court/justice-anthony-kennedy/, https://www.oyez.org/justices/anthony_m_kennedy’,
data-citeit-cited_authors_twitter=’https://twitter.com/hashtag/justice%20kennedy’,
data-citeit-cited_authors-wikipedia-urls = ‘https://en.wikipedia.org/wiki/Anthony_Kennedy’
data-citeit-cited_author_wikipedia_url= ‘https://en.wikipedia.org/wiki/Supreme_Court_of_the_United_States’,
data-citeit-cited_authors_entities=’https://twitter.com/hashtag/justice%20kennedy’,
data-citeit-cited_authors_entities_urls = “https://www.supremecourt.gov/”
data-citeit-citeit_cited_work_wikipedia_url=”https://en.wikipedia.org/wiki/Citizens_United_v._FEC”
data-citeit-cited_series = ‘Oyez Supreme Court Resources’,
data-citeit-cited_eries_url = ‘https://www.oyez.org/’,
data-citeit-cited_event_date=’2009-09-09′,
data-citeit-cited_event_location=’United States Supreme Court, Washington, D.C (USA)’,
data-citeit-cited_event_lattitue=’38.890556′,
data-citeit-cited_event_longitude=’77.004444′
>The government silences a corporate objector, and those corporations may have the most knowledge of this on the subject.
Corporations have lots of knowledge about environment, transportation issues, and you are silencing them during the election.
Though there may be something to his concern, it seems minimal compared to the actual practice of how the most significant corporations “speak”.
Rather than expressing their “knowledge” in the form of a 90-minute documentary, in actual practice, most big corporate donors pay a group of political operators to set up a “front group” to develop a provocative 30-second add on an unrelated wedge issue.

reply-all podcast logo
Example 4: Reply-All: The New York City COMSTATS System
cite=”https://gimletmedia.com/shows/reply-all/o2hx34/127-the-crime-machine-part-i”
data-citeit-cited_audio_url=’https://dcs.megaphone.fm/GLT1353849859.mp3?key=9ee13f8c1681e531a9a098bdad57b7f8′,
data-citeit-cited_audio_start_time=”,
data-citeit-cited_transcript_url=’https://gimletmedia.com/shows/reply-all/o2hx34/127-the-crime-machine-part-i’,
data-citeit-citing_tags=’reply-all-podcast, police, crime, crime-history, new-york-city, comsats, jack-maple’,
data-citeit-cited_title=’The Crime Machine, Part I, Episode 127′,
data-citeit-cited_authors_names=’PJ Vogt, ‘,
data-citeit-cited_authors_twitter=’@PJVogt’,
data-citeit-cited_authors_entities=’Reply-All’,
data-citeit-cited_authors_entities_urls = “https://en.wikipedia.org/wiki/Reply_All_(podcast)”,
data-citeit-cited_series = ‘Reply-All’,
data-citeit-cited-series-url=”https://gimletmedia.com/shows/reply-all/episodes”,
data-citeit-cited-series-youtube=”https://www.youtube.com/playlist?list=PLS8aEHTqDvpInY9kslUOOK8Qj_-B91o_W”,
data-citeit-cited_event_date=’2018-10-12′
>J: The thing that was weird about the job was that Pedro’s bosses didn’t really seem to want him to pursue the actual, violent, serious crimes that he saw. What they wanted him to do instead was just to write summonses. Summonses are just the tickets that cops give out for the low-level stuff, misdemeanors. You’d give a summons to a guy drinking a beer in the street or riding his bike on the sidewalk. There was a lot of pressure to write summonses.PEDRO: One of the ones that, you know, never leave my head was it was overtime. We’re ordered to write five. And the van–
PJ: Write five like you had to–you have overtime but you gotta come back with five summons?
PEDRO: Five summonses or get dealt with. I’ll explain that later. Well, we, uh, we’re driving around and the senior guy stops and says, “All right. This is one.”
PJ: It’s really early in the morning. The streets are almost completely empty. It’s hard to even find a person, let alone somebody doing something wrong. Their boss is pointing at this man who’s just standing on the sidewalk alone, outside a store. But the van stops.
PEDRO: Some guy jumps out. And this one guy, in front of a bodega, doing absolutely nothing, they gave him a summons for blocking pedestrian traffic. You know, we were just shaking our heads like, “What did you give him?” “Blocking pedestrian traffic.” And they just start laughing. I’m like, oh wow. All right. So we move on.
PJ: Pedro says the next stop was this Mexican man who was just sitting alone on a stoop. They wrote him up for the exact same thing: Blocking pedestrian traffic.
PEDRO: And this was all night until all of us–there was like a four or five of us in the van, until everyone had five.
PJ: Pedro was so confused by what had had happened that night, he actually went home, and looked up the definition of blocking pedestrian traffic. These guys had not been blocking pedestrian traffic. This was absurd. And Pedro didn’t know it, but all over the city cops were getting pushed in the exact same way — to aggressively write summonses to people for doing seemingly nothing. I talked to another cop, this guy in Brooklyn named Edwin Raymond.
EDWIN RAYMOND: After the academy, I would run into officers that I was in the academy with. And it’d be like, “Oh, hey, what’s up? Are you still at transit?” And the third question, without fail, the third question was always, “What do they want from you guys over there?” That’s how much this is part of the culture.
Update: (July 16, 2020)
The custom Html data attributes can be read with jquery using the syntax:
<span class="pln">$</span><span class="pun">(</span><span class="str">'li[data-value]'</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
alert</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">"value"</span><span class="pun">));</span>
<span class="pun">});</span>
or
<span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'data-value'</span><span class="pun">)</span>
or
<span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
alert</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">'#my_id'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'original-title'</span><span class="pun">));</span>
<span class="pun">});</span>
Code blocks:
Creating the text version of an HTML page
When citing sources, CiteIt removes all HTML formatting before computing the 500 characters of context before and after each selection.
But although it is expedient to remove HTML tags, so as to simplify the text extraction process, it would be desirable for the text version to maintain white space and some other formatting.
Example:
Suppose you had an example series of ordered and unordered lists which mimic the “Step 3: Profit” meme:
How to get rich with a dot com company:
ul
li Sell dog food on the internet.
li ????
li Profit
A simple stripping of the formatting would remove the list styling.
It would be preferable to
- Indent the list, and
- Put each item on its own line.
- Ordered lists should start with a number and unordered lists with an asterisk.
Existing Programs:
There is an existing Java library called Boilerplate that runs on Google App Engine. It doesn’t quite do what we want, but is similar.
Do you know of a library or approach which could make it possible to create the type of text version desired?
A similar process needs to be done for other document types such as PDF and Doc.
How to Use Google Speech to Text to Generate a Transcript from a Youtube Video
Here’s how to generate transcripts with the Google Speech to Text api.
I’m providing instructions for running this on a micro Debian instance on Google Cloud Compute Engine.
Here’s how to download an interview Tyler Cowen did with Malcolm Gladwell.
1) Install YDL (The Youtube Download Library) for Commandline
The apt-get option seems to have an outdated version of ydl: (I’m using Debian)
Alternate YDL Option:
If you can’t run youtube-dl because debian has on old version, try:
sudo apt install python3-pip
sudo pip3 install --upgrade youtube-dl
2) Get the FFMeg library
sudo apt-get update
sudo apt-get install ffmpeg
3) Running the YDL Download Command
youtube-dl --extract-audio --audio-format wav --audio-quality 5 --postprocessor-args "-ac 1" https://www.youtube.com/watch?v=ehlhrqSWPbo > malcolm_gladwell.wav
4) Copy .wav file to Storage Bucket
install gcsfuse to mount bucket
gsutil cp malcolm_gladwell.wav gs://bucket_name/
5) Upload filename.wav to Speech-text API
gcloud ml speech recognize-long-running \
'gs://citeit_speech_text/malcolm-gladwell.wav' \
--include-word-time-offsets \
--language-code='en-US' \
--async
Check Job Progress
config = types.RecognitionConfig(
sample_rate_hertz=44100,
enable_word_time_offsets=True,
audio_channel_count=2,
language_code='en-US'
6) Download transcript.json
sudo pip3 install --upgrade webvtt-py
import webvtt
for caption in webvtt.read(downloads/5BXtgq0Nhsc.en.vtt'):
print(caption.text)
7) Create timings.json
8) Create a Demo Page
- Draft Algorithm to match edited transcript to auto-generated transcript with timings (view Developer Mode Console for console log)
Using the Neotext Generator
I recently completed a section of the site that allows Neotext users to generate neotexts for quotes hosted on their websites.
The process requires you to:
- Add a wordpress plugin to their site (or install the javascript code yourself).
- Create a quote using the “cite” attribute
- Submit the URL of your page into the Generator
- Reload the page to view the javascript data (json)
Here is the Resulting Text:
This is a quote from Eric Raymond’s The Cathedral and the Bazaar:
The next best thing to having good ideas is recognizing good ideas from your users. Sometimes the latter is better.
I can “neotextify” the quote by clicking on the “Neotext blockquote” button that was added to my menu bar and entering the url