Overview

Text Overlay plugin for Mirador 3 is a Mirador 3 plugin that displays selectable text overlays based on OCR or transcription.

https://github.com/dbmdz/mirador-textoverlay

A demo page is available at the following link.

https://mirador-textoverlay.netlify.app/

However, when trying to display vertical text such as Japanese, it didn’t display correctly, as shown below.

So I forked the above repository and made it possible to display vertical text as well. The source code is published in the following repository. (I hope to consider a pull request in the future.)

https://github.com/nakamura196/mirador-textoverlay

As a result, vertical text can now be displayed as shown below.

The demo page is as follows.

https://nakamura196.github.io/mirador-integration-textoverlay/?manifest=https://nakamura196.github.io/static/iiif/6722fa34-2fff-11ee-a029-0242ac1c000c/manifest_o.json&annotationState=1&canvasIndex=3

Below are notes related to the development of this module.

Manifest File Structure

This module requires IIIF manifests that satisfy the following requirements.

https://github.com/dbmdz/mirador-textoverlay#requirements-for-supported-iiif-manifests

There are several options, but I referenced the following Wellcome Collection manifest.

https://iiif.wellcomecollection.org/presentation/v2/b18035723

For each Canvas, an ALTO XML file URL is specified via seeAlso.

{
  "@id": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0003.JP2",
  "@type": "sc:Canvas",
  "label": "-",
  "thumbnail": {
    "@id": "https://iiif.wellcomecollection.org/thumbs/b18035723_0003.JP2/full/72,100/0/default.jpg",
    "@type": "dctypes:Image",
    "service": {
      "@context": "http://iiif.io/api/image/2/context.json",
      "@id": "https://iiif.wellcomecollection.org/thumbs/b18035723_0003.JP2",
      "profile": "http://iiif.io/api/image/2/level0.json",
      "protocol": "http://iiif.io/api/image",
      "width": 732,
      "height": 1024,
      "sizes": [
	{
	  "width": 72,
	  "height": 100
	},
	{
	  "width": 143,
	  "height": 200
	},
	{
	  "width": 286,
	  "height": 400
	},
	{
	  "width": 732,
	  "height": 1024
	}
      ]
    }
  },
  "seeAlso": {
    "@id": "https://api.wellcomecollection.org/text/alto/b18035723/b18035723_0003.JP2",
    "profile": "http://www.loc.gov/standards/alto/v3/alto.xsd",
    "format": "text/xml",
    "label": "METS-ALTO XML"
  },
  "height": 3372,
  "width": 2411,
  "images": [
    {
      "@id": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0003.JP2/painting/anno",
      "@type": "oa:Annotation",
      "motivation": "sc:painting",
      "resource": {
	"@id": "https://iiif.wellcomecollection.org/image/b18035723_0003.JP2/full/732,1024/0/default.jpg",
	"@type": "dctypes:Image",
	"format": "image/jpeg",
	"height": 1024,
	"width": 732,
	"service": {
	  "@context": "http://iiif.io/api/image/2/context.json",
	  "@id": "https://iiif.wellcomecollection.org/image/b18035723_0003.JP2",
	  "profile": "http://iiif.io/api/image/2/level1.json",
	  "protocol": "http://iiif.io/api/image",
	  "width": 2411,
	  "height": 3372
	}
      },
      "on": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0003.JP2"
    }
  ],
  "otherContent": [
    {
      "@id": "https://iiif.wellcomecollection.org/annotations/v2/b18035723/b18035723_0003.JP2/line",
      "@type": "sc:AnnotationList",
      "label": "Text of page  -"
    }
  ],
  "within": ""
}

Summary

Regarding the developed plugin, there are still issues that need improvement, such as times when XML file loading doesn’t complete. I hope this serves as a helpful reference for Mirador 3 plugin development, IIIF, and utilizing OCR results.