Paolo Monella - Fabio Cusimano Linking Text and image: TEI XML and IIIF

1. Details

1. Dettagli

On Wednesday July 3, 2019 Paolo Monella and Fabio Cusimano led a workshop entitled Linking Text and image: TEI XML and IIIF in the framework of the Summer School ReIResources: Sharing Resources in a Networked Digital Ecosystem (Bologna, Italy July 3-5) organized by ReIReS (Research Infrastructure on Religious Studies) and Fscire (Fondazione per le scienze religiose) Giovanni XXIII in partnership with AIUCD (Associazione per l'Informatica Umanistica e la Cultura Digitale) and Veneranda Biblioteca Ambrosiana.

Paolo Monella led part 1 of the workshop (on TEI XML); F. Cusimano led part 2 (on IIIF).

Mercoledì 3 luglio 2019 Paolo Monella e Fabio Cusimano hanno condotto un workshop intitolato Linking Text and image: TEI XML and IIIF nel contesto della summer school ReIResources: Sharing Resources in a Networked Digital Ecosystem (Bologna, 3-5 luglio) organizzata da ReIReS (Research Infrastructure on Religious Studies) e Fscire (Fondazione per le scienze religiose) Giovanni XXIII in partnership con AIUCD (Associazione per l'Informatica Umanistica e la Cultura Digitale) e Veneranda Biblioteca Ambrosiana.

Paolo Monella ha guidato la parte 1 del workshop (su TEI XML); F. Cusimano, la parte 2 (su IIIF).

2. Abstract

Part 1 (TEI XML)

Parte 1 (TEI XML)

In the first part of the workshop, led by Paolo Monella and centered on digital textual modelling and TEI XML, students will create a digital (formal, machine-actionable) model of a portion of a text from a medieval manuscript, both gaining hands-on experience and reflecting on the methodological and theoretical foundations and issues of textual modelling.

They will follow a inductive path, moving from the elementary structures of the computer (a sequence of binary states, "on/off", "yes/no", often represented by "0" and "1") to binary and decimal numbers and charsets (ASCII and Unicode).

At this point, the hands-on experience will start: students will create their own textual markup language based on symbols of their choice and will be asked to reflect on the theoretical and methodological issues arising from inline markup.

They will then be introduced to the SGML/XML syntax and to the TEI XML vocabulary and will encode a brief textual portion taken from a medieval manuscript, based on its digital images and using the TEI module for the transcription of primary sources.

The students will then be presented, and will practice, two alternative strategies for combining TEI XML, the current standard for scholarly text encoding, with IIIF, the rising standard for online image metadata and annotation:

1. the first approach consists in linking to the digital images of the manuscript from within the TEI XML source, for example with the TEI attribute @facs;
2. with the second approach, the whole TEI XML transcription is included in the IIIF metadata as an "Annotation".

This will constitute a bridge with the second part of the workshop, led by Fabio Cusimano, focussed on IIIF.

Nella prima parte del workshop, condotta da Paolo Monella e centrata sulla modellizzazione digitale del testo e su TEI XML, gli studenti creeranno un modello (formale, machine-actionable) di una porzione di testo tratto da un manoscritto medievale, da un lato ottenendo esperienza diretta e dall'altro riflettendo sulle basi teorico-metodologiche e sulle questioni aperte della modellizzazione del testo.

I corsisti saranno accompagnati in un percorso induttivo e laboratoriale che partirà dalle strutture elementari del funzionamento del computer (una sequenza di stati binari, "aceso/spento", "sì/no", spesso rappresentati con "0" ed "1"), fino ai numeri binari, a quelli decimali, ai CharSet (tabelle di caratteri come ASCII o Unicode).

A questo punto, inizierà l'esperienza diretta: gli studenti creeranno un loro linguaggio di markup basato su simboli scelti da loro, e saranno portati a riflettere sulle questioni teoriche e metodologiche legate all'inline markup.

Saranno dunque introdotte la sintassi SGML/XML e il vocabolario TEI XML. Gli studenti codificheranno una breve porzione testuale tratta da un manoscritto medievale, partendo dalle sue riproduzioni digitali e usando il modulo TEI per la trascrizione delle fonti testuali.

Infine, si presenteranno agli studenti due strategie alternative di integrazione tra TEI XML (lo standard attuale per la codifica testuale nel mondo della ricerca umanistica) e IIIF (lo standard emergente per la metadatazione e l'annotazione di immagini nel Web):

1. il primo approccio consiste nel creare nel codice TEI XML (ad esempio tramite l'attributo TEI @facs) link che puntino alle immagini digitali del manoscritto;
2. col secondo approccio, l'intera trascrizione TEI XML è incusa all'interno dei metadati IIIF come "Annotation".

Gli studenti praticheranno entrambe le strategie. Ciò costituirà un ponte verso la seconda parte del workshop, condotta da Fabio Cusimano e centrata su IIIF.

Part 2 (IIIF)

Parte 2 (IIIF)

The second part of the workshop will be focused on digitization good practices, digital library design and IIIF (International Image Interoperability Framework).

Fabio Cusimano will introduce these topics as tiles of a complex mosaic, starting from a real-life case study: the on-going digitization experience at the Veneranda Biblioteca Ambrosiana in Milan.

Then, the students will be presented the IIIF Web-based approach as a way to literally unlock digital collections thanks to LD (Linked Data). From the concept of the capsa librarum, or of the bibliotheca – as the etymology of the word itself suggests – to the open and freely accessible library in the digital dimension.

3. Workshop plan

3. Programma del workshop

4. Materials

4. Materiali

4.1 Framasoft shared pad

4.1 Pad condiviso Framasoft

1. Framasoft pad

1. Pad condiviso

4.2 From digital textual modelling to TEI XML

4.2 Dalla modellizzazione testuale digitale a TEI XML

1. Example of TEI XML encoding of lines 1-5 of folio 13v of manuscript Ambr. D 23 sup. in TEI XML:
   1. Digital facsimile
   2. TEI XML transcription
2. Let's encode lines 3-14 of folio 13r of manuscript Ambr. D 23 sup. in TEI XML:
   1. Template file to start from
   2. Digital facsimile of the page
   3. Plain text transcription
   4. Complete TEI XML transcription
3. Codifichiamo le righe 3-14 del folio 13r del manoscritto Ambr. D 23 sup. in TEI XML
   1. File template da cui partire
   2. Riproduzione digitale della pagina
   3. Trascrizione

4.3 Linking TEI and IIIF: TEI 2 IIIF

4.3 Collegare TEI e IIIF: TEI 2 IIIF

1. Linking (from within TEI) to a static image:

   <pb n="13r" facs="13r.jpg"/>

2. OxGarage: converting TEI XML to HTML for visualization. Instructions:
   1. Left: Convert from → Documents → TEI P5 XML Document
   2. Right: Convert to → xHTML
   3. Left: Select file to convert → Button Browse/Sfoglia → select and upload your TEI XML file (mytrascription.xml)
   4. Right: Upload images → → Button Browse/Sfoglia → select and upload the image with the manuscript page facsimile
   5. Bottom, center: click on button Convert
   6. In a few seconds, a download dialog window appears → click Save/Salva to save the HTML file mytranscription.html
   7. Open the downloaded HTML file (double click; your default browser will open it)
3. Linking (from within TEI) to a whole IIIF JSON manifest:

   <pb n="13r" facs="http://213.21.172.53/manifests/public/0b002711800e7d6d.json"/>

4. Linking (from within TEI) to a specific canvas (folio) within the IIIF JSON manifest:

   <pb n="13r" facs="http://213.21.172.53/manifests/public/0b002711800e7d6d.json#/sequences/0/canvases/35"/>

4.4 Linking TEI and IIIF: IIIF 2 TEI

4.4 Collegare TEI e IIIF: IIIF 2 TEI

4.4.1 Workshop activities

1. Mirador:
   • Visualize an annotation
   • Create an annotation
2. Hacking the IIIF JSON code
   • Visualize (read) an annotation
   • Create (edit) an annotation

4.4.2 Hacking the IIIF JSON code: visualize (read) an annotation

1. IIIF link to be visualized with Mirador (MS Ambr. D 23 sup)
   • Folio 13v (IIIF JSON Annotation already published): scroll right to 036_D23sup_c.13v
   • Folio 13r (the page we transcribed): scroll right to 035_D23sup_c.13r

   

2. IIIF manifest (JSON file).
   • path to annotationlist on page 13v: [Collapse all] sequences / 0 / canvases / 35 / otherContent / 0 / @id (or find / control-F "otherContent")

   

   

3. IIIF annotationList on page 13v (JSON file).
   • Path to actual transcription: [Collapse all] resources / 0 / resource

   

4.4.3 Annotation types

Annotation including plain text (current annotation in our annotationList):

"resource":{
    "@id": "http://example.org/iiif/book1/res/comment1.html"
    "@type":	"cnt:ContentAsText"
    "format":	"text/plain"
    "chars":	"Cuius describtio per prouincias et gentes haec est: Lybia, Cyrinaica et<br/><br/>Pentapolis post Aegyptum in parte Affricae prima est. Haec incipit a<br/><br/>ciuitate Parethonio et montibus Catabathmon, inde secundo mari usque ad<br/><br/>aras Philinorum extenditur."
  }

Annotation linking to an HTML page:

"resource":{
    "@id": "http://www1.unipa.it/paolo.monella/reires2019/code/d23sup13r/transcription.html",
    "@type": "dctypes:Text",
    "format": "text/html"
  }

Annotation linking to a (TEI) XML file:

"resource": {
        "@id": "http://www1.unipa.it/paolo.monella/reires2019/code/d23sup13r/transcription.xml",
        "@type": "dctypes:Text",
        "format": "application/tei+xml"
      }

4.4.4 Hacking the IIIF JSON code: create (edit) an annotation

1. Open the annotationList

   

2. If necessary, control-U or right click / View source code

   

3. Select all the JSON annotationList source code (control-A or right click / Select all) and copy it

   

4. Open the online JSON-editor

   

5. Paste the JSON annotationList source code into the left window of the JSON-editor
6. Click on Format JSON
7. At the top of the right window, select View
8. Edit the code in the left window. After each edit, click on Format JSON to get a clearer view of the code in the right window

5. Final project

5. Progetto finale

1. Create a new folder project
2. Put your TEI XML transcription of folio 13r in that folder. If the OxGarage conversion to HTML (see below) does not work, download the complete TEI XML transcription and use it instead
3. Download the Digital facsimile of folio 13r to the same folder
4. Convert your TEI XML file to HTML with OxGarage. Instructions:
   1. Left: Convert from → Documents → TEI P5 XML Document
   2. Right: Convert to → xHTML
   3. Left: Select file to convert → Button Browse/Sfoglia → select and upload your TEI XML file (mytrascription.xml)
   4. Right: Upload images → → Button Browse/Sfoglia → select and upload the image with the manuscript page facsimile
   5. Bottom, center: click on button Convert
   6. In a few seconds, a download dialog window appears → click Save/Salva to save the HTML file mytranscription.html
   7. Open the downloaded HTML file (double click; your default browser will open it)
5. Save the downloaded HTML file to the project folder
6. Open the HTML file with Sublime and edit it as you want (examples: add a new <div> with the translation or any note; change the title; add the names of the curators or a link to the ReIReS website)
7. Create a foglio.css file in the same folder
8. Connect the HTML file with the foglio.css file by inserting <link rel="stylesheet" href="../indice/stile/foglio.css" type="text/css" /> in the <head> of the HTML file
9. Edit the foglio.css as you want to change the HTML page style

6. Useful links

6. Link utili

6.1 XML editors: making writing XML code easier

1. Oxygen XML Editor: professional, standard in TEI community, paid (with trial period), complete until HTML transformation professionale, standard nella comunità TEI, a pagamento (con periodo di prova), completo fino alla trasformazione in HTML
2. XML Copy Editor: open source, free, installation open source, gratuito, da installare
3. Online XML Editor: for this workshop only, no installation solo per questo workshop, nessuna installazione

6.2 Tools to process TEI XML for visualization

1. Oxygen XML Editor (see above)
2. EVT (Edition Visualization Technology)
3. OxGarage: convert TEI XML to HTML for visualization
4. TEI Critical Apparatus Toolbox
   1. Display parallel versions: synoptic visualization of textual variants visualizzazione sinottica delle varianti testuali
   2. Check your encoding: simple visualization visualizzazione

6.3 Guidelines, specifications and help

1. TEI
   1. TEI Official website
   2. TEI P5 Guidelines (go to Read online)
   3. TEI-L mailing list
2. IIIF official website
3. Drop us an email: fcusimano at ambrosiana.it and

6.4 JSON and IIIF resources

1. Online JSON editors
   1. CuriousConcept
   2. JSON-editor
2. Hacking Mirador
   1. Darth Crimson Mirador viewer
   2. Oxford Bodleian Libraries IIIF manifest editor: click on Open manifest and paste http://213.21.172.53/manifests/public/0b002711800e7d6d.json
   3. Annotation extractor: click on Load manifest and paste http://213.21.172.53/manifests/public/0b002711800e7d6d.json

7. Suggested readings

7. Suggerimenti bibliografici

7.1 DH and TEI XML

7.2 DH e TEI XML

• Orlandi, T. (2010), Informatica testuale. Teoria e prassi, Laterza, Roma.
• Pierazzo, E. (2015), Digital Scholarly Editing: Theories, Models and Methods, Ashgate, Farnham (Surrey, UK) and Burlington (VT, USA), https://hal.archives-ouvertes.fr/hal-01182162/document
• Stella, F. (2018), Testi letterari e analisi digitale, Carocci.

7.2 IIIF

• F. Cusimano, Due esempi di “buone pratiche” nell’uso dei metadati XML. Un’efficace “disseminazione” dei contenuti digitalizzati, C.R.E.L.E.B.- Università Cattolica, Milano, Edizioni CUSL, Milano 2014 (Minima Bibliographica, 19), ISBN: 978-88-8132-7058 https://centridiricerca.unicatt.it/creleb-Cusimano.pdf.
• L. Magnuson, Store and display high resolution images with the International Image Interoperability Framework (IIIF), in «ACRL TechConnect Blog», February 25, 2016, https://acrl.ala.org/techconnect/post/store-and-display-high-resolution-images-with-the-international-image-interoperability-framework-iiif/
• A. Salarelli, International Image Interoperability Framework (IIIF): una panoramica, in «JLIS.it», 8, 1 (January 2017), pp. 50-66, DOI: http://dx.doi.org/10.4403/jlis.it-12090
• F. Cusimano, Biblioteche di conservazione & Data Curation: dal Custos catalogi al Digital Librarian. Il caso della Veneranda Biblioteca Ambrosiana, in «JLIS.it», 10, 1 (January 2019), pp. 125−139. DOI: http://dx.doi.org/10.4403/jlis.it-12513