Annotating a Will: A Digital Process


One of the projects that Ryan Smith chose as part of our Digital History course was the collaborative transcription and annotation of a historic Richmond will . . . describing it thusly1 in the syllabus.

Collaborative annotation:
To further put our emphasis on collaboration into practice, we will annotate [explain, contextualize, add to] together one document, the last will and testament of Isaac Judah, an early Richmond resident. This assignment will require student research, online or in person, to help explain and contextualize this document for a public audience. What software platform should we use to markup the item? How should we handle the will’s transcription? Who are the parties mentioned in the will? Where are the locations? What historical lessons can it teach readers?

The quality and quantity of each students’ research/commentary will count as 10% of the final course grade. The will can be found on our course website, in the Google Drive folder. The transcription file is: https://docs.google.com/document/d/1ghG-oyFvyza-zRUE4ZJf0_HF4_D5dey4Bv4BmM5JYFQ/edit. Annotations can begin as soon as the course begins and should be finalized by February 23 March 30. If the annotation is fruitful, we may post this result for public consumption.



We ended up with quite a bit of work . . . in fact so much work that displaying it via the Google Doc didn’t really work. It remains an interesting way to look at the conversation and investigate expressions of thinking-like-a-historian. We also have interesting data to parse out via Draftback, comments, and the revision history. You can see one of the sectional playback options from Draftback below. So lots of fodder for a next-step product but clearly a pressing need for something else. It’s interesting to end up with such a clear and obvious decision that Google Docs wasn’t going to cut it.

I had recommended Google Docs as the path for this project for a couple of reasons (ease of use for one) but also thought it might be ok for the end product. It did well as a place for pointing and things and having a certain level of conversation. It also served very well in the transcription process. It began to struggle as people pointed to other resources via URLs and started to expand the images involved. These things started feeling uglier and messier. There are also some ideas around what to select when commenting and the use of highlighting that might be conveyed a bit more prior to annotation.


The excerpt above isn’t the most powerful example of this possibility but it does hint at some really interesting options.

The Goal

My goal was now to figure a way to keep the will as a central element in the exploration and organization of the additional information. Often the original text ends up lost and I wanted it to remain central to anything we built. I wanted the annotations to be contextually displayed to deal with the scale.

Long term, I was thinking of ways to make this more approachable as a tool for annotating other documents. I also wanted to do the display mainly with javascript and leave the editing of larger details to WordPress and use the REST API for access. I think there are some paths. I’ll be thinking about it more.

The Result

I’m pretty happy with where we’ve ended up for a quick prototype. It’s been a partial attention project for about a week and something I’ve never quite done before. Ryan did some really fast and substantial work on consolidating and writing up all the research.

This is an example of clicking on ‘Maria’ which loads the WordPress page on Maria via JSON and highlights all instances of Maria in the document. It also underlines all the other names in the document.

I did some stuff modifying some Codepen CSS for family trees but it ends up being a bit of a mess because of the width needed to display so many kids. It’s just not something that’ll do well in mobile scenarios. Ryan did the actual work in draw.io and it’s pretty impressive.

Technical Stuff

I marked up people’s names2 using data-* attribute like so . . .

 <span class="person" data-person="isaac-h-judah">Isaac H. Judah</span> 

This is something I saw in a #30 Day Javascript Challenge demo a few months ago. I thought it was neat and figured I’d use it someday. I’ve also got the locations annotated in a similar way for later on if/when we do a bit more with mapping and places.

The rest is just javascript adding or removing stuff. You can see my attempts on codepen. I believe it’s all vanilla js except for the JSON fetcher . . . which I had already made for something else.

Various Hiccups

Initially the js clicking didn’t work in iOS. I couldn’t figure out why as it worked in Safari with the emulator. I turns out it was a CSS piece. I needed to make the cursor become a pointer like so . . .

cursor:pointer;

Anyway, that was weird and good ol’ Stackoverflow saved me hours of suffering.

Another odd but I came across was an error in Safari “can’t create duplicate variable that shadows a global property” and it broke all the javascript dependent elements . . . which is pretty much the whole site. It’s an easy fix, just rename things so the variables don’t match but it’s a weird issue.


1 ‘Thusly’ . . . I know but it sounded better than ‘as follows.’

2 Initially, I was lazy and marked the words with just first names. I knew that I would regret not doing the full name. I did regret it.

Comments on this post

  1. rksmith3 said on May 3, 2017 at 11:54 am

    Hard to describe any of this as lazy, but so much of life follows the “Initially, I was lazy and…” formulation in footnote two. I’m glad you’re still thinking about adding other annotation projects after all this.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL