Forum How do I...?

Formatting footnotes

sgartner
I have footnotes defined in my document and the text the footnotes is associated with is formatted quite broadly (from headers to normal text to small text). The problem is that the text of the footnote is reflecting the formatting of the text with which it is associated (for example, if the footnoted paragraph was horizontally centered and 12pt, the footnote text will come out centered in the output area and will be 12pt).

My basic question is, how do I control (homogenize) the formatting of the text of the footnotes in the same way I can control the formatting of the text of the footnote marker:

.footnote::footnote-marker
{
footnote-style-position: outside;
content: counter(footnote) " -" ' ';
FONT-SIZE: 8pt;
FONT-FAMILY: Arial, Helvetica;
}

I was hoping for something like this:

.footnote::footnote-text
{
FONT-SIZE: 8pt;
FONT-FAMILY: Arial, Helvetica;
TEXT-ALIGN: left;
}

It seems like a fairly obvious thing to be able to do.

Thanks for any advice.
mikeday
At the moment the only way to do this is to set the style for the footnote element itself. However, this will also affect the footnote call, which must then be styled with ::footnote-call if necessary. This is not very convenient. Perhaps in future we can make this easier by introducing a ::footnote-body pseudo-element, so that styling the footnote text does not interfere with the footnote call.
sgartner
mikeday wrote:
At the moment the only way to do this is to set the style for the footnote element itself. However, this will also affect the footnote call, which must then be styled with ::footnote-call if necessary. This is not very convenient. Perhaps in future we can make this easier by introducing a ::footnote-body pseudo-element, so that styling the footnote text does not interfere with the footnote call.


Could you be more specific? I have tried applying text formatting to the footnotes in every way I could think of. Below are my current styles, which do work to generate the footnotes, but still generate footnote text that reflects the source text formatting. As you can see I have tried setting the font to a giant font in a few places just to see if I could get something to change:

.footnote
{
    display: prince-footnote;
    counter-increment: footnote
    FONT-SIZE: 28pt; /* This has no effect */
    FONT-FAMILY: Arial, Helvetica; /* This has no effect */
}

/* This style only effects the footnote *number* formatting in the
   footnote area, not the footnote text formatting. */
.footnote::footnote-marker
{
    footnote-style-position: outside;
    content: counter(footnote) " -" ' ';
    FONT-SIZE: 8pt;
    FONT-FAMILY: Arial, Helvetica;
}

/* This style only effects the footnote *number* formatting in the text, 
   and does not effect the footnote text formatting. */
.footnote::footnote-call
{
    vertical-align: super;
    line-height: none;
}

@page
{
    /* stuff removed */
    @footnotes
    {
        border-top: solid black thin;
        padding-top: 8pt
        FONT-SIZE: 27pt; /* This has no effect */
        FONT-STYLE: normal; /* This has no effect */
        FONT-FAMILY: Arial, Helvetica; /* This has no effect */
    }

}
mikeday
Your .footnote rule is missing a semi-colon after the counter-increment, which could be why the following two declarations are ignored.
sgartner
mikeday wrote:
Your .footnote rule is missing a semi-colon after the counter-increment, which could be why the following two declarations are ignored.


What a catch, you are completely correct, that was keeping it from working. I can't believe in all my testing I missed that missing semi-colon. Unfortunately it also affects the footnote markers in the text, but I can live with that versus having the footnotes centering, etc.

Thanks Mike!
howcome
mikeday wrote:
At the moment the only way to do this is to set the style for the footnote element itself. However, this will also affect the footnote call, which must then be styled with ::footnote-call if necessary. This is not very convenient. Perhaps in future we can make this easier by introducing a ::footnote-body pseudo-element, so that styling the footnote text does not interfere with the footnote call.


In either case, yo have to use pseudo-somthing. So, I don't see how this would simplify things. Possibly, it could complicate things by introducing mulitple inheritance in CSS.
sgartner
howcome wrote:
mikeday wrote:
At the moment the only way to do this is to set the style for the footnote element itself. However, this will also affect the footnote call, which must then be styled with ::footnote-call if necessary. This is not very convenient. Perhaps in future we can make this easier by introducing a ::footnote-body pseudo-element, so that styling the footnote text does not interfere with the footnote call.


In either case, yo have to use pseudo-somthing. So, I don't see how this would simplify things. Possibly, it could complicate things by introducing mulitple inheritance in CSS.


I don't see any "multiple" here. Currently the footnote text is inheriting the format of the marker in the text (except the superscript). You can override the format of the marker using the .footnote rule, which changes both the marker and the footnote text. Adding a footnote-body element would allow overriding this .footnote inherited format in what seems to me to be a very normal inheritance way and would provide a way to do something that can't currently be done at all (that is, formatting the footnote text without affecting the marker text format).
newgen
Hi,

How to control footnote border rule length(width)

  1. currectpdf.PNG86.0 kB
  2. previouspdf.PNG48.0 kB
mikeday
You can use the border-clip property for this.
newgen
Thanks, Mikeday it's working fine