IIIF and Digital Editions


Jeffrey C. Witt (Loyola University Maryland)
https://jeffreycwitt.com | jcwitt@loyola.edu
@jeffreycwitt


July 21, 2022, University of Pittsburgh, Pittsburgh, PA

Slide Deck: http://jeffreycwitt.com/slides/2022-07-21-iiif-and-digital-editions

https://creativecommons.org/licenses/by-nc-sa/4.0/

# Outline 1. Reflection 1. IIIF: a bird's eye view 1. Exploration and Discussion 1. Examples 1. Questions
## Reflection * What are the theoretical reasons we might care about images when constructing an edition? * How do images help further the goals of the edition? * What are some ways you imagine images being displayed alongside or integrated with other parts of the edition?
### Transparency and Repeatability "[W]hen I talk about a critical text, I am not referring to the reconstruction of a lost archetype, but to the construction of a new, well-informed text that can help readers understand the relationships between extant witnesses; a text that functions as a gateway to the others." Bordalejo, B., “Well-Behaved Variants Seldom Make the Apparatus: Stemmata and Apparatus in Digital Research”. Digital Medievalist, 14:2 (2021): https://doi.org/10.16995/dm.8065, section 68
### Transparency and Repeatability "The printed book has a tendency to be image-hostile. The printing of a typographic interpretation was, for economical reasons, originally favored over a facsimile. The book printing encourages the selection and limitation over the desire for the widest and most complete edition...." "...The elements of the Apparatus, for example, that in the edition are also placed on the page, should document its relation to tradition and its critical execution and make the editorial decisions transparent. It is fundamentally an aspiration for completeness. A more precise examination of editorial practices reveals, however, that this aspiration often becomes sacrificed, when the apparatus threatens to 'overgrow' the text...." (continued on next slide)
### Transparency and Repeatability "...The printed edition all in all -- even in the scientific discussion of its presentation -- always exists in a tense relationship between the "clear text" and the suggestive program of the critical, or: A critque demonstrating a 'tangled mass'...." "...Digital media are image-friendly. They reward the primary visual rendering of the tradition. Digital editions can limit themselves to typographical text rendering. But since this runs counter to an obvious growing expectation of the user, each digital edition must with a scientific aspiration given reasons, when applicable, why they avoid their fundamental promise of transparency by not providing visual evidence...." Sahle, Patrick, “Zwischen Mediengebundenheit Und Transmedialisierung.” Editio 24 (2010): 23–36. https://doi.org/10.1515/9783110223163.0.23.

The Critical Edition as Rolodex or Layered Onion

### Thinking about UX design: #### Recognizing Friction
What are some examples of transparency "friction"?
What are some ways you can imagine displaying companion images that reduce transparency "friction"?
### Reducing Friction

--- #### Immediacy of access Reducing clicks, page loads, environment shifts --- #### Granularity of focus Being able to recognize the user's specific area of focus and being able to deliver them related images at equally granular levels.
## IIIF: a bird's eye view
### API as a Contract A contract between image data **suppliers** and UI **implementors** who "present" image data to downstream **users/readers**
### IIIF Image API
#### Lack of standards prevents interoperability What does 10,20,300,500 mean? Does it mean 10 pixels wide and 20 pixels high, starting at x=300 and y=500? Or does it mean 300 pixels wide, 500 pixels high, starting at x=10 and y=20?

There is no "IIIF Image Server"

There are MANY IIIF compliant servers

IIIF Image API

{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format} https://iiif.io/api/image/3.0/#4-image-requests
### Activity 1 Let's take the following base url: https://ids.lib.harvard.edu/ids/iiif/47174896/ ![image](https://ids.lib.harvard.edu/ids/iiif/47174896/full/,100/0/default.jpg) ![image](https://ids.lib.harvard.edu/ids/iiif/47174896/full/,100/0/gray.jpg) ![image](https://ids.lib.harvard.edu/ids/iiif/47174896/full/,100/0/bitonal.jpg) How could we modify this url so that it shows us a picture that is... ...is 512px wide...is upside down...gray scale...has a format of png For help, consult the [IIIF Image API documentation](https://iiif.io/api/image/3.0/) You can also play around with a controlled experience [here](https://www.learniiif.org/image-api/playground):
### IIIF Presentation API (version 2.1.0)

Video Overview of the Manifest and Canvas

