Turn TEI elements with 'ref' attribute into links

[dubinsky]

I need TEI elements that have ref attribute (e.g., persName) to render as (clickable) HTML links.

With TEI-BP, I added a custom XSLT template that wraps such elements in HTML <a> with href value copied from the TEI's ref attribute:

<xsl:template match="tei:*[@ref]" priority="99">
  <a href="{@ref}">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:apply-templates/>
    </xsl:copy>
  </a>
</xsl:template>

How do I achieve similar results using CETEIcean?
Do I need to tweak CETEI.js? Add some behavior? Use CSS?

Since neither TEI-BP nor CETEIcian perform this obviously useful transformation
out-of-the-box (as far as I know), maybe I am just encoding my documents incorrectly?
What is the idiomatic TEI way of achieving this result?

Thanks!

[hcayless]

We don't define a default behavior for this for the simple reason that att.canonical @ref is defined to hold 1 - ∞ URIs, and so there can't really be a default browser behavior. That's not to say you're doing it wrong if your documents follow the rule that there can be only one URI in @ref—if they do then you're absolutely ok to turn them into simple links.

CETEIcean behaviors are not the equivalent of a full transformation language like XSLT, but you could use them to do this—you'd need a separate behavior for each type of @ref-bearing element, but there aren't that many of them (see https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-att.canonical.html). You could also add the behavior after the page is loaded with a bit of JavaScript and CSS using something like

document.querySelectorAll('*[ref]').forEach(el) {
  // Add a click event listener to the element
}

and then use CSS to make it evident in the UI that they're clickable. One of the reasons for not attempting to turn behaviors into a fuller language is because it's so easy to do DOM manipulation in JS anyway.

[dubinsky]

Thanks for the detailed reply!

We don't define a default behavior for this for the simple reason that att.canonical @ref is defined
to hold 1 - ∞ URIs, and so there can't really be a default browser behavior.

That didn't stop you from handling ptr's @target :)

CETEIcean behaviors are not the equivalent of a full transformation language like XSLT

And that's a good thing!

but you could use them to do this—you'd need a separate behavior for each type
of @ref-bearing element, but there aren't that many of them

To avoid code duplication I added the following at the end of makeHTML5:

  if (newElement.hasAttribute("ref")) {
    let link = document.createElement("a");
    link.setAttribute("href", this.rw(newElement.getAttribute("ref")));
    link.appendChild(newElement);
    return link;
  } else
    return newElement;
  }

You could also add the behavior after the page is loaded with a bit of JavaScript and CSS ...
One of the reasons for not attempting to turn behaviors into a fuller language is because
it's so easy to do DOM manipulation in JS anyway.

Thanks! I'll try doing something like that after I learn some Javascript :).

Thank you for developing CETEIcean! It is flexible enough for my purposes and is much easier than TEI-BP (at least for me) to integrate with the rest of the site (CSS, headers, footers etc.).

[dubinsky]

I ended up adding behaviors specific to my application.