IIIF
Linking Text and image
Linking text and image
We can link our TEI digital edition...
- to local images
- images are in my computer / on my website
- 'self-contained' edition
- to IIIF images
- images stay on the library website
- 'distributed' edition
Linking text and image
Let's link our TEI digital edition to a local image
TEI → Local image
Encoding
TEI → Local image
Encoding
Local image 218r.jpg is in the same folder
in which you have your TEI XML file.
C. TEI XML source code, line 125:
<pb facs="218r.jpg" n="218r"/>
TEI → Local image
Encoding
Different (real-world) case:
the image is in a specific folder.
C. TEI XML source code, line 125:
<pb facs="data/images/single/218r.jpg" n="218r"/>
TEI → Local image
Visualization
TEI → Local image
Visualization
Click on
EVT - Edition Visualization Technology
(link D. in the seminar website)
Issue: permission from libraries
- Libraries claim copyright over photos of MS pages
- written 1000 years ago
- with texts composed 2000 years ago
Solution: IIIF
Images stay on their server
(e.g. the Bodleian Library)
and may be integrated
(e.g. in "distributed" editions)
What is IIIF?
IIIF is a framework
(a language shared between computers)
to serve images with medatata
What does IIIF stand for?
International Image Interoperability Framework
View a manuscript with IIIF
Bodleian Library MS. Bodl. 264: Mirador Viewer
https://iiif.bodleian.ox.ac.uk/iiif/mirador/2d7945ce-b71e-41c6-ad1f-8af6b92f020f
↓
- go to fol. 218r from thumbnails below
- or to Li Livres du Graunt Caam from the left menu
- other viewer
IIIF for philologists
| MS page | Manuscript |
|---|---|
| Canvas | Collection |
| Image API | Presentation API |
|
|
Source: J. Ronallo, Workshop: Shared Canvas
Canvas ← Image(s)
- One canvas may include many images, e.g.:
- new photos of same MS
- new photos taken after MS restoration
- advanced imaging (multi-spectral imaging, X-Ray, CT-scan etc.)
Canvas ← Annotation(s)
Canvases may include images and other "annotations"
Source: Jason Ronallo, Workshop: Shared Canvas
JSON metadata files
JSON metadata files
- Manifest: https://iiif.bodleian.ox.ac.uk/iiif/manifest/ae9f6cca-ae5c-4149-8fe4-95e6eca1f73c.json
- Canvas: https://iiif.bodleian.ox.ac.uk/iiif/canvas/699adfb3-a5da-4b09-9759-41eee3713bc3.json
- Image: https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/info.json
- Image file: https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default
JSON metadata files
Metadata → image file
| Image metadata file URL | Actual image file URL |
|---|---|
| JSON | JPG |
| https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/info.json | https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default |
| → `/info.json` | → `/full/full/0/default` |
Image API
Full image: https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default
Image API
Cropped region: https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/500,3550,3000,140/full/0/default
Image API
- Resizing, cropping etc. happens on the server
- I can ask for a specific size, region etc. of an image through an URL
- The server creates an ad hoc image and only returns that
IIIF vs HTTP
...this is impossible with
'traditional' HTTP URLs (links).
C. TEI XML source code, line 174:
<pb facs="https://www.paolomonella.it/torino2021/slides/assets/img/218r.jpg" n="218r"/>
IIIF vs HTTP
Visualization looks the same
(select page '218r http' in the menu on top)
IIIF vs HTTP
...but with 'traditional' HTTP
<pb facs="https://www.paolomonella.it/torino2021/slides/assets/img/218r.jpg" n="218r"/>
I am fetching the whole image file 218r.jpg:
- no metadata
- no manipulation
Image API
Let's manipulate an image
- Full image
- resizing (size)
- cropping (region)
- quality (color, gray...)
- rotation
Full image
Full image
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default
File formats
File formats
Full image with file extension at the end (.jpg):
File formats
...with file extension at the end (.jp2):
File formats
The server has no copy of this image in .png format, so this returns an error:
File formats
...with file extension before:
Cropping
Cropping
Full image, no cropping:
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default
Cropping
Illuminated initial:
Cropping
Cropping
Panoramic view of the city of Venice:
Cropping
First line of the rubric (Ci commence li livres du graunt Caam qui parole de la graunt Ermenie de Perſſe):
Cropping
Second line of the rubric (et deſ tartars et dŷnde. Et des granz merveille. qui ꝑ le monde ſont):
Cropping
See paragraph Region in the API documentation
Resizing
Resizing
Full size, no resizing:
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default
Resizing
Squeeze to 50 (width) x 600 (heigth):
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/50,600/0/default
Resizing
Width 600 px:
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/50,/0/default
Resizing
Height 600 px:
https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/,600/0/default
Resizing
See paragraph Size in the API documentation
Rotation
Rotation
No rotation (0°):
Rotation
Rotate 90°:
Rotation
Rotation is allowed only for multiples of 90° in this IIIF server, so 45° returns an error:
Rotation
Mirroring (with exclamation mark!):
Quality
Quality
Default:
Quality
Color (same as 'default'):
Quality
Gray:
Quality
Bitonal (black and white):
Quality
See paragraph Quality in the API documentation
Linking text and image
Let's link our TEI digital edition to a IIIF image
TEI → IIIF image
Manifest
Source: Jason Ronallo, Workshop: Shared Canvas
TEI → IIIF image
Manifest
Linking <msDesc/> (MS description, in the TEI header) to a whole IIIF JSON manifest (metadata about collection of all images of a MS):
<msDesc facs="https://iiif.bodleian.ox.ac.uk/iiif/manifest/ae9f6cca-ae5c-4149-8fe4-95e6eca1f73c.json">
TEI → IIIF image
Page
TEI → IIIF image
Page
Linking <pb/> to a canvas JSON (metadata):
<pb facs="https://iiif.bodleian.ox.ac.uk/iiif/canvas/699adfb3-a5da-4b09-9759-41eee3713bc3.json" n="218r"/>
TEI → IIIF image
Page
Linking <pb/>
to an image JSON
(metadata, note info.json at the end)
<pb facs="https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/info.json" n="218r"/>
TEI → IIIF image
Page
Linking <pb/>
to an actual image
(note full/full/0/default at the end)
<pb facs="https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/full/full/0/default" n="218r"/>
TEI → IIIF image
Line
Cropped region: https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/500,3550,3000,140/full/0/default
TEI → IIIF image
Line
Linking <lb/> to a region of an image file, first line of the rubric (Ci commence li livres du Grant Caam...):
<lb n="1" facs="https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/500,3550,3000,140/full/0/default"/>
TEI → IIIF image
Line
...second line of the rubric (et deſ tartars et dŷnde...):
<lb n="218r.2" facs="https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/530,3670,2400,140/full/0/default"/>
TEI → IIIF image
Figure
TEI → IIIF image
Figure
<figure>
<figDesc>Illumination: view of the city of Venice</figDesc>
<graphic url="https://iiif.bodleian.ox.ac.uk/iiif/image/699adfb3-a5da-4b09-9759-41eee3713bc3/510,550,3580,3200/full/0/default"/>
</figure>
Material culture
Not only MSS: The Visionary Cross
Learning materials
- IIIF documentation: Image API for individual images; Presentation API for collections
- DARTH: Hacking Mirador 2016
- Tiziana Mancinelli: Bologna 2020
- Paolo Monella: Bologna 2019; AIUCD 2020 (with R. Rosselli Del Turco); Venezia 2020; Torino 2021; contacts