### Activity 2: Inspect a Manifest Open this manifest [https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json](https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json) If your browser doesn't already have a json formatter, consider installing [this extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) 1. Can you find the label of the entire "manifest" 2. Can you find the first label of the first "canvas"? 3. Can you find the image identifier of the 2nd canvas (used by the viewer to construct a IIIF Url and display the image) 4. Does it have any ranges? Can you find the first "canvas" listed in the first range? If needed, use the [API docs](https://iiif.io/api/presentation/2.1/) to help yourself navigate the manifest.
## In Sum
### Lots of existing training material https://iiif.io/guides/ https://training.iiif.io/
## Exploration and Discussion: ### Using IIIF as part of your digital edition
### Activity 3 #### Creating a path through a text with connected images 1. Explore the "Exhibit" I made: https://www.exhibit.so/exhibits/YL8tIbs1EmqWFl4c5zW1 * Could this be a useful way to pair text and images together? 2. Duplicate the "Exhibit" I made to experiment with your own "Exhibit" 3. Or make your own "Exhibit" 4. Find a manifest (perhaps with a text you care about) * See the next slide for example manifests and places to find additional manifests 5. Make an "Exhibit", guiding the user though parts of the manuscript or text * https://www.exhibit.so/exhibits/create
* List of Demo Manifests * https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json * https://iiif.harvardartmuseums.org/manifests/object/299843 * https://media.nga.gov/public/manifests/nga_highlights.json * https://data.ucd.ie/api/img/manifests/ucdlib:33064 * https://wellcomelibrary.org/iiif/b18035723/manifest * https://demos.biblissima.fr/iiif/metadata/florus-dispersus/manifest.json * https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json * https://wellcomelibrary.org/iiif/collection/b18031511 * https://gallica.bnf.fr/iiif/ark:/12148/btv1b10022508f/manifest.json * https://manifests.britishart.yale.edu/Osbornfa1 * https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json * https://iiif.durham.ac.uk/manifests/trifle/32150/t1/m4/q7/t1m4q77fr328/manifest * https://scta.info/iiif/graciliscommentary/lon/manifest * https://scta.info/iiif/plaoulcommentary/sorb/manifest * https://scta.info/iiif/plaoulcommentary/svict/manifest * Good places to search for manifests: * https://e-codices.unifr.ch/en * https://portail.biblissima.fr/en/
### Activity 3: Discussion * What works well here? * What are the limitations?
### Activity 4 #### Create parallel views of related witnesses 1. Find two or more manifests you want to compare (perhaps with texts you care about) 2. Load them into the IIIF Viewer known as Mirador and open to the places you want to compare. * You can load them here: https://mirador.scta.info or https://mirador-dev.netlify.app/__tests__/integration/mirador/ * For more on Mirador see: https://projectmirador.org/ 3. Experiment with some manifests that use "ranges" to help you navigate and bring users to the same point in two witnesses. * For example: * https://scta.info/iiif/graciliscommentary/sorb/manifest * https://scta.info/iiif/graciliscommentary/svict/manifest * or * https://scta.info/iiif/rothwellcommentary/gks1363/manifest * https://scta.info/iiif/rothwellcommentary/penn/manifest * https://scta.info/iiif/rothwellcommentary/wettf15/manifest (Continued on next slide)
### Activity 4 4) Look into customizing Mirador so that it automatically constructs the "view" you want to present to end users * Consider this set up: https://codepen.io/jeffreycwitt/pen/vYRGdeL * Let's try to make a couple of simple changes. * Try changing the manifests and canvases that Mirador automatically opens up to * Try customizing Mirador to auto-open a third or fourth canvas in the same or another manifest * Can you change the "theme" of the Mirador instance? * https://github.com/ProjectMirador/mirador/wiki/M3-Theming-Mirador * See full list of customization properties: https://github.com/ProjectMirador/mirador/blob/master/src/config/settings.js
### Activity 4: Discussion * What works well here? * What are the limitations?
### Activity 5 #### View parallel witnesses at granular levels * Explore the following code-pen * [https://codepen.io/jeffreycwitt/pen/mdXNdRR](https://codepen.io/jeffreycwitt/pen/mdXNdRR) * Click on the images to toggle between manuscript witnesses at granular coordinate regions * Inspect the javascript * What kind of data needs to be collected to create this view? * What kind of data structure is being used here? * How is that information being transformed to be used in a IIIF Image URL? * Can you change the images and coordinates with other IIIF compliant images? * Try inspecting a manifest, find a iiif image url, and then modify the json data object accordingly.
### Activity 5: Discussion * What works well here? * What are the limitations?
## Examples
### Example 1 #### Variations Integrating Line Coordinates with Text
### Example 2 #### Text Entity (e.g. paragraph, quotation, reference, etc) image display across witnesses and the corpus
#### Data Modelling
# Questions/Discussion