Responsively embed DocumentCloud notes
HTML JavaScript CSS Ruby
Latest commit d0578b2 Feb 22, 2017 @reefdog reefdog Update loader example

DocumentCloud Notes

This project is a part of DocumentCloud.

DocumentCloud Notes are a minimalist and responsive way to display a highlighted region of an image.

Notes are represented as blob of JSON (and previously, wrapped in a dc.embed.noteCallback() function):

  "id": 176629,
  "page": 1,
  "title": "The UN Logo",
  "content": "The United Nations (UN) is an intergovernmental organization established on 24 October 1945 to promote international co-operation. A replacement for the ineffective League of Nations, the organization was created following the Second World War to prevent another such conflict. At its founding, the UN had 51 member states; there are now 193. (Excerpted from \u003ca href=\"\"\u003eWikipedia\u003c/a\u003e)",
  "access": "public",
  "location": {"image":"892,482,942,55"},
  "image_url": "{page}-{size}.gif",
  "published_url": "",

Notes can then be embedded with three things: a target DIV, the note JavaScript code, and an invocation to load the note resource:

  <div id="DC-note-175279" class="DC-note-container"></div>
  <script src="//"></script>