How to Justify Footnotes in PDF?

Exports
1

We’d like to justify the footnotes in the PDF export, but the following CSS doesn’t seem to have any effect:

.footnote p {
  text-align: justify !important;
}

Is there a better way to target or apply justification to footnotes in the PDF output? Any CSS recommendations would be appreciated.

Thanks in advance!

2

Hi there,
Without knowing which theme you are using and what custom CSS you have otherwise applied, it is difficult to give good advice here.
Most themes already have text and footnotes justified. So if that’s not the case for you, then you may have overwritten the CSS for the p elements. Footnotes in the PDF are p elements and derive their styling from its attributes.
If you want to target footnotes with additional styling, you could wrap each footnote content in a div, assign it a class and then target that class with your CSS.
In the code editor this would look like this:

[footnote]<div class="justify">Footnote content</div>[/footnote]

In the Custom CSS for PDF you would add

.justify {
   text-align: justify;
}
3

Hi,
Thank you. This workaround solves my issue.
FYI, the active theme is McLuhan 2.26. and the default for us is “text-align: left”
Thanks again!

1 Like
4

To justify footnotes in a PDF export, make sure the PDF generation tool you’re using supports CSS styling for footnotes—some tools (like PrinceXML or WeasyPrint) handle this better than others. If your current tool supports it, try targeting the correct selector by inspecting the generated HTML structure first. For example, try using .footnote, .footnote p together or even div.footnote p depending on your structure, and confirm the styles aren’t being overridden elsewhere. Also, ensure the style is applied before PDF generation, not afterward.