A Sample App Displaying Images with Mirador and Text with CETEIcean

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. ...

March 14, 2025 · 7 min · Nakamura

Developing a Viewer with Next.js + CETEIcean + React TEI Router

Overview This is a memo on developing a TEI/XML viewer combining Next.js, CETEIcean, and React TEI Router. Background CETEIcean is a JavaScript library that converts TEI/XML to HTML5. https://github.com/TEIC/CETEIcean React TEI Router is a library that enables structured display of TEI/XML using React components, based on CETEIcean. It is described as follows: https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes By combining these, I created a viewer that can customize and display TEI/XML in Next.js. ...

March 2, 2025 · 11 min · Nakamura

Editing TEI/XML Files Using XSLT

Overview This article introduces one example of how to edit TEI/XML files while using XSLT. Related In the following article, I introduced how to preview XSLT results using a VSCode extension. In this article, I introduce a simpler method for editing TEI/XML files while using XSLT, without using the above extension. Installing Extensions Install the following extensions in VSCode: Live Server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Scholarly XML https://marketplace.visualstudio.com/items?itemName=raffazizzi.sxml Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag Additionally, the following two extensions are recommended by Scholarly XML. However, since they were inconvenient in some of my use cases, I will make them optional for now. ...

January 23, 2025 · 3 min · Nakamura

Real-Time Preview of TEI/XML Using VSCode and XSLT

Overview I prototyped a real-time preview environment for TEI/XML using VSCode and XSLT, so this is a memo of the process. Behavior An example of the operation is shown below. When you edit and save a TEI/XML file, the browser display is updated. https://youtu.be/ZParCRUc5AY?si=-aHHi3bIZGWoJYnP Preparation Install the following extensions: Live Server Trigger Task on Save When a TEI/XML file is saved, Trigger Task on Save executes the XSLT transformation, and the resulting HTML file is viewed with Live Server. ...

January 15, 2025 · 8 min · Nakamura

Creating PDFs from TEI/XML of the Koui Genji Monogatari Text Database

Overview The Koui Genji Monogatari (Collated Tale of Genji) Text Database publishes text data from “Koui Genji Monogatari.” https://kouigenjimonogatari.github.io/ This time, I added PDF files like the following to the database. https://kouigenjimonogatari.github.io/output/01/main.pdf This article describes how to create such PDF files using XSLT and TeX. Cloning the Repository Clone the repository as follows. g i t c l o n e - d e p t h 1 h t t p s : / / g i t h u b . c o m / k o u i g e n j i m o n o g a t a r i / k o u i g e n j i m o n o g a t a r i . g i t h u b . i o Then install xslt3 with the following command. ...

January 14, 2025 · 9 min · Nakamura

Achieving Parallel Display of IIIF and TEI Using XSLT

Overview I had the opportunity to implement parallel display of IIIF and TEI using XSLT, so this is a memo of the process. The results can be viewed at the following link. It uses the “Koui Genji Monogatari Text DB.” https://kouigenjimonogatari.github.io/xml/xsl/01.xml Background For visualizing TEI/XML, I had previously often used CETEICean, a JavaScript library for converting TEI XML to HTML and displaying it in browsers. These efforts enabled flexible development when combined with JavaScript frameworks. ...

November 2, 2024 · 4 min · Nakamura

Customizing the LEAF Writer Editor Toolbar

