60
CS7: 4
While this is the ‘HTML5 way’ to embed data, in this case study the initial prototype for the recite
application is implemented with a hack. In the code described in the Solution section below,
data is simply embedded in the document using a data URI that encodes the JSON data
supplied by Zotero. In order to work with citeproc.js, the most efficient way to store data is using
the JSON format that is used by citeproc.js, described at:
https://github.com/citation-style-language/schema/blob/master/csl-data.json
This is not usual HTML5 best practice, and subsequent versions will attempt to use more
standard approaches. To accomplish this, though, more work needs to be done to map the
JSON format to the Bibliographic ontology.
To illustrate this in a concrete way, let us take the Zotero example above, step by step.
3. The author cites the newspaper article about flooding using Zotero in Microsoft Word, using the
Zotero tool, e.g. [3] .
4. Behind the scenes, Zotero stores the citation in JSON format with complete citation data in a
Word field. In the raw save as HTML format from Word, this looks like so (truncated):
<!--[if supportFields]><span
lang=EN-GB style='mso-fareast-language:EN-GB'><span style='mso-
element:field-begin'></span>
ADDIN ZOTERO_ITEM CSL_CITATION
{"citationID":"j3o3mb0pi","properties":{&qu
ot;formattedCitation":"[2]","plainCitation":&quo
t;[2]"},"citationItems":[{"id":55,"uris&quo
t;:["http://zotero.org/users/568/items/B2F9H4I2"],"uri&quo
t;:["http://zotero.org/users/568/items/B2F9H4I2"],"itemDat
a":{"id":55,"type":"article-
newspaper","title":"GREAT
FLOOD AT TOOWOOMBA. SYDNEY,
…
<![endif]-->
5. Using the WordDown Word-to-HTML converter, the author converts the document to HTML5.
WordDown does two things:
1. For practical reasons, it keeps the JSON-formatted code as a data URI
–
so that it can be
re-used by software that understands the Zotero JSON format.
<link itemprop="url"
href="data:application/json,%A0%20%7B%22citationID%22%3A%22ptFzCvsW%22%2C
%22properties%22%3A%7B%22formattedCitation%22%3A%22%28Anon%201893%29%22%2
C%22plainCitation%22%3A%22%28Anon%201893%29%5B2%5D%22%7D%2C%22citationIte
ms%22%3A%5B%7B%22id%22%3A393%2C%22uris%22%3A%5B%22http%3A//zotero.org/use
rs/568/items/B2F9H4I2%22%5D%2C%22uri%22%3A%5B%22http%3A//zotero.org/users
/568/items/B2F9H4I2%22%5D%2C%22itemData%22%3A%7B%22id%22%3A393%2C%22type%
22%3A%22article-
newspaper%22%2C%22title%22%3A%22GREAT%20FLOOD%20AT%20TOOWOOMBA.%20SYDNEY%
2C%20Friday.%22%2C%22container-
title%22%3A%22Gippsland%20Times%22%2C%22publisher-
place%22%3A%22Vic.%22%2C%22page%22%3A%223%22%2C%22event-
place%22%3A%22Vic.%22%2C%22issued%22%3A%7B%22date-
parts%22%3A%5B%5B%221893%22%2C2%2C20%5D%5D%7D%2C%22accessed%22%3A%7B%22da
te-
parts%22%3A%5B%5B2011%2C10%2C17%5D%5D%7D%7D%7D%5D%2C%22schema%22%3A%22htt
ps%3A//github.com/citation-style-language/schema/raw/master/csl-
citation.json%22%7D%20">
2. For more general, standards-compliant use, WordDown converts the Zotero data from
JSON into Microdata, so that the complete citation information is hidden inline at the point of
citation, like this:
<span itemprop="cites" itemscope="itemscope"
itemtype="http://schema.org/ScholarlyArticle"><meta itemprop="id"
content="393"><meta itemprop="type" content="article-newspaper"><meta
itemprop="title" content="GREAT FLOOD AT TOOWOOMBA. SYDNEY,
