Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Footnote is appearing on page before its call #1871

Closed
sahilrl opened this issue Apr 29, 2023 · 1 comment · Fixed by #1915
Closed

Footnote is appearing on page before its call #1871

sahilrl opened this issue Apr 29, 2023 · 1 comment · Fixed by #1915
Labels
bug Existing features not working as expected
Milestone
60.0

Comments

@sahilrl
Copy link
Contributor

sahilrl commented Apr 29, 2023 •
edited
Loading

Hello @liZe!

Please note the footnote number 14 which is being rendered on page 2 while it's footnote call site is on the next page.

weasyprint_bug_footnotes

PDF
output.pdf

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Jura:wght@700&display=swap"
          rel="stylesheet">
    <title>Document</title>
</head>

<body>
<header>
    
</header>

<footer>

</footer>

<table class="table-main">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quos, alias aspernatur dolore quisquam fuga tempora consequuntur! Nesciunt, maiores maxime, laudantium magnam distinctio error, libero fugiat nobis nihil aperiam enim?</p>
    <tbody class="last-section thetbody">
    <tr>
        <th colspan="2">Random Table</th>
    </tr>

    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus! quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
</tbody>
<tbody class="last-section thetbody">
    <tr>
        <th colspan="2">Random Table</th>
    </tr>

    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus! quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus!</span></td>
    </tr>
</tbody>
</table>

</body>

</html>

CSS

/* -----------------------------Global Settings-------------------------------- */

* {
  margin: 0;
  padding: 0;
}

:root {
    --light-blue: #F1F6FF;
    --dark-blue: #3883FA;
    --blue: #45b6fe;
    font-family: 'Roboto', sans-serif;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
}

body {
  font-size: 90%;
}


/* --------------------------------------body--------------------------------------- */

header {
    display: flex;
    justify-content: space-around;
    color: #152238;
    background-color: var(--light-blue);
    align-items: center;
    width: 100%;
    height: 5em;
  }

table {
  width: 100%;
  counter-reset: thetbodyCount;
  page-break-after: always;
  border-collapse: separate;
  border-spacing: 0 1em;
}

table tr th {
  padding: 0.8em 0.6em;
  text-align: left;
  background-color: var(--dark-blue);
  color: #fff;
  min-width: 100%;
  font-weight: 700;
}

tbody.last-section::before {
  content: '';
  display: block;
  height: 1em;
}

.thetbody tr td::before {
  content: counter(thetbodyCount)". ";
  counter-increment: thetbodyCount;
  color: var(--dark-blue);
}

/* ----------------------------running elements------------------------------------ */


@page {
  size: portrait;
  margin-left: 0;
  margin-right: 0;
  padding: 2% 3% 0 3%;

  @top-center {
    content: element(headerCenter);
    width: 100%;
    height: initial;
    background-color: var(--light-blue);
  }

  @bottom-right {
    content: element(footerRight);
    width: 100%;
    height: initial;
  }

  @footnote {
    float: bottom;
    border-top: 0.1em solid #A3AFC3;
  }

}
header {
  position: running(headerCenter);
}

footer {
  position: running(footerRight);
}


/* -----------------footnotes------------------------------- */
span.footnote {
  float: footnote;
  footnote-display: inline;
  footnote-policy: line;
  padding-right: 0.8em;
 }

::footnote-call {
  vertical-align:super;
  font-size: 70%;
  color: red;
}


/* -------------page number----------- */

footer::after {
  content: counter(page);
  color: black;
  background-color: #F1F6FF;
  padding: 1.3em;
  position: relative;
  left: 45em;
 
}

Weasyprint Version: 58.1

Thankyou
@liZe liZe added the bug Existing features not working as expected label May 3, 2023
@liZe
Copy link
Member

liZe commented May 3, 2023

Thanks for the example, I can reproduce.

@liZe liZe changed the title Footnote is appearing on page before it's call. Footnote is appearing on page before its call May 3, 2023
@sahilrl sahilrl mentioned this issue Jul 16, 2023
Merged
liZe added a commit that referenced this issue Jul 22, 2023
@liZe
Merge pull request #1915 from sahilrl/Footnote_is_appearing_on_page_b…
361afcb 
…efore_its_call_Issue_#1871

Bug Fix: Footnote is appearing on page before its call #1871
@liZe liZe added this to the 60.0 milestone Jul 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
60.0
Development

Successfully merging a pull request may close this issue.

Bug Fix: Footnote is appearing on page before its call #1871
2 participants
@liZe @sahilrl