Overview LEAF Writer provides buttons at the top of the screen to support tag insertion. This article introduces how to customize them. As a result, I added functionality to insert <app><lem>aaa</lem><rdg>bbb</rdg></app>. https://youtu.be/XMnRP7s2atw Editing Edit the following file: packages/cwrc-leafwriter/src/components/editorToolbar/index.tsx Features for supporting tags such as person names and place names are configured as follows. For example, the description for organization has been commented out: c o n { } { { } { } { } s , , , , t g h i o } t t t g c g d h i o t t c g d h i o t t c g d h i o t t r i c n , i o y r o r i i c n i y o r i i c n i y o r i i c n i y i o d o C i c c c s } t o p o l o s d o C t p l o s d o C t p l o s d o C t p t u e n l f o o o h ) l l e u o u a e n l l e o u a e n l l e o u a e n l l e e p : : i n n n o e p u ; e t : p r p b : : i e : r p b : : i e : r p b : : i e : m : c ( s s s w v o s : i : : : l c : : : l c : : : l c : s i ' k ! t t t C e s e p ' e i e k ' e i e k ' e i e k ' : ' s i : c o a n i S ' : b ' e ' d s n : ' i e ' d s n : ' i e ' d s n : ' i a R n o r p p n n t t e T u a n a : R t T c n a : R t T c n a : R t T c ( c e s n e o o t c S i l a ' t c t c e i a o t c e i a o t c e i a o M t a e t c s s e h o o e g A t t i t ! a t g n i t ! a t g n i t ! a t g n e i d r a t X Y x o u n c ' d o i t i i d y B t i i d y B t i i d y B n o o t = i t r r : t , d n o y o s o . = P u y o s o . = P u y o s o . = O u u n n T > n = = = M E c i ' n . n S n p > e t . n S n p > l t . n S n o > r t I ' l a e e l e { o T , ' p ' u l e r t p ' u l l a t o ' u l r g t t , y g { r c r r n : : n a , e , p y r w s o l , p y a w c o r , p y g w a o e , ' . o e e u p : g r p , s i o n a p , c i e n g p , a i n n m , c n c c ( c ' o ' t s o o n n ' c o e n ' ' a o n n i ' u t t t { o r s t , y o r n d ' , e r . d , , n r i d z , | r a . . n i X r p n t . o , . t i o i t z o a r i l t t b , u e . e i w c e c w z e a w t I e n e o a b e : c d c . o d o . a d t . i t n e f p i o p , o ( o w l ( n w t ( i w o e t r t n n o ' l ' n r o ' , r i ' o r n m ) . ; + e ' s d o p , i r p i o o n i ' ) c r , Y i r e t . l t n r . t , [ r u 3 . v . r e m a e . g i e ] e r 4 c } i m s r a c r c a c r t r ; u , d a o . i e . o n o . = u e r e i n t n ' t l i n t r n r r n ' a , ) a o z , a [ n t e ' , ) g , g r a g ; . n , , g g . t g g t e e m i e e , h r r a o r t i . . i n . B d a a n ' a o e d d , ) d u : d d , d n E E E d i n n n i s t t t n R i i i g e t t t C a y y y l d D D D i o i i i e n a a a n l l l l t y o o o R g g g e } ( ( ( c , ' ' ' t p p o ( e l r ) r a g ; s c a o e n n ' i ' ) z ) , a , t i o n ' ) , As a result, the choices are limited as follows: ...

October 31, 2024 · 26 min · Nakamura

Using LEAF Writer from Next.js

Overview This article introduces how to use LEAF Writer from Next.js. Demo You can try it from the following URL. https://leaf-writer-nextjs.vercel.app/ Below is a screenshot example. The header section is the part added using Next.js. The editor section uses LEAF Writer. The source code is available at the following link. https://github.com/nakamura196/leaf-writer-nextjs Usage Instructions are described at the following link. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads As a note, the div container’s id must be set to leaf-writer-container. I found that not doing so causes the styling to break. I would like to submit a pull request regarding this in the future. ...

October 29, 2024 · 2 min · Nakamura

Using Roma to Restrict Allowed Values for Tag Attributes

Overview This is a memo on how to restrict the allowed values for tag attributes using Roma. Background In the following article, I described how to restrict the attributes available for a tag. For example, making only the key and type attributes available for the persName tag. In this article, I go further to restrict the allowed values for specific attributes. For example, allowing only “right marginal note” or “left marginal note” to be set for the type attribute. ...

October 28, 2024 · 1 min · Nakamura

