Forum How do I...?

Can't display footnotes at the end of the page

notafius
I have this pice of code where footnote is inside column and even with
 prince-float-reference: page;
can't display them at the end of the page. Im using princexml v14 here. With princexml v13 this works just fine.

Here is the html

<div id="c541" class="cms-element cms-element-group hest-block hest-assignment-exercise" style="">
          <div class="hest-block-lining">
            <div class="frieze"></div>
            <div class="csc-header csc-header-n1 hd">
              <h2>Activité 1 : Les maisons typiquement marocaines</h2>
            </div>
            <div class="bd">
              <div id="c542" class="csc-default csc-textpic" style="">
                <div class="csc-textpic-text">
                  <p>Nous trouvons de nombreuses maisons traditionnelles, appelées riad, au sein de la médina. Elles sont constituées d’un grand rez-de-chaussée qui donne sur une cour intérieure généralement arborée, appelée un patio. Les pièces à l’étage s’ouvrent toutes sur un couloir de bois de cèdre donnant sur le patio.</p>
                  <p>Les touristes et les vedettes internationales, comme les chanteurs Madonna et Sting et bien d'autres, sont fascinés par les riads et on en trouve une quantité à louer dans les médinas partout au Maroc.</p>
                </div>
              </div>
              <div id="c543" class="csc-default csc-image" style="">
                <div class="csc-textpic csc-textpic-center csc-textpic-above">
                  <div class="csc-textpic-imagewrap portrait">
                    <div class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol height-590 width-479 percent-100" data-style="">
                      <img data-orig-width="1600" data-orig-height="1973" title="Maison marocaine" src="fileadmin/_processed_/a/3/csm_Del_3_M_Riad_a_Fes_2_red_96d0b15765.jpg" width="1600" height="1973" alt="">
                      <div class="csc-textpic-caption">
                        <div class="csc-caption">
                          <p>L’intérieur d’une maison traditionnelle marocaine.</p>
                        </div><span class="credits">Jeremy Laidi</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="c544" class="csc-default csc-textpic" style="">
                <div class="csc-textpic-text">
                  <ol>
                    <li>Discutez d’abord au sujet des riads en groupe de trois ou quatre en tenant compte des questions ci-dessous :</li>
                  </ol>
                  <ul>
                    <li aria-level="1">Quels sont les avantages de la construction des riads ? (Concentrez vos discussions autour des thèmes comme : la vie familiale, les conditions de température, l’emplacement du lieu, la discrétion du lieu).</li>
                    <li aria-level="1">À votre avis, pourquoi y a-t-il cette fascination pour les riads de la part des étrangers ?</li>
                  </ul>
                  <ol class="list-style-type-decimal" start="2">
                    <li>Trouvez ensuite sur Internet votre riad coup de cœur ! Décrivez-le en termes corrects et présentez-le en classe avec une projection de photos.</li>
                  </ol>
                </div>
              </div>
              <div id="c545" class="csc-default csc-textpic hest-block hest-example togglable layout10 collapsed" style="">
                <div class="hest-block-lining">
                  <div class="frieze"></div>
                  <div class="csc-header csc-header-n2 hd">
                    <h3>Indices</h3>
                  </div>
                  <div class="bd">
                    <div class="csc-textpic-text">
                      <ul class="columns2">
                        <li>rez-de-chaussée</li>
                        <li>premier étage</li>
                        <li>deuxième étage</li>
                        <li>le <a class="glossary-term footnote glossary" data-href="#p145-hest-glossary-balcon" href="#p145-systime-glossary-balcon">balcon</a>
                        </li>
                        <li>la terrasse</li>
                        <li>les couloirs intérieurs</li>
                        <li>les chambres</li>
                        <li>la cuisine</li>
                        <li>les salles de bain</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
howcome
Could you attach a complete document, including the CSS code? Preferably a minimized example in one file.
notafius
Here it is
  1. Archive.zip2.3 kB
howcome
There are no footnotes in your code. That is, I don't find any "float: footnote" in the CSS.

Here's a guide to creating footnotes:

https://css4.pub/2022/footnotes/
notafius
Ah I see that maybe there was some ambiguity on my previous comments. Here I have attached also the part for footnotes styling which forgot to add to code before.

Thing is that more about columns here. And again this works just fine for prince v13 but not for prince v14
  1. Archive.zip2.3 kB
howcome
I still don't find any footnotes in your code. There's no CSS code that turns elements into footnotes.
notafius
Okay here I have the full code to replicate the error

And this pice of code is causing the issue

ul.columns2, dl.columns2, dnf.columns2 {
    column-count: 2;
}
  1. Archive.zip2.8 kB

Edited by notafius

notafius
Okay I solved this by adding this for footnote class. Not just float: footnote; but also 'page'

So: float: footnote page;

.glossary-term {
    display: inline;
    float: footnote page;
    footnote-display: inline;
markbrown
Hi,

The 'float' property is a shorthand for a number of other properties, including '-prince-float-reference'. If you set 'float' it will override existing values of '-prince-float-reference', in the way that shorthand properties generally do.

Mark