search

pressbooks / pressbooks-book

McLuhan is the default book theme for Pressbooks.
https://pressbooks.org
GNU General Public License v3.0
20 stars 16 forks source link

Footnotes violate left margin width in PDF format #587

Open mcgratay opened 5 years ago

mcgratay commented 5 years ago

Description

The body text of a footnote aligns with the leftmost margin of the body of the main text, causing the footnote numbers to violate the left margin of a page. This interferes with specifications of printers and print-on-demand services, because the footnote doesn't match the margin width the user has set in the theme options to match the specifications of their printing service.

Example: https://footnotemarginerror.textopress.com/

Screen Shot 2019-08-07 at 11 48 56 AM

The footnote numbers need to have the margin increased to match that of the body margin.

Affects all tested themes, including McLuhan, Andreesen, and Baker.

Steps to Reproduce

  1. Create a new chapter with a few paragraphs of dummy text
  2. Add a handful of footnotes to the chapter using the FN footnote tool on the visual editor toolbar
  3. Save the chapter
  4. Go to Export from the left sidebar menu and select PDF for print to export
  5. Download and view the PDF to see if the footnotes violate the left margin

Expected behavior: Footnotes fall within the margins set in the PDF Theme Options.

Actual behavior: Footnote numbers interfere with the left margin and cause errors for printer services.

SteelWagstaff commented 4 years ago

According to Prince's documentation (https://www.princexml.com/doc/11/footnotes/):

Footnote markers are rendered outside the footnote in the left margin area by default. If the CSS property footnote-style-position has value inside, the marker is rendered as the first inline box inside the footnote.

I think there are probably two ways to fix this. One would be to apply a margin-left rule to the .footnote class (1rem or 1.25 em seemed to work well in my testing). The other would be to change the footnote-style-position value to inside, and then style the resulting list text appropriately. Currently footnote styling rules live here: https://github.com/pressbooks/pressbooks-book/blob/dev/packages/buckram/assets/styles/components/specials/_footnotes.scss