GitHub Repository for DTS API for TEI/XML Files Published in the Koui Genji Monogatari Text DB

Overview I published the GitHub repository for the API introduced in the following article. The repository is below. https://github.com/nakamura196/dts-typescript There may be some incomplete aspects, but I hope this is helpful as a reference. Notes Vercel Rewrite By configuring as follows, access to / was redirected to /api/dts. { } " " ] " ] " ] v b , r , r e u e e r i w d s l { } r { } i { } i d i r o s t e n " e c " : " " s " " t " " " : s u " s d s s d p [ r s : o e " o e e 2 c e u s : u s r , " " [ r t r t m : : c i [ c i a e n e n n " " " a " a e s @ : t : t n r v i i t c e " " " / r n n : i c a " " " n e p : , : t d l i r e / / " " u x n d / / e . o t s a t d s r p s e ( c i " " . / , i d ) n t " d s , e " x , . t s " Collection ID The following is used as the collection ID. ...

September 4, 2024 · 2 min · Nakamura

Creating a DTS API for TEI/XML Files Published by the Koui Genji Monogatari Text DB

Overview These are notes on creating a DTS (Distributed Text Services) API for TEI/XML files published by the Koui Genji Monogatari Text DB. Background The Koui Genji Monogatari Text DB is available at: https://kouigenjimonogatari.github.io/ It publishes TEI/XML files. Developed DTS The developed DTS is available at: https://dts-typescript.vercel.app/api/dts It uses Express.js deployed on Vercel. For more information about DTS, please refer to: MyCapytain Library In the following article, I introduced a library for using DTS from Python: ...

September 4, 2024 · 20 min · Nakamura

Trying Out DTS (Distributed Text Services)

Overview I had the opportunity to learn how to use DTS (Distributed Text Services), and this is a memo of that experience. API Used We will use Alpheios, which is introduced at the following page. https://github.com/distributed-text-services/specifications/?tab=readme-ov-file#known-corpora-accessible-via-the-dts-api Top https://texts.alpheios.net/api/dts We can see that collections, documents, and navigation are available. { } " " " " " " n @ @ c @ d a i t o c o v d y l o c i " p l n u g : e e t m a " c e e t " : t x n i i t t a " o " s n p E n : " " i n s : : / t " " d r : d " " t y t / / s P " s a a " o / / p p , i a E i i n p n / / t i t d d " / r t t , d y s s t P / s d n i o a c n c v o t u i l . m g l j e a e s n t c o t i t n " o i l n o d " n " , s , " , Collection Endpoint collections https://texts.alpheios.net/api/dts/collections ...

September 4, 2024 · 45 min · Nakamura

Trying Out the MyCapytain Library

Overview This article tries out the MyCapytain library below. https://github.com/Capitains/MyCapytain Background In the following article, I covered CTS (Canonical Text Service). The following page provides explanations of CITE, CTS, and CapiTainS. https://brillpublishers.gitlab.io/documentation-cts/DTS_Guidelines.html The following document is about CITE, a system for the identification of texts and any other object. CTS is the name for the identification system itself. CapiTainS is the name for the software suite built around it. Before we go into details, we need to ask two questions: ...

September 4, 2024 · 22 min · Nakamura

Trying Canonical Text Services

