Forum How do I...?

Hiding footnote-call & footnote-markers

somnath
Hi folks,

I want to hide all the footnote-call's and its related markers in output pdf that are auto-generated by default.

I tried the following but it doesn't seem to work. Can some one help me on this.

.footnote-rw {
display: prince-footnote; /* I don't want to use "float: bottom;" */
}

.footnote-rw::footnote-call {
display: none;
content: normal;
}

.footnote-rw::footnote-marker {
display: none;
content: normal;
}


Thanks in advance.

Regards,
Somnath
mikeday
Apply "content: none" to both markers and they should disappear.
somnath
Ah!!! Simple as that.... Thanks Mike. I tried everything except "content: none" :)

Regards,
Somnath
Alex McKee
Setting content: none removes the numbering but the footnote-call still appears to take up space in the document. Anyway of actually hiding this pseudo-element or making it take no space?
dauwhe
When I hide stuff, I also make it very tiny. Very useful when the title page text for a book is replaced by SVG, but you still want the text for running heads, etc. And it's fun to use 1pt text!

Dave
mikeday
Hmm, when I apply "content: none" to a footnote-call it doesn't seem to take up any space at all, although the presence of the footnote element does inhibit kerning. Here is an example:
<html>
<head>
<style>
.fn { float: footnote }
.fn::footnote-call { content: none }
</style>
</head>
<body>
AVA<span class="fn">Footnote</span>VAV
</body>
</html>
jim_albright
font-size: 0pt ;

actually works too

Jim Albright
Wycliffe Bible Translators

Alex McKee
Thank you all for your replies. I think I may have realised why I am experiencing this problem.

I am styling some HTML5, namely the aside element which I am using for footnotes and sidenotes which I believe to be valid usage. The aside element is a block level element and when floated to the footnotes the footnote-call it is replaced by still seems to take up space in the document.

screenshot.jpg


In the above screenshot the document has been styled without breaks between paragraphs, just indentation. The footnotes are being generated through my process using Textile. Between "... period." and "Without fixing the date..." are the actual footnotes 1-4, all in aside elements which are being floated footnote and you can see them in the footnote area at the bottom of the screenshot. As you can see the footnote calls are still taking up space even though I have styled them to remove the generated content call numbers.

This second screenshot shows the effect when the footnote-call numbers are present.

screenshot2.jpg
  1. screenshot.jpg244.3 kB
    Screenshot of space in document created by footnote-calls.
  2. screenshot2.jpg236.6 kB
    Supporting screenshot.
mikeday
Does the aside element have additional styling? It could just be creating an empty line box or something, but it's difficult to tell without seeing the actual markup and style. It would be convenient if you could capture the output from Textile before you process it with Prince.
Alex McKee
Thanks for the reply Mike, I appreciate it greatly. Below is the relevant section of output from Textile. I am sorry that it may be a little difficult to follow but I thought it would be best to post the source of the same part of the document that I used as an example for the screenshots.

The aside element has no particular styling (other than float: footnote) and I have tried setting it to display inline and inline block without any observable change to the behaviour shown in the screenshots. I've also set the margin and padding to zero and tried altering the width and height. Changer the latter properties does not affect the gap but it does affect the footnote itself.

