Overview

This is a memo on how to scroll to a specific element using CETEIcean and XPath.

Demo

You can try it at the following URL.

https://next-ceteicean-router.vercel.app/xpath/

After accessing the page and scrolling, it is displayed as follows.

Obtaining the XPath

The above example targets the XML file from the “Koui Genji Monogatari Text DB.”

https://kouigenjimonogatari.github.io/tei/01.xml

The following XPath is specified.

/TEI/text[1]/body[1]/p[1]/seg[267]

To obtain this XPath, you can right-click on the target element in Oxygen XML Editor and select “Copy XPath.”

Implementing the Scroll

This is based on the application introduced in the following article.

The source code on GitHub is available here.

https://github.com/nakamura196/next-ceteicean-router/blob/main/src/components/xpath/Render.tsx

In particular, the following section converts the XPath to element names created by CETEIcean and scrolls using scrollIntoView.

R}Me,oacci}dcoof[itnn...c)ci}tf.ssrrt(o;ofeiutteeotnxtnXnnt}tiesppLespeuPus(a)aDderxlloitailalttrbbi;roEapaawCtCltlagelngcffwacceorho,htrehole]efXteerne,nRagtacit)teph((CtstereEvknE;cca//aeuesgtli:elhtt=(snlnueEeo:eD(h[etttltlmr"ma(rA(RRtEee:c"et)=a/-)e=e.lmnecnaw,Z;ffFeet"net="Xa.d.Imn.stn.>/p"-cocRetsmetsTa"zucuSn)coret{Et)]rurTtro"ryIhrmr_{ot,"l/eeeO=lh,et(nnnRl".e?tttDrI,bxR=).,Eenate\eRstc[m{vEuok1aDlVg]vl_tir/e[uN.eob|aOswuol$tDi(nde)eEn{dya/(_gC[dgTlo1i,Yel]nPNo/g"Eorpt,d[see=1liV]a-a"/s$lysh1uee"elg)l[ao2sw6"7H;]AT"dM;dLEtleeim-enptr;efix

Summary

There may be better approaches, but I hope this serves as a helpful reference.