Overview Canonical Text Services is described as follows: The Canonical Text Services protocol defines interaction between a client and server providing identification of texts and retrieval of canonically cited passages of texts. The following site was used as a reference. http://cts.informatik.uni-leipzig.de/Canonical_Text_Service.html Usage The following was used as a reference. https://github.com/cite-architecture/cts_spec/blob/master/md/specification.md GetCapabilities A request to check the services supported by the server. http://cts.informatik.uni-leipzig.de/pbc/cts/?request=GetCapabilities < G / e < < G t r r / e C e e < r t a q p T / e C p u l e < < < < < < T p a a e y x c c c c c t e l p b s > t o o o o o e < < t x y a i t I r r r r r x g e e t > b l > n p p p p p t r d < < < < < < e x I i i G v u u u u u g o i t l s p l c d t n l t e e s s s s s r u t i i o u a o i g v i i t n l s l n d o p i t c u b n n t r e t e C t i o a a e u n o l e r l g t i o n i s a o c u n m s p a n e n c i u e o u t e p r e r g e c m > s e c a n n p o s x a y n c u > r u e u T e > a g t > > r > m b s e a P i r > r h > h t e T y l i t e > g a p n b n e P t i > y > n l i > h e r t = i = u t o a p s i v P t > a i " b " B b p n r e = t e u t a l o u l u i l : D b > " i r b p r l n r e r b i / a < x h e s l : b e > n < n l c / t / m t s i i / , l T : / : e p e l l t < o c / c h c g c D a > a < p / n p e B e t r t i o r 1 n / : r = D a b i s o s n m a 8 g c / e " o r , b B : u : a l 6 u o / q 5 m a c l i p p p A i l 5 a n r u . a l e e b b n b r n e < g t e e 0 i l s l c a c a < l / e e l s . n e , C e : m : b / t p > n a t r < l c o b e b i l e u t x > c t y r c i > i c i x b T n . c e m p o b b < c t l y g 1 o x , u r l l / e . i p . " r t d s p e e t n i c e o > p . e < u " . i s n a > r u i u / s > p t e f t g s n , c a l > o i / l f e o c r e / o n i o n r o a > d n s c / g p n l a D / e d , u t l t a s n a f s a e a t t s t i n i l / e r e a n a n . > u > / , m s a r c < f e r e t / r > 1 b t u c a 1 . r r o , 6 n i e r i 9 o e / p t r v 1 u a u m e . s , n : d 0 s m i " " o y q > v u a u i x r , e a m c r l e u t C n > s r a s , a n : t n o a g s n = l l i " , a c h u t a t k i l t r o p < n T : / s e / c , x / o t r r w e p h S l u i e a s c r x l h v n a i g n h c . g a e o u v r a e h g g t / e b t n > e p s e : / n / c / o a c m s t p s s a i . t g i i n n b e f i d o l r i 9 m t 0 a y 6 t / i a d k n i . n f u o f n t e i a r - t e l i n e o t i n p s I z / S i 1 O g . - . 0 6 d " 3 e 9 / x - p m 3 b l c n c / s o c : d t t e s e s / i . < = / " T s h h o t i u t s r p c : C e / T > / S w w i w n . s t t e a i n - c c e . o c r o g n / t n a s i / n 1 s . 0 2 " 0 x b m i l b n l s e : d t c r = a " n h s t l t a p t : i / o / n p s u r f l r . o o m r g P / B d C c / t e h l a e t m e a n r t e s / a 1 v . a 1 i / l " a b x l m e l n a s s : t P i u = b " l h i t c t p D : o / m / a c i h n s . . < h / a c r o v r a p r u d s . d e e d s u c / r x i m p l t n i s o / n c > t s " > GetPassage Retrieves a specific portion of text based on a specified URN (Uniform Resource Name). ...

September 4, 2024 · 10 min · Nakamura

LEAF Writer: Adding Mirador

