What is this?
tl;dr: CETEIcean lets you display unmodified TEI documents in a web browser! Examples may be found here.
CETEIcean was inspired by
which also displays TEI in the browser, but differs from it in a couple of
important ways. CETEIcean does not rely on an in-browser XSLT transformation,
triggered by an XSLT directive in the source, so no modification to the source XML is
necessary for it to work. Because it follows the Custom Elements standard, the
HTML it produces is valid and there are no possibilities of element name
collisions (like HTML
<p> vs. TEI
<p> for example).
You can use CETEIcean in your projects just by grabbing the CETEI.js file from the latest release and linking to it in an HTML file like the examples do. Note that you'll want also to grab the example CSS or make your own. If you want to build and play with it on your own, follow the steps below.
This code fetches a TEI file, transforms it into HTML Custom Elements, and places the result in a div with id "TEI".
var CETEIcean =CETEIcean
npm run build
puts a copy of CETEI.js in the
npm run dev
runs a local web server on port 8888. Browse to the examples in the
folder. Make changes and they'll show up when you reload.
Run the build process and then include the generated
CETEI.js file in an HTML
document like the simpleTest.html file in the
test/ folder. Or, use the
server-side language and framework of your choice to generate such files on demand.
TEI documents displayed using CETEIcean can be customized via CSS or by specifying behaviors for individual elements. For documentation on behaviors see the wiki.