Gérer une fichothèque avec le logiciel BDF

Introduire du CSS personnalisé dans un gabarit de transformation

Les gabarits par défaut concernant les fiches s’appuient sur un des deux fichiers suivants :

Lorsqu’on crée un nouveau gabarit HTML, le fichier extraction.xsl proposé initialement correspond au gabarit par défaut et donc s’appuie également sur une de ces deux feuilles de styles via les instruction :

  • <xsl:include href="bdf://this/xslt/v2/transformations/html/fiche.xsl"/> pour une fiche seule,

  • <xsl:include href="bdf://this/xslt/v2/transformations/html/compilation.xsl"/> pour une compilation.

Ces deux feuilles de style se chargent notamment de construire l’élément <head> du document HTML final où sont stockés toutes les déclarations de style.

Comme le montre l’extrait ci-dessous, cette construction consiste à insérer le contenu de différents fichiers CSS dans une balise <style>, avec en dernier de la liste, celui qui va nous intéresser custom/fiche.css puis de faire appel à des règles personnalisables :

  • <xsl:apply-templates select="." mode="custom-Head"/>, règle censée être situé dans le fichier custom/import.xsl

  • <xsl:apply-templates select="." mode="_Head"/>, règle présente à la fin du fichier et vide par défaut.

Extrait de fiche.xsl correspondant à l’insertion du CSS
<style type="text/css">
  <xsl:text>&#10;</xsl:text>
  <xsl:value-of select="document('bdf://this/xml-pack/css/_ficheblockelements.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/css/_predefinedclasses.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/theme/css/_codemirror.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/css/fiche-elements.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/css/fiche-classes.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/custom/fiche.css')/xml-pack" disable-output-escaping="yes"/>
</style>
<xsl:apply-templates select="." mode="custom-Head"/>
<xsl:apply-templates select="." mode="_Head"/>

On voit qu’il existe trois trois mécanismes différents pour indiquer ses propres règles CSS :

Le fichier custom/fiche.css

Ce fichier est présent dans les ressources de la distribution et il est vide. On peut le modifier librement et les règles décrites s’appliqueront à tous les gabarits : que ce soit les gabarits par défaut et les gabarits personnalisés (sauf, bien sûr, ceux dont la personnalisation est plus poussée et va jusqu’à ne pas insérer ce fichier).

Le fichier custom/import.xsl

xslt/v2/transformations/html/fiche.xsl et xslt/v2/transformations/html/compilation.xsl commencent toutes les deux une instruction (<xsl:import href="bdf://this/xslt/v2/transformations/html/_common.xsl"/>) insérant la feuille de style xslt/v2/transformations/html/_common.xsl qui, elle même, importe la feuille de style custom/import.xsl.

Cette dernière est vide à l’exception d’une règle <xsl:template match="/" mode="custom-Head">, au contenu vide. C’est cette règle qui est appelée lors de la construction du <head> final comme on le voit dans l’exemple ci-dessus.

Autrement dit, cette règle <xsl:template match="/" mode="custom-Head"> peut être réécrite pour introduire de nouveaux éléments dans le <head> final, notamment des éléments <style>.

Tout comme pour custom/fiche.css, les ajouts de custom/import.xsl concernent tous les gabarits : ceux par défaut et ceux personnalisés.

La règle <xsl:template match="/" mode="_Head">

Les deux feuilles de style possèdent une règle vide <xsl:template match="/" mode="_Head"> qui est appelée juste avant la fermeture </head>.

Il suffit de surcharger cette règle dans le fichier extraction.xsl de son gabarit personnalisé pour rajouter les éléments de son choix et notamment une balise <style>. On utilisera l’attribut @priority pour être sûr que la cette règle prend le pas sur la règle vide par défaut.

Modification du style de la balise <h1>
<xsl:template match="/" mode="_Head" priority="2">
    <style>
        h1 {
            text-align: center;
            font-size: 2rem;
            }
    </style>
</xsl:template>

Alternative : ignorer les feuilles de style

Le passage par les feuilles de style xslt/v2/transformations/html/fiche.xsl et xslt/v2/transformations/odt/compilation.xsl n’est nullement obligatoire. On peut se contenter d’inclure xslt/v2/transformations/html/_common.xsl.

Il faut alors écrire dans son gabarit la règle <xsl:template match="/"> qui va servir à construire l’élément <html>. Dans cette situation, la liberté est totale.