` tags. This is a simple, static replacement. ```javascript let behaviors = { "tei": { "lb": ["
"] } }; c.addBehaviors(behaviors); ``` -------------------------------- ### Basic HTML Structure for TEI Publishing Source: https://github.com/teic/ceteicean/blob/master/tutorial_en/README.md This HTML code serves as a basic shell for displaying TEI content. It includes meta tags for character set and viewport, and links to external CSS and JavaScript files. The body is initially empty, ready to be populated by the rendered TEI content. ```html ``` -------------------------------- ### Initialize CETEI.js and Add Custom TEI Behaviors Source: https://github.com/teic/ceteicean/blob/master/tutorial_en/example/index.html Initializes a CETEI.js instance and defines custom behaviors for TEI elements like 'head' and 'pb'. The 'head' behavior creates HTML heading tags based on the element's nesting level, and 'pb' creates a paragraph with a CSS class. This setup allows for customized rendering of TEI XML. ```javascript let c = new CETEI(); let behaviors = { "tei": { "head": function(e) { let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null); let result = document.createElement("h" + (level.numberValue > 7 ? 7 : level.numberValue)); for (let n of Array.from(e.childNodes)) { result.appendChild(n.cloneNode()); } return result; }, "lb": ["
"], "pb": ["
$@n
"] } }; c.addBehaviors(behaviors); ``` -------------------------------- ### CSS Styling for TEI Elements Source: https://github.com/teic/ceteicean/blob/master/tutorial_en/README.md CSS rules to format TEI elements rendered as custom HTML elements. These include block display settings, list formatting, and pseudo-selectors for line breaks. ```css tei-div { display: block; } tei-p { display: block; margin-top: .5em; margin-bottom: .5em; } tei-list[type=simple] { list-style-type: none; } tei-list[type=simple]>tei-item { display: list-item; } tei-hi[rend=italics] { font-style: italic; } tei-lb:before { white-space: pre; content: "\A"; } ``` -------------------------------- ### Convert XML String to HTML5 (JavaScript) Source: https://context7.com/teic/ceteicean/llms.txt Details the `makeHTML5` method, which converts an XML string directly into HTML5 Custom Elements. This is useful when the TEI content is already available as a string. The example demonstrates passing a TEI XML string and handling the converted output via a callback function. ```javascript const ct = new CETEI(); const teiString = `Published digitally
Born digital
This is a
`, ``). It then copies the child nodes from the TEI element to the new heading element.
```javascript
let behaviors = {
"tei": {
"head": function(e) {
let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null);
let result = document.createElement("h" + level.numberValue);
for (let n of Array.from(e.childNodes)) {
result.appendChild(n.cloneNode());
}
return result;
},
"lb": ["
"]
}
};
c.addBehaviors(behaviors);
```
--------------------------------
### Configuration / Constructor
Source: https://github.com/teic/ceteicean/blob/master/README.md
Initializes the CETEIcean instance with specific configuration options.
```APIDOC
## Constructor
### Description
Instantiates a new CETEI object with optional configuration settings.
### Parameters
#### Request Body
- **ignoreFragmentId** (boolean) - Optional - If true, disables saving/restoring scroll position via URL fragment.
- **documentObject** (object) - Optional - Provides a custom DOM implementation (e.g., JSDOM for Node.js environments).
```
--------------------------------
### Initialize CETEIcean with custom behaviors
Source: https://github.com/teic/ceteicean/wiki/Anatomy-of-a-behaviors-object
Demonstrates how to instantiate the CETEI object, inject custom behavior logic, and process an XML file into the DOM.
```html
```
--------------------------------
### Initialize and Render TEI Documents
Source: https://github.com/teic/ceteicean/blob/master/README.md
Demonstrates how to instantiate the CETEIcean object and fetch a TEI XML file to render it within a specific DOM element. This is the standard approach for client-side document display.
```javascript
var CETEIcean = new CETEI()
CETEIcean.getHTML5("URL_TO_YOUR_TEI.xml", function(data) {
document.getElementById("TEI").appendChild(data)
})
```
--------------------------------
### Configure CETEIcean Options
Source: https://github.com/teic/ceteicean/blob/master/README.md
Shows how to pass configuration objects during initialization, such as disabling fragment ID tracking for server-side rendering scenarios.
```javascript
new CETEI({
ignoreFragmentId: true
})
```
--------------------------------
### CETEI Class Constructor
Source: https://context7.com/teic/ceteicean/llms.txt
Instantiate the main CETEI class with an optional configuration object to control document handling, base URLs, debugging, and default behaviors.
```APIDOC
## CETEI Class Constructor
The main CETEI class is instantiated with an optional configuration object that controls document handling, base URLs, debugging, and default behaviors.
### Basic Browser Instantiation
```javascript
const ct = new CETEI();
```
### Instantiation with Options
```javascript
const ct = new CETEI({
base: "https://example.com/tei-files/", // Base URL for resolving relative links
debug: true, // Enable debug logging
omitDefaultBehaviors: false, // Set true to skip default behaviors
ignoreFragmentId: true, // Disable scroll position restoration
discardContent: false // Set true to discard original content when applying behaviors
});
```
### Server-Side Instantiation with JSDOM
```javascript
import { JSDOM } from 'jsdom';
import CETEI from 'CETEIcean';
const jdom = new JSDOM(`
"],
"pb": ["
"] } }; c.addBehaviors(behaviors); ``` -------------------------------- ### Configuration / Constructor Source: https://github.com/teic/ceteicean/blob/master/README.md Initializes the CETEIcean instance with specific configuration options. ```APIDOC ## Constructor ### Description Instantiates a new CETEI object with optional configuration settings. ### Parameters #### Request Body - **ignoreFragmentId** (boolean) - Optional - If true, disables saving/restoring scroll position via URL fragment. - **documentObject** (object) - Optional - Provides a custom DOM implementation (e.g., JSDOM for Node.js environments). ``` -------------------------------- ### Initialize CETEIcean with custom behaviors Source: https://github.com/teic/ceteicean/wiki/Anatomy-of-a-behaviors-object Demonstrates how to instantiate the CETEI object, inject custom behavior logic, and process an XML file into the DOM. ```html ``` -------------------------------- ### Initialize and Render TEI Documents Source: https://github.com/teic/ceteicean/blob/master/README.md Demonstrates how to instantiate the CETEIcean object and fetch a TEI XML file to render it within a specific DOM element. This is the standard approach for client-side document display. ```javascript var CETEIcean = new CETEI() CETEIcean.getHTML5("URL_TO_YOUR_TEI.xml", function(data) { document.getElementById("TEI").appendChild(data) }) ``` -------------------------------- ### Configure CETEIcean Options Source: https://github.com/teic/ceteicean/blob/master/README.md Shows how to pass configuration objects during initialization, such as disabling fragment ID tracking for server-side rendering scenarios. ```javascript new CETEI({ ignoreFragmentId: true }) ``` -------------------------------- ### CETEI Class Constructor Source: https://context7.com/teic/ceteicean/llms.txt Instantiate the main CETEI class with an optional configuration object to control document handling, base URLs, debugging, and default behaviors. ```APIDOC ## CETEI Class Constructor The main CETEI class is instantiated with an optional configuration object that controls document handling, base URLs, debugging, and default behaviors. ### Basic Browser Instantiation ```javascript const ct = new CETEI(); ``` ### Instantiation with Options ```javascript const ct = new CETEI({ base: "https://example.com/tei-files/", // Base URL for resolving relative links debug: true, // Enable debug logging omitDefaultBehaviors: false, // Set true to skip default behaviors ignoreFragmentId: true, // Disable scroll position restoration discardContent: false // Set true to discard original content when applying behaviors }); ``` ### Server-Side Instantiation with JSDOM ```javascript import { JSDOM } from 'jsdom'; import CETEI from 'CETEIcean'; const jdom = new JSDOM(`
"], "pb": ["
$@n
"] } }; c.addBehaviors(behaviors); c.getHTML5('../fpn-washington.xml', function(data) { document.getElementsByTagName('body')[0].appendChild(data); }); ``` -------------------------------- ### Load and Display XML with CETEIcean (JavaScript) Source: https://github.com/teic/ceteicean/blob/master/test/addBehaviorTest.html This JavaScript code snippet shows how to load an XML file ('testTEI.xml') using CETEIcean and display its HTML5 representation. It uses the `getHTML5` method, which accepts a callback function to handle the loaded data. The content is then appended to an element with the ID 'TEI'. An alternative using Promises (`then()`) is also commented out. ```javascript c.getHTML5('testTEI.xml', function(data) { document.getElementById("TEI").innerHTML = ""; document.getElementById("TEI").appendChild(data); }); // Alternatively, use then() // (new CETEI).getHTML5('testTEI.xml').then(function(data){ // document.getElementById("TEI").appendChild(data); // }); ``` -------------------------------- ### Insert Static Content Decorators in JavaScript Source: https://github.com/teic/ceteicean/wiki/Anatomy-of-a-behaviors-object Demonstrates how to insert static content before and after an element's original content using a simple array of strings. If the strings contain no markup, they are wrapped in a ``. The first item is inserted before, and the second after, with the original content preserved in a hidden ``. ```javascript "add": ["`","´"] ``` -------------------------------- ### Implement endnote behavior with bidirectional linking Source: https://context7.com/teic/ceteicean/llms.txt Shows how to use addBehaviors to transform inline TEI notes into endnotes. It creates a list of notes at the end of the document and links them back to their original positions. ```javascript const ct = new CETEI(); ct.addBehaviors({ "tei": { "note": [ ["[place=end]", function(elt) { if (!this.noteIndex) { this.noteIndex = 1; } else { this.noteIndex++; } const id = "_note_" + this.noteIndex; const doc = elt.ownerDocument; // Create superscript link in text const link = doc.createElement("a"); link.setAttribute("id", "src" + id); link.setAttribute("href", "#" + id); link.innerHTML = this.noteIndex; const content = doc.createElement("sup"); content.appendChild(link); // Create or find notes container let notes = doc.querySelector("ol.notes"); if (!notes) { notes = doc.createElement("ol"); notes.setAttribute("class", "notes"); this.dom.appendChild(notes); } // Add note to endnotes list const note = doc.createElement("li"); note.id = id; note.innerHTML = "^ " + elt.innerHTML; notes.appendChild(note); return content; }], ["_", ["(", ")"]] ] } }); ``` -------------------------------- ### Utilize CETEIcean utility functions for element manipulation Source: https://context7.com/teic/ceteicean/llms.txt Demonstrates the use of cetei.utilities for copying, serializing, and managing TEI elements. It includes methods for URL rewriting, ordinality calculation, and content hiding. ```javascript const ct = new CETEI(); ct.getHTML5('document.xml', function(data) { document.getElementById("TEI").appendChild(data); const element = document.querySelector("tei-p"); // Copy and reset: create a fresh copy without processing flags const freshCopy = ct.utilities.copyAndReset(element); // Serialize to XML string const xmlString = ct.utilities.serialize(element); console.log(xmlString); // Serialize with pretty-printing const prettyXml = ct.utilities.serialize(element, false, ""); // Combined reset and serialize const cleanXml = ct.utilities.resetAndSerialize(element, false, ""); // Rewrite relative URL const absoluteUrl = ct.utilities.rw("images/figure1.png"); // Get first URL from space-separated list const firstUrl = ct.utilities.first("url1.html url2.html url3.html"); // Get element ordinality (position among siblings) const position = ct.utilities.getOrdinality(element, "tei-p"); // Hide element content (wrap in hidden span) ct.utilities.hideContent(element); }); ``` -------------------------------- ### Initialize CETEICEAN and Define Custom TEI Behaviors Source: https://github.com/teic/ceteicean/blob/master/tutorial_ja/example/index_ja.html This snippet initializes the CETEI library and applies custom rendering logic for TEI elements. It uses XPath to determine heading levels and replaces standard TEI tags with custom HTML5 structures, including ruby annotations. ```javascript let c = new CETEI(); let behaviors = { "tei": { "head": function(e) { let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null); let result = document.createElement("h" + (level.numberValue > 7 ? 7 : level.numberValue)); for (let n of Array.from(e.childNodes)) { result.appendChild(n.cloneNode()); } return result; }, "lb": [""], "pb": ["
$@n
"], } }; c.addBehaviors(behaviors); c.getHTML5('../meros.xml', function(data) { document.getElementsByTagName('body')[0].appendChild(data); let ruby = document.querySelectorAll('tei-ruby'); ruby.forEach(function(e1) { let rbt = e1.querySelectorAll('tei-rb,tei-rt'); let ruby = document.createElement('ruby'); rbt.forEach(function(e2) { let rbt = document.createElement(e2.tagName.replace(/TEI-/, '')); rbt.textContent = e2.textContent; ruby.append(rbt); }); e1.replaceWith(ruby); }); }); ``` -------------------------------- ### Convert TEI table structures to HTML tables Source: https://context7.com/teic/ceteicean/llms.txt Demonstrates a custom behavior to map TEI table elements (tei-table, tei-row, tei-cell) into standard HTML table elements for browser rendering. ```javascript ct.addBehaviors({ "tei": { "table": function(elt) { const doc = elt.ownerDocument; const table = doc.createElement("table"); table.innerHTML = elt.innerHTML; // Convert head to caption if (table.firstElementChild?.localName === "tei-head") { const head = table.firstElementChild; head.remove(); const caption = doc.createElement("caption"); caption.innerHTML = head.innerHTML; table.appendChild(caption); } // Convert rows for (let row of Array.from(table.querySelectorAll("tei-row"))) { const tr = doc.createElement("tr"); tr.innerHTML = row.innerHTML; for (let attr of Array.from(row.attributes)) { tr.setAttribute(attr.name, attr.value); } row.parentElement.replaceChild(tr, row); } // Convert cells for (let cell of Array.from(table.querySelectorAll("tei-cell"))) { const td = doc.createElement("td"); if (cell.hasAttribute("cols")) { td.setAttribute("colspan", cell.getAttribute("cols")); } td.innerHTML = cell.innerHTML; for (let attr of Array.from(cell.attributes)) { td.setAttribute(attr.name, attr.value); } cell.parentElement.replaceChild(td, cell); } this.hideContent(elt, true); elt.appendChild(table); } } }); ``` -------------------------------- ### domToHTML5(XML_dom, callback, perElementFn) Source: https://context7.com/teic/ceteicean/llms.txt Converts an XML DOM object into HTML5 Custom Elements. Ideal for server-side processing or when working with pre-parsed XML documents. ```APIDOC ## domToHTML5(XML_dom, callback, perElementFn) Converts an XML DOM object into HTML5 Custom Elements. Ideal for server-side processing or when working with pre-parsed XML documents. ### Browser Usage with DOMParser ```javascript const ct = new CETEI(); const parser = new DOMParser(); const teiString = `Published digitally
Born digital
This is a