Mehuldobriyal123
commented
1 year ago One way to handle footnotes dynamically is to use a programmatic approach. You can create a function that takes the text and references as inputs, and then inserts the appropriate footnotes at the bottom of each page. This can be done using a loop that iterates through the text, and whenever it encounters a reference, it checks which page it is on and appends the corresponding footnote to that page's footer. Additionally, you can also use a numbering system for the footnotes, so that the footnotes on each page are numbered accordingly.
Another approach is to use a layout engine that supports dynamic content, such as CSS Grid Layout or Flexbox. These layout engines allow you to create a flexible and responsive layout, so that the footnotes can be automatically placed at the bottom of each page based on the amount of content on that page.
Finally, you can also use a layout manager library such as Flexbox or Grid Layout, that can take care of the layout for you. This way, you can focus on the logic of how to place the footnotes on the page, and the library will handle the actual layout
Right now I'm using a dynamic component as footer and select the footnotes using page numbers, but that only works when you know which footnote should go which page beforehand. Is there a proper way to handle footnotes dynamically? I already extract the references from text, for formatting.