Overview This is a record of investigating how to customize LEAF Writer. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer This time, we add Mirador as shown below. Method Please refer to the following. https://gitlab.com/nakamura196/leaf-writer/-/commit/377438739cdeb0a7b770ee9d4b9fea86081179d8 The file that needs to be modified is as follows. i i i i i } c } e m m m m n l x p p p p t a p t w a r r r r m $ c i c } p } r } p o o o @ o e t a a r s e e e e i p u g o r e o r r r t r r t r g i s a a a a r a r n n t t t t $ ` t t } t } i c c c } t s t t r t t t s t f r e ? t d d d d e a g r o s h h h h ( ) h h ) h ) o o o ; h e h h t - a i n : e I o o o o s d e e r t i i i i ` < ; i i c i t ; i i ; a n n n i w ] w } i t i i $ ' W i M c b t r i n n n n l o B n e r s s s s # d s s o f h s f t ( s s s d i , i , e s ( s s d j r g i e u I s : i l l l l i r r t S u . . . . $ i . . n i . e d t t t : n { } n s s . ) . . e f q i n r t d t f y y y y n I e I c c w i t a { v w w s ( s w ( o d , d i l m $ c f r u t o a I e : r W V t n a n r t r d a t p r r o ! . r ! p c $ m c t o l o d i i { p u a o e e r d i ? i r i w i t a - s k d o o i g t a i i i l s p i t r ) f a o h w o w e n r a r u m r r e o i : s n i e r d a t d t s e l r t = N r r d t t e u r t h o . a n n i s a : B t a g r l y r f t g t w i : g t i a : x l ( e a N e = e e . c o e i c f c i f s : d a - d e e t ' - f V s r ; e e t N r s n { r ` m a n " r r l c c r s e i s f i . e { r d o B n j u r f i t i r r e s a N a c u = = $ e m t $ . . o e e . . s n i e g i [ d O i r r t I q i o r e r n ; r t m a b e n a = { e I { e e g s s e w s d m s d M p s I e I i u ' m o w i g { : r e m l : k - f t p = d t v v ( s s v r D i t = , a e a n a n i e ; m e n ; i : e e n 1 a t w a = } h e e ' ) D e i o l U n n b s k d f r r g W n : - a o ; l r r r t ` i n n d o n t c e r { i : l t s e V y ' P ; r g s n n w s i i e a a ) s t t o r c t e u i f e a x i ' m r i ; t s e y n e b t n g t . . ( ( c e u ( r m = e f - n = e ; i o t r t x ; ; u e t t a i ' ' u t m ' . e = s a n c = w r p e i r t | t r I ? r p d l d m u e w e n $ t l e e n e a s r n i - e ; d ? i p } o o e r n r d t ( $ : s x u - r d ; g n l n , } b e " a c n n t i i ( d f e t = l 1 ; o { ; g i u _ ' u n d u t ; ( t t d o a m , - l ; r ; n l p i p t d s i m L b e o o c c a l M ; / ' e l a i b e ( t n e o o r r c ) s n i i W ; ; r i ' ` y g n a d I ) : . i i n r r @ e f ; ? l D t d y n f m f e a i t n V ? e o L e ) i r H i i e d t y t i = c o d ; t e T n l s @ o e p I e ' " u a ' i t M d e t t r r e d w f p m d , a u L ( . U y . ' s , e p a o e e l r E ` a r p v ; c r a c s n d s i n l * t i e i r t ` g s i t ' u z ; e [ t , s e i a ; e ' t ' ) c e m _ r c w p g ; i ) . c d e t ( r e t , b o . s e ' n a ' i r - r n s u s ) t g s p ( e w e : u b s . ) = a t c s r a b s , s " m - o l i k a a s c u { f e e n i t t b c r b b a a s f n e e t s r i o s c s l i t r l r o i b d c s ' i g / e i l b e y r i ) n ) n } m b u e ( ) i m ; t ; o : e u t ( ( ; b i / - n t e ( s e l n e I t e ; ) u ( e o x i c ( " - p i n t t = c ) ] u l f a h o > e ` n i V m a p s = ) s c i e t : t s > ; a i e h : f t w s 0 i { e - e t ; s b - a r o . o a n P r b r o s y r e o e l s , o s t s e i p t e a g @ s t o t n n t ) h m ( , m y e : ) e p { ) b n e i 0 ; o t s m ; d , c a y r g l : @ i e e t p f H y t U t T p - R : M e e L L s s 0 E c l ; l r i e i n r m p t i e t / g n - n h t e o t ) s - : l r = i e 0 > n d " t u > { / n < n d / o a d - n i u t v n - > s t a y f p e e - - c c a o l n l s , t i @ t t u y e p n e t s s c r i p t - e s l i n t / n o - u n s a f e - m e m b e r - a c c e s s The following section retrieves information from <facsimile sameAs="https://dl.ndl.go.jp/api/iiif/3437686/manifest.json">. ...

