Transform XML to HTML on the fly and add JavaScript events?

I'm running a Django site with XML text stored in TextField properties. It's stored as XML rather than plain text because it's heavily annotated with information about the underlying manuscript, such as abbreviations and symbols. Here's an example:

class Entry(models.Model):
  # Name and description.
  chapter = models.ForeignKey(Chapter)
  latin_text = models.TextField()

Here's an example of the content of latin_text:

<initial type="2">I</initial>n <place type="0"><span>Ricmond</span></place>
ten<abbr type="1">et</abbr> aeccl<abbr type="0">esi</abbr>a
de Cietriz .ii. hid<abbr type="0">as</abbr>.

I'd now like to start displaying that XML text on my HTML pages.

I know I can display raw XML by dropping it into a textarea: the issue is that I'd like to display it in a more beautiful way, with:

  • styling (all the abbr elements in italics, the place element in bold)
  • JavaScript events to let the user explore the abbreviations (when the user mouses over an abbr or place, show a pop-up explanation)

I'm not sure if XSLT can do what I need, or even if it can be used alongside HTML. So my question is:

  • Should I transform the XML into HTML before adding it to the Django database?
  • Or can I do all the rendering I need on the fly with XSLT or JavaScript?

I would use xslt to transform it and then attach events programmatically with javascript. It is data and converting it before hand prevents you then interpreting it in a different way later. Html should be layout only and separate from the data. You could translate it with Javascript but that will be intensive on the client. Xslt and css will be cleaner and attaching events in js is lightweight.

Not familiar with Django but maybe check this answer out : Can I use XSLT in Django?