De la TEI (xml) à des images dynamiques

Il y a quelques temps, sur la liste TEI, quelqu’un à demandé des pistes pour utiliser des informations encodées en TEI afin d’afficher des images dynamiques sur une page web. Comme on a fait ça sur plusieurs de nos projets, j’ai répondu avec un exemple. Mais je voulais ici vous en montrer plusieurs.

Cas 1 : Tacitus On Line, FragmAnt (TEI & IIIF)

Pour les deux projets Tacitus On Line et FragmAnt, on veut afficher des zones au sein de pages numérisées. Coup de bol : les images sont accessibles via des serveurs IIIF.

  • Encodage à disposition : usage de l’élément <zone/> de la TEI
  • Traitement : transformation via XSL
  • Résultat : élément <img/> html dont l’URL bénéficie de l’API Image de IIIF

Cas 2 : Carto-Hugo (TEI & SVG)

Dans le cas de Carto-Hugo, on a besoin de mettre en valeur certaines zones d’images et de les mettre en ligne avec un texte. L’idée est de créer une interaction entre texte et image, du dynamisme sur la plateforme web. D’ailleurs, on a même des zones dans des zones, notamment quand il s’agit de cartes !

  • Encodage à disposition : usage des éléments <graphics/> et <zone/> de la TEI + un fichier TEI avec des <placeName/> qui font référence aux zones.
  • Traitement : transformation via XSL
  • Résultat : un fichier svg par <graphics/> composé de formes (des rectangles dans notre cas) qui vont pouvoir être utilisées par HTML, Javascript, etc. pour les rendre cliquables et dynamiques

Projet Carto-Hugo

 

Cas 3 : CreNum (TEI & OpenSeaDragon)

Dans le cas de CreNum, on dispose d’annotations et même d’un encodage assez complet sur certaines images, qui contiennent des peintures. Ce que nous recherchons c’est l’interaction entre notre texte et les images. De plus, des zones ont été découpées et on veut les rendre visibles et pouvoir interagir avec celles-ci.

  • Encodage à disposition : usage des éléments <graphics/> et <zone/> de la TEI + des fichiers TEI qui décrivent les images et font référence aux identifiants de certaines zones
  • Traitement : transformation via XSL, usage de JavaScript, la visionneuse OpenSeaDragon
  • Résultat : un fichier json avec la liste des zones qui combinée à la bonne sortie HTML et au bon JavaScript donne de très jolies interactions !

Projet CreNum (ANR Rhef-R)

Si vous voulez plus de détails, n’hésitez pas à nous contacter ! Nos codes sources sont libres et on est prêt à donner des explications et pistes pour adapter à vos données avec plaisir !


OpenEdition vous propose de citer ce billet de la manière suivante :
Anne Garcia-Fernandez (1 septembre 2025). De la TEI (xml) à des images dynamiques. ELAN - L'élan littératures, arts et numériques de Litt&Arts (UMR 5316). Consulté le 18 avril 2026 à l’adresse https://doi.org/10.58079/14k0t


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site uses Akismet to reduce spam. Learn how your comment data is processed.