<p>The origin of the City of Florence and the derivation of its name are alike involved in obscurity, which a host of conjectures has done but little to dispel. The most probable of these seems to be that given by Villani and accepted by Machiavelli, namely, that the inhabitants of Fiesole, which was a flourishing city in the time of the Etruscans, came down to the banks of the Arno for the purposes of trade. A small settlement thus sprung up at a very early period, on a spot (where the Mugnone runs into the Arno) which the Fiesoleans had used as a market and a port. When this little village, which went by the name of Campo Martis, developed into a town is uncertain, but it is beyond question that at a later period it was rebuilt by the Romans. Traces of walls of Roman workmanship have been discovered, and there is evidence of the existence of a town built on the usual plan of the Castrum a quadrangle traversed by two wide and perfectly straight streets, crossing it in the centre at right angles and dividing it into quarters. Remains have also been found of an amphitheatre in the Via de&#8217; Greci, of a theatre in the Via de&#8217; Gondi, of a Temple of Isis on the site of San Firenze, and of baths in the street still known as the Via delle Terme<sup class="footnote"><a href="#fn83674c588f9bbfe97" id="callout83674c588f9bbfe97">1</a></sup>. Various surmises have been made as to the date of this rebuilding. It has been assigned to the days of Julius Caesar<sup class="footnote"><a href="#fn278364c588f9bbfeb8" id="callout278364c588f9bbfeb8">2</a></sup>, to those of Sulla<sup class="footnote"><a href="#fn174774c588f9bbfed1" id="callout174774c588f9bbfed1">3</a></sup>, and to a yet earlier period.<sup class="footnote"><a href="#fn183304c588f9bbfee8" id="callout183304c588f9bbfee8">4</a></sup></p>

	<aside id="fn83674c588f9bbfe97" class="footnote">Villari, i. 67. </aside>

	<aside id="fn278364c588f9bbfeb8" class="footnote">Villani, lib. i. cap. 38. </aside>

	<aside id="fn174774c588f9bbfed1" class="footnote">Mommsen.</aside>

	<aside id="fn183304c588f9bbfee8" class="footnote">There is a statement in Florus&#8217; Abridgment of Livy that &#8220;Florentia&#8221; (or, according to an old <abbr title="manuscript">MS</abbr>, &#8220; Florentina&#8221;) was one of the four Municipia Spendidissima that were sold by Sulla after the Civil War, but it is probable that this passage relates to the town of Ferentino (Napier, i. 13). </aside>

	<p>Without fixing the date, Professor Villari thinks that it could not have taken place before <abbr title="Before Christ">BC</abbr> 200.<sup class="footnote"><a href="#fn63474c588f9beb1c6" id="callout63474c588f9beb1c6">5</a></sup> By <abbr title="Anno Domini">AD</abbr> 15 Florence had undoubtedly grown into importance, for Tacitus tells us that in that year several Italian towns sent deputations to Rome to oppose a scheme for the prevention of the overflow of the Tiber by turning the waters of its tributary, the Chiana, into the Arno, that was then under the consideration of the Senate. Of these towns Florence was one, and her emissaries were the spokesmen for all.<sup class="footnote"><a href="#fn63124c588f9beb1e5" id="callout63124c588f9beb1e5">6</a></sup></p>
mikeday
The problem here is that currently Prince is always creating a span to hold the footnote call, even if the footnote call does not have any content. So there will always be a line box for the asides, causing a gap to appear between the paragraphs.

There are a couple of possible workarounds for this behaviour. You can wrap the aside elements in another element that is absolutely positioned, taking them out of the normal flow where they won't take up space. (Unfortunately you can't apply this directly to the aside elements as a single element cannot be absolutely positioned and floated at the same time).

Another option is to move the aside elements inside the paragraph, either where the links are or just all at the end of the paragraph. This will allow them to be styled as empty inline boxes that will not take up any space. Although this requires a bigger change to the markup, moving the footnotes closer to their actual position in the text will reduce the chance of a footnote call appearing on a page and the actual footnote content being delayed to the next page, as can happen with the current markup.
mikeday
Actually there is one other option: hide the asides and turn the links into footnotes, using target-content() to capture the text from the aside elements that the links point to. For example:
sup.footnote { vertical-align: normal; font-size: 100%; text-indent: 0 }
sup.footnote a[href] {
    float: footnote;
    content: target-content(attr(href));
    color: inherit;
    text-decoration: none
}
aside { position: absolute; visibility: hidden }

This is heading in the right direction I think, as you really want the link element to generate the footnote call, not the aside element. However, you can see that the styling rules for doing this are a bit fragile, and only the text of the aside will be captured; any other markup will be lost.
Alex McKee
mikeday wrote:
The problem here is that currently Prince is always creating a span to hold the footnote call, even if the footnote call does not have any content. So there will always be a line box for the asides, causing a gap to appear between the paragraphs.


