Issue #364 Implement footnotes at bottom of page #711

danfickle · 2021-05-29T12:28:57Z

Now documented on the wiki under footnotes.

Fixes #364.

Finally ready!

~~Need tests and fixes for:~~

Performance:

Many footnotes.
Footnotes in amongst many lines of text.
Footnotes nested at great depth.

Blockers:

Don't break Java2D single page output. - Footnotes inside single page output will place them between virtual pages (ie. nonsensical but should not crash).
Java2D multi-page output. - Works correctly.
Make sure PDF/UA content is not broken. - Footnotes are NOT supported in PDF/UA.

More:

Counter reset on page-break - Not supported for this PR.
Links in documents with footnotes are not targeting correctly.
Footnotes called from positioned content (absolute, relative, fixed) - Absolute and relative works but physical ordering of footnotes may be different to counter order. Banned from fixed area.
Footnotes called from page margins - Banned (treated as normal content) and warning logged.

Inside footnotes:

As footnote element:

In normal flow meeting footnotes:

Also

This markup:

<html>
<head>
<style>
@page {
    size: 300px 300px;
}
@page {
    @footnote {
        float: bottom;  /* The only supported position */
        box-sizing: border-box;
        width: 100%;    /* Same width as body */
        border: 1px solid green;
    }
}
body {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
}
::footnote-call {
  counter-increment: footnote 3;
}
div.footnote {
  float: footnote;
  color: orange;
}
.footnote::footnote-call {
  font-family: sans-serif;
  font-size: 14px;
  padding: 2px;
  color: red;
  background-color: black;
  content: "[" counter(footnote) "]";
}
.footnote::footnote-marker {
  color: blue;
  content: counter(footnote) ". ";
}
</style>
</head>
<body>
<p style="margin-top: 0;">
  This text needs some footnotes. <div id="1" class="footnote">This is a footnote.</div>
  Also a footnote for this sentence. <div id="2" class="footnote">Another <strong>footnote</strong>!</div>
</p>

<p style="page-break-before: always;">
  Footnote numbers should be 3, 6 and 9. <div id="3" class="footnote">Just to be silly this is a really long footnote that will need wrapping and such.</div>
</p>

<p style="page-break-before: always; margin-bottom: 0;">
  One two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen
  seventeen eighteen nineteen twenty
  <div id="4" class="footnote">
    This is a very long footnote that will need wrapping. Someone once said
    about footnotes that they are hard to implement!
  </div>
  thirty fourty fifty sixty seventy eighty ninety hundred
  thousand million billion trillion
</p>
</body>
</html>

will result in something like this:

@a-leithner

Test kindly provided by @a-leithner

Still struggling with correct counter-reset behavior.

Still needs loads of work but sample is rendering something.

Also cleanup and minor extract-method refactor.

Specifically, line boxes that meet with footnotes will now behave somewhat correctly.

Also box spliterator for descendants.

Placement and link destination.

…y in-flow layers.

We are now using a normal layer rather than painting footnotes separately as that approach did not work when the footnote area went over multiple pages.

This is to deal with multi-page footnote areas, which are now mostly working. We now reserve entire pages when footnotes flow over multiple pages.

…two pages.

Plus: Overhauled BlockBoxing while trying to fix issue. Now better performance and cleaner code. Added benchmarks for BlockBoxing.

…tes. Also cleanup and documentation around styling code.

Table footer is overlapping footnote area.

It is sitting above the footnotes.

Or even as the footnote element itself.

…eracting with footnotes. Minor fix to prevent anchor element being stripped from footnote calls which are floated.

With more work on correct boxing, so that images may now be used as footnote calls and footnote markers.

Since we wrap generated content correctly now, one can use a border on the generated content box (such as before or after) and get Chrome matching results, rather than a border on each item in the content property list. With test proof: Test for pseudo elements with different display values. Test for using an image as footnote-call. Test for using an image as footnote-marker.

Tests non-paginated table content works inside footnote body as well as footnotes being called from inside an in-flow table. Also tests use of before and after pseudo elements in the footnote element.

Footnotes seem to cause problems with the destination of in-flow targets.

…ved. Problem was that when a pending box was added, then removed from a line, it link target was not being removed. Also some documentation and cleanup.

By processing them as non-footnote content.

Footnotes should be display: block, position: static, float: none and non-replaced. Treat invalid elements as normal content. With test proof.

Unsupported but does not cause infinite loop, OOM, etc.

So it picks up orphans and widows. Also proof for footnotes basic test.

Multi-page output is correct. Single page output produces footnotes in between content which is nonsensical but we are primarily a paged renderer.

…nesting value.

danfickle · 2021-09-12T13:57:25Z

Footnote terminology

danfickle added 10 commits May 25, 2021 13:44

#364 Basic test for footnotes (failing).

4509837

Test kindly provided by @a-leithner

#364 Add footnote and bottom as allowed values for float.

2bc0a97

#364 Progress on pseudo classes plus cleanup of BoxBuilder.

d28dc9b

#364 counter-increment support for footnotes.

630842f

Still struggling with correct counter-reset behavior.

#364 Very early proof-of-concept for footnotes.

30e19b3

Still needs loads of work but sample is rendering something.

#364 Create a box for footnote at-rule and place footnotes in it.

f8b3cb0

#364 Footnotes positioned correctly on multiple pages.

ab2e563

Output footnote-call before footnote-marker to correct counters.

885af09

Also cleanup and minor extract-method refactor.

Better box building, at least when footnote is inline.

0edc576

#364 Start the work of the meeting of in-flow content with footnotes.

46b796d

