Footnotes, dealing with shot and long footnotes, applying a specific behavior for each area, or?
Hey all, hey @julientaq and @fchasen,
following our discussion on mattermost:
we are using the footnote branch to have notes appearing on the page of the footnote call. Working perfectly with a small extra script from our creation move-footnotes-inline.js. paged.polyfill.js footnotes-osp-example.html styles-footnotes-osp-example.css
Those footnotes are set in 2 columns. The visual problem we have is that when there is only one short footnote, this small phrase is split on the 2 columns which is unpleasant visually.
We could use a column-fill: auto;
but then we'll have issues when several or long footnotes are on the page.
We tried to select the short footnotes to only applied a specific column-fill on them but we seem to understand it is not possible to select a specific footnote, right ?
So we see 3 possibilities:
- add a min-height to this footnote area, insuring to have at least 3 lines in one columns for example, and accepting the right column to be then empty.
- managing to select the problematic footnotes and apply a
column-fill: balance;
on it - styling every footnotes with a
column-fill: auto;
but then having a float behaviour on it which will allow the rest of the text to go on to glow on the right side of the footnote. - maybe you see an other option :)
Let me know if you need more infos.
As said on mattermost, we know you are working on paged.js version where more options for footnotes will be implemented, so idea is not to ask you to bring it before planned on a table for us. If you have any short cut trick to help us on this issue that would be very welcome and if not then I hope you can use it as a concrete example for the next version :)
Thanks a lot already for reading this and for all the work already done on paged.js !
Sarah