Introduction

When digitizing East Asian classical texts, it has become common to mark them up in XML following TEI (Text Encoding Initiative) guidelines. The “TEI Classical Text Viewer” developed by the International Institute of Humanistic Research is a convenient tool that can easily display such TEI/XML files in a browser.

This time, I customized this viewer to support displaying <gap> tags that indicate illegible sections. This article introduces the customization method.

Challenge: gap Tags Not Displayed

In digitizing classical texts, sections that cannot be read due to worm damage or deterioration are marked up with <gap> tags.

<gapreason="illegible"quantity="2"unit="character"/>

However, the standard TEI Classical Text Viewer does not display this tag appropriately. So I customized it to display black squares corresponding to the number of illegible characters, with the reason shown on mouse hover.

Customization Approach

The TEI Classical Text Viewer has the following file structure.

├├├├└──────────iaaalnpppidpppbe.._/xmmc.iiohnnnt..fmjc.lssjss←←←VCDioeenpwfeeinrgduecrnoacrtyeiol(nimbifrniailrfeiieesd)

Directly editing app.min.js would cause changes to be lost when the core is updated. Therefore, I achieved the customization by editing only app_conf.js, maintaining compatibility with the core.

Implementation

1. DOM Monitoring with MutationObserver

The TEI Classical Text Viewer parses XML and converts it to DOM. To process <gap> tags after this conversion, MutationObserver is used to monitor DOM changes.

c}d}o)o)n;c;MsSuotm}tmci}nu)aeofiot;rnntbatts(ostm}.tboreiu)oaobrot;bdbdsDvnasdoyeOesti}eEdRrMr.ifrvyevfoveRsec=on(ineurhr.npntsl.anEaorgLutoneaddoil)bgwcdecbstsehe.eot{esM(dnsde=rumNosynvwtuodG_edeiatdearro(ttaeTpe(cbhitsyEs'uooi.pluDmdMnofeelOeyuOnomtMnRtbr=eCteas=E=no.ste>a=tnguircstelov{hN(ettne(onnE,Orndotlb(oedLe{smd.eomeueE)aecrtL;dnhva=Eetiet>MdBlriE'ydo{N,ILnTdis_(sN't=Ob:>D=oE>dt{)yr{_u{ree,suslutb't)r;ee:true});

2. Processing gap Tags

When a <gap> tag is detected, black squares are displayed according to the quantity attribute value, and the reason attribute is set as a tooltip.

f}unctcg}ioa)onp;nsst.igcccgc}ci}ggpffaoooao;ofaargpnnnpnnppoarS(.GssGs.Tss(..cpEkgdettettot'''''trgssesaiaatneoidwocleattscpptqrepxlrlaomaorapyys=h.avuerlttelmrinses.llG(idsaaaaaCiaeamtctaoseeacgfaelnstcopsgg'te'sne..poattutoeenoie:el:oTtccEnpaa.einhtsnb'dlneAoultlsgstboeeMl:''e'Txtlrea=reay=llntaeW:dLettosmi>etpfadttp''o'ox)rroena.Pr=gcei:Dr':stirne{dgroakr=n=amOt{b=tryaomppg'mm''=u=s.pca.s=ps{IadiCt'(qpPeargqllgatare#'currstseua(lemtne(3hoeoosteta\cJedaeca'3enrccerIArueag'gdest3ltyeedinte2hpi,e'loi'paSssbtts5oab',lnt;'iess=u(rAlnl,eMl;nleetgif0deedaeeedd'eabo'es''p'rc)tspur.re,,[,)tr.tr;rorugeteler{reee(hpaaeAt't'eebsalu;Araeoslrteqtlno(ntau(s]n';rsaq)Tgionueabntaxpu'int,t)ttr)eyie;.tag'ysaq)opu;n,a';n;[tdiattya'-)origi'n1a'l,-t1a0g)-;name="gap"]');

Key Point: Attribute Access Method

When the TEI Classical Text Viewer converts XML to HTML, how attributes are handled varies by element. For <gap> tags, XML attributes are preserved as-is, so they can be retrieved directly with getAttribute().

ccoonnWsWshthteenqnquuXacaMnonLtntiviatettyryttr=e=idbgguatatpope..gddneaaatttmAaaet-sst*ertaif.rboqeurutmapeanr(tte',isqteuuyras;vneetdidtaayts'a-)si;est

Checking the actual DOM structure with browser developer tools is important.

Additional Customizations

Using the same approach, the following features were also added.

Height Specification via GET Parameters

Made it possible to specify the height of the text display area via URL parameters.

index.html?height=800
cci}oofnnss(tthci}eofphinaegs(riht!dagtiomh)hscsteNu{iam==gNeh(nnpthteaVe.wraigalgeUmuhtRsetEL.VlSg=aeeelmatpuer(aenc'r)thhsBPee&yaiI&Irgndahth(mt(e's'hit()egew;ihxigttnhV_dtabo,lowud.1eyl0'o)>)c;.a0st)tiyo{lne..sheeairgchht);=heightValue+'px';

Setting the Page Title

When there are multiple <title> elements in the TEI/XML, the first title is set as the page title (by default, the last title is used).

<t/i<<ttttiliitettlSlleteeSm>ttMtm>aytip>ne=T"istulbe"<>/Stuibttliet>le<</!t-i-tlTeh>isbecomesthepagetitle

Improved Display of Bibliographic Information (sourceDesc/bibl)

To format <bibl> elements within <sourceDesc> for better readability, CSS was used to add labels to each element and display them as blocks.

......}...sssssssssooooooooouuuuuuuuurrrrrrdmrrrcccccciaccceeeeeesreeeDDDDDDpgDDDeeeeeelieeessssssansssccccccy-ccc:b......o...bbbbbbbtbbbiiiiiiltiiibbbbbboobbbllllllcmlllk:tepdin;tepiduado0idutibtnt.tibltleoe3ltleoi,,eeoi,rs{m:rs,h;::heb:erebr,fe:of:robereef{o{rceocno{tnetcneotnn:tt:e"n【"tT【:iEtd"li【etP】ou"rb;】l"if;sohnfetor-n】wt"e-;iwgefhiotgn:htt-b:woelbidog;lhdt};:}bold;}

This produces a readable display like the following:

【【【【【【TEPPCCidueaotibrllltlilleoioe】rsdNc○】h】ut○△eEmi○△rdbo○△】oen△□r】□p】○堂eA○r1i0Lo0id:b1r2a3ry△△Collection

Summary

The TEI Classical Text Viewer can be flexibly customized by editing the configuration file app_conf.js. The MutationObserver approach introduced here can also be applied to handle other TEI tags.

The customized code is published in the following repository.

Acknowledgments

I would like to express my gratitude to Dr. Kiyonori Nagasaki (International Institute of Humanistic Research) and Mr. Atsushi Honma (Felix Style) for developing and publishing the TEI Classical Text Viewer.