Specifically, line boxes that meet with footnotes will now behave somewhat correctly.

danfickle mentioned this pull request May 29, 2021

Footnotes not supported #364

Closed

danfickle added 3 commits June 2, 2021 18:27

#364 Fix for double-adding footnotes when satisfying widows/orphans.

5372cb5

Also box spliterator for descendants.

#364 Implement links from footnote-call to footnote-marker.

4a99a8c

#364 Passing test for footnote-call links.

2f8f28a

Placement and link destination.

danfickle mentioned this pull request Jun 5, 2021

#715 replace printStacktrace() #716

Merged

danfickle added 10 commits June 5, 2021 14:40

#364 Fix double painting of footnotes by making sure not linked to an…

b706ddf

…y in-flow layers.

#364 Multi-page footnotes.

e027b47

We are now using a normal layer rather than painting footnotes separately as that approach did not work when the footnote area went over multiple pages.

#364 Moved footnote management from PageBox to dedicated manager.

1070277

This is to deal with multi-page footnote areas, which are now mostly working. We now reserve entire pages when footnotes flow over multiple pages.

#364 Cleanup and documentation.

04ff372

#364 Implement max-height support in footnote at-rule.

9775a74

#364 Prevent lines in multi-page footnote area from splitting across …

889069d

…two pages.

#364 Test for footnotes with a line-height greater than page height.

b923763

#364 Failing test for blocks in footnotes.

541545e

Plus: Overhauled BlockBoxing while trying to fix issue. Now better performance and cleaner code. Added benchmarks for BlockBoxing.

#364 Fix logic error and build in BlockBoxing.

c1af88d

#364 Finally got boxing correct including for block content in footno…

f6d67fe

…tes. Also cleanup and documentation around styling code.

This was referenced Jun 16, 2021

Upgrade PDFBox and PDFBoxGraphics2D #722

Merged

Upload to maven central via bintray. #7

Open

danfickle added 3 commits June 20, 2021 17:14

#364 Move footnote tests to their own class and folder.

312e7a1

#364 Failing test for paginated table with footnotes.

d1a814e

Table footer is overlapping footnote area.

#364 Implement footnotes called from paginated tables.

7393704

danfickle added 24 commits August 1, 2021 14:23

#364 Failing test for position: fixed content.

d33008f

It is sitting above the footnotes.

#364 When positioning fixed elements exclude footnote area.

c134383

#364 Successful test for absolute/fixed inside footnote elements.

0e26149

Or even as the footnote element itself.

#364 Tests floats in footnotes, floated footnote calls and floats int…

53e7c8b

…eracting with footnotes. Minor fix to prevent anchor element being stripped from footnote calls which are floated.

#364 - Images with footnotes.

25a3b34

With more work on correct boxing, so that images may now be used as footnote calls and footnote markers.

#364 Non-paginated tables with footnotes test with proof.

c581ae0

Tests non-paginated table content works inside footnote body as well as footnotes being called from inside an in-flow table. Also tests use of before and after pseudo elements in the footnote element.

#364 Two link tests with footnotes (one failing).

f10ab03

Footnotes seem to cause problems with the destination of in-flow targets.

#364 Fix linking to the wrong location when an InlineContentBox is mo…

22222f0

…ved. Problem was that when a pending box was added, then removed from a line, it link target was not being removed. Also some documentation and cleanup.

#364 Treat footnotes inside footnotes gracefully.

f329721

By processing them as non-footnote content.

#364 Warn if an invalid element is being used as a footnote.

228744a

Footnotes should be display: block, position: static, float: none and non-replaced. Treat invalid elements as normal content. With test proof.

#364 Tests unsupported paginated table inside a footnote.

efa3310

Unsupported but does not cause infinite loop, OOM, etc.

#364 More warnings and filtering around invalid footnote styles.

ac0f7ed

#364 Passing test for footnotes with inline-block elements.

7e9e766

#364 Passing test for footnotes with transforms.

ceaa17a

#364 Make footnote-body inherit styles from footnote element.

7a5124d

So it picks up orphans and widows. Also proof for footnotes basic test.

#364 Test proof for multi-page footnotes test.

443a076

#364 Proofs for positioned content outside and inside footnotes.

8f1d6c7

#364 Test for calling footnotes from positioned content.

a815eb1

#364 Proofs for several footnote tests.

055c0b3

#364 Ban footnotes inside page margins.

edc438a

#364 Rough performance tests for footnotes.

33bcce1

#364 Java2D manual test for footnotes.

3c5fe74

Multi-page output is correct. Single page output produces footnotes in between content which is nonsensical but we are primarily a paged renderer.

#364 Due to a stack overflow on GitHub actions we will try a smaller …

863b840

…nesting value.

danfickle marked this pull request as ready for review September 6, 2021 13:02

danfickle merged commit b87ef1f into open-dev-v1 Sep 6, 2021

danfickle deleted the issue_364_footnotes branch September 6, 2021 13:05

danfickle added the has passing test label Sep 12, 2021

Phq-art mentioned this pull request May 30, 2022

Display: table not working anymore after updating to v1.0.10 used in pseudo-element :after #844

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue #364 Implement footnotes at bottom of page #711

Issue #364 Implement footnotes at bottom of page #711

danfickle commented May 29, 2021 •

edited

Loading

danfickle commented Sep 12, 2021

Issue #364 Implement footnotes at bottom of page #711

Issue #364 Implement footnotes at bottom of page #711

Conversation

danfickle commented May 29, 2021 • edited Loading

danfickle commented Sep 12, 2021

Footnote terminology

danfickle commented May 29, 2021 •

edited

Loading