July 23, 2024 · 9 min · Nakamura

LEAF Writer: How to Add Sample Data

Overview This is a record of investigating how to customize LEAF Writer. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer This time, it is a memo on how to add sample data. We add custom sample data as shown below. Method Please refer to the following. https://gitlab.com/nakamura196/leaf-writer/-/commit/c4e98090c94874037980819c9672eea10814eedb In addition to updating samples.json, it was also necessary to update apps/commons/src/icons/index.tsx to add an icon, although this is not mandatory. Result As shown below, the editor environment could be opened from the sample data. ...

June 29, 2024 · 1 min · Nakamura

LEAF Writer: How to Use the Image Viewer

Overview LEAF Writer provides a feature for displaying text and images side by side, as shown below. It also offers a feature where the text moves in sync when you navigate through image pages. This article introduces TEI/XML markup examples for displaying images in the Image Viewer section. Method Specify the pb tag as follows. https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/blob/master/xml/lw/01.xml Specifically, it looks like this: < p b c o r r e s p = " # z o n e _ 0 0 0 5 " f a c s = " h t t p s : / / d l . n d l . g o . j p / a p i / i i i f / 3 4 3 7 6 8 6 / R 0 0 0 0 0 2 2 / 0 , 0 , 3 4 4 5 , 4 7 0 6 / f u l l / 0 / d e f a u l t . j p g " n = " 5 " / > The image specified in the facs attribute of the pb element appears to be displayed in the Image Viewer section. ...

June 29, 2024 · 2 min · Nakamura

LEAF Writer: CSS Customization

Overview This is a research note on how to customize LEAF Writer. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer This article specifically covers CSS-based visual customization. This allows you to set up an editing environment with vertical text display, as shown below. The following shows the display before customization. Method Specify the schema file as follows. https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/blob/master/xml/lw/01.xml Specifically: < ? x m l - s t y l e s h e e t t y p e = " t e x t / c s s " h r e f = " h t t p s : / / k o u i g e n j i m o n o g a t a r i . g i t h u b . i o / l w / t e i _ g e n j i . c s s " ? > LEAF Writer reads this schema file and changes the editor’s style accordingly. ...

June 29, 2024 · 1 min · Nakamura

LEAF Writer: Customizing Schemas

Overview This is an investigation record on how to customize LEAF Writer. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer This time, it is a memo on how to customize schemas. The goal is to display Japanese translations and other customizations as shown below. Below is the display before customization. Based on the following schema, many elements are displayed with English descriptions. https://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng Method Specify the schema file as follows. https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/blob/master/xml/lw/01.xml Specifically: < ? x m l - m o d e l h r e f = " h t t p s : / / k o u i g e n j i m o n o g a t a r i . g i t h u b . i o / l w / t e i _ g e n j i . r n g " t y p e = " a p p l i c a t i o n / x m l " s c h e m a t y p e n s = " h t t p : / / r e l a x n g . o r g / n s / s t r u c t u r e / 1 . 0 " ? > LEAF Writer reads this schema file and uses it for validation and presenting available elements. ...

June 29, 2024 · 3 min · Nakamura

Partial Update to TEI/XML Published in the Koui Genji Monogatari Text Data Repository

Overview I publish TEI/XML files for the Koui Genji Monogatari (Variorum Tale of Genji) in the following repository. https://github.com/kouigenjimonogatari I made some changes to the TEI/XML published here, so this is a note about those changes. Folder Structure Files before the modifications are stored here. There are no changes from before. https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/tree/master/tei The updated files are stored here. https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/tree/master/xml/lw This directory contains XML files with the modifications described below. Modifications Adding a Schema The following rng file was added. ...

June 28, 2024 · 8 min · Nakamura