That is what I thought was happening, yes.

mikeday wrote:
There are a couple of possible workarounds for this behaviour. You can wrap the aside elements in another element that is absolutely positioned, taking them out of the normal flow where they won't take up space. (Unfortunately you can't apply this directly to the aside elements as a single element cannot be absolutely positioned and floated at the same time).


That will require additional logic in Textile (certainly possible) or additional Textile markup in the original documents. For obvious reasons the latter is not desirable.


mikeday wrote:
Another option is to move the aside elements inside the paragraph, either where the links are or just all at the end of the paragraph. This will allow them to be styled as empty inline boxes that will not take up any space. Although this requires a bigger change to the markup, moving the footnotes closer to their actual position in the text will reduce the chance of a footnote call appearing on a page and the actual footnote content being delayed to the next page, as can happen with the current markup.


Yes I tried that, it was one of the first things I thought of myself. However due to the way Textile works the footnotes are not detected if they are completely inline. This is perhaps something that could be addressed by changing the way Textile looks for footnotes.

mikeday wrote:
Actually there is one other option: hide the asides and turn the links into footnotes, using target-content() to capture the text from the aside elements that the links point to. For example:
sup.footnote { vertical-align: normal; font-size: 100%; text-indent: 0 }
sup.footnote a[href] {
    float: footnote;
    content: target-content(attr(href));
    color: inherit;
    text-decoration: none
}
aside { position: absolute; visibility: hidden }

This is heading in the right direction I think, as you really want the link element to generate the footnote call, not the aside element. However, you can see that the styling rules for doing this are a bit fragile, and only the text of the aside will be captured; any other markup will be lost.


That's a really elegant solution, thanks for that. I have tried it out. Unfortunately when using this solution instead of the footnote call linking to the marker the footnote marker links to itself. Also the issue with the markup is quite serious for my purpose. I was planning to convert the citations into links and so on.
mikeday
We've taken a look at this and it's going to be difficult to make the footnote calls completely disappear, as we need to know "where they are" in the document in order to know which page the footnotes should end up on. It sounds obvious, but if a footnote call appears on a particular page then Prince needs to try to place the footnote at the bottom of that same page if possible. If there is no footnote call, then it isn't clear where the footnote should go. We may be able to come up with a way to hack this so that footnote calls take up no real space, but it's not trivial.
Alex McKee
mikeday wrote:
We may be able to come up with a way to hack this so that footnote calls take up no real space, but it's not trivial.


I really appreciate your looking into it. I have an inkling of the difficulties that you describe and, to be honest, this is really an edge case anyway.

I'm going to look into changing the way Textile works with footnotes so as to make it more compatible with the CSS footnotes concepts and more compatible with Prince. I'll post back if I come up with a solution. :)
RichardForrester
Eh, I have a question that is similar but the opposite of this thread. My pdf is fine. Is there a way to hide the footnote or bracket it in the browser view but not mess up the pdf conversion?

Example of what I see in browser:

> This sentence has a footnote.Footnote content.

Example of what I would like to see in browser:

> This sentence has a footnote.

or:

> This sentence has a footnote.[1. Footnote content.]

It's a small thing, but I've got myself a pretty cool makeshift text editor for writing all my legal briefs and pleadings using Redux, React.js, Babel, EsLint, RethinkDB, and Webpack and all the cool new toys :). I like having my screen split with Sublime Text 3 and the browser for preview before I go to print to pdf. It's distracting seeing the footnotes just there in with the text but not having them pop out at all as footnotes.

:)

Edited by RichardForrester

mikeday
You could hide them with a rule like this:
@media screen {
    .fn { display: none }
}

Alternatively generated content could be used to display the footnote content.
RichardForrester
Thanks. Gosh, I'm really not good at CSS.

What kind of rule would I use to display the footnotes, say at the bottom after all the regular content?

Thanks in advance.
mikeday
I guess in the browser you could use absolute positioning, if the root element established a positioning context. That might be difficult to display them one after the other though.

Probably the simplest solution would be to use JavaScript to move the footnote elements to the bottom of the <body> element.