Overview
I created a sample app that loads TEI/XML files, displays images with Mirador, and displays text with CETEIcean. You can try it from the following URL.
Demo Site
https://nakamura196.github.io/ceteicean-mirador/
Background
I have previously developed applications that provide similar functionality.
- Implementation example using Next.js
- Implementation example using XSLT
This time, I introduce an approach using only HTML and plain JavaScript.
Target Data
The target is the following Koui Genji Monogatari Text DB.
https://kouigenjimonogatari.github.io/
Implementation
The source code is published in the following repository.
https://github.com/nakamura196/ceteicean-mirador
Implementation Highlights
1. Processing pb Tags Using CETEIcean’s behaviors
The following code defines the click behavior of pb tags using CETEIcean’s behaviors.
2. Page Navigation in Mirador
When a pb tag is clicked, the Canvas URI is obtained from the TEI/XML file, and Mirador page navigation is executed.
3. Using CETEIcean’s CSS
Text styling uses the CSS provided by CETEIcean.
Summary
This article introduced one approach to developing TEI/XML viewers using HTML and plain JavaScript.
I hope you will consider various methods, including using frameworks like Next.js or utilizing XSLT without a viewer, while referencing this approach.