Footnotes in HTML: reimagined

157 views
Skip to first unread message

Rob Beezer

unread,
Sep 20, 2023, 1:57:36 PM9/20/23
to prete...@googlegroups.com
I'd welcome a permanent reworking of footnotes in HTML by someone with some
HTML/CSS and UI/UX interests. Yes, I'm looking at you, Andrew S. ;-)

* A popup, a disclosure element ("details"), collapsible button, or ...?
Whatever works.

* I'd render the content as wide (or nearly so) as the text. Just below, but
not too close? Definitely do not obscure the context or take the reader far,
far away. Extra credit if a second click on the footnote mark puts it away
(toggle).

* Has to render MathJax in the content. We can ban Sage Cells and Runestone
components (likely not legal right now anyway). Nothing interactive, just text.

* IIRC, EPUB has more explicit support for this (why not HTML???). Extra
credit if we can have a more abstract approach which works well for both. I can
elaborate on what I mean by that, especially in a Drop-In. This would also
suggest *not* relying on any Javascript.

Just one demo, *not* lobbying for this as *the* solution, and don't let the URL
fool you:

https://css-tricks.com/a-terrible-way-to-do-footnotes-in-html/

Rob

Andrew Scholer

unread,
Sep 20, 2023, 8:08:32 PM9/20/23
to prete...@googlegroups.com
That just sent me down a rabbit hole of epub3 spec... yech. I might need to pick someone's brain about that.

I'll start looking at the web side and try to at least get to a point where I can ask a bunch of questions at the Friday drop in.

Andrew Scholer (he/him/his)
Computer Science Instructor/Program Chair
Chemeketa Community College


--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect.

Rob Beezer

unread,
Sep 21, 2023, 11:17:34 AM9/21/23
to prete...@googlegroups.com
"yech" indeed. Welcome to my life. Wanna help with braille? ;-)

Perhaps you found it, we are using a supported device with

a/@epub:type="noteref"

(pretext-epub.xsl, from line 1228)

Seems every system has a separation of the footnote mark and the footnote
content, so that was the origin of my thoughts about abstraction, but perhaps
not worth the trouble.

I'll be available the first hour of Drop-In tomorrow if you want to chat.

Rob

On 9/20/23 17:07, Andrew Scholer wrote:
> That just sent me down a rabbit hole of epub3 spec... yech. I might need to pick
> someone's brain about that.
>
> I'll start looking at the web side and try to at least get to a point where I
> can ask a bunch of questions at the Friday drop in.
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor/Program Chair
> Chemeketa Community College
> 503.589.7649
> computerscience.chemeketa.edu/people/andrew-scholer/
> <http://computerscience.chemeketa.edu/people/andrew-scholer/>
> <mailto:pretext-dev%2Bunsu...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect <https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect>.
>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email
> to pretext-dev...@googlegroups.com
> <mailto:pretext-dev...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Andrew Scholer

unread,
Sep 21, 2023, 8:34:52 PM9/21/23
to prete...@googlegroups.com
Here are some mockups. Three possible formats: "Inline"/"Block"/"Speech Bubble":

Any could be implemented with details/summary or with epub friendly HTML. But you can't have both at the same time. Using the epub html means a bit of JS to make it work on a webpage.

Note the possible issues demonstrated at the bottom.  
<details> can't live in a <p>. But I don't think that be an issue in practice. PTX doesn't generate <p> tags in many places.
Spaces in the markup are a likely bugaboo. I don't think we want to count on authors not having any whitespace between the content preceding a footnote and the footnote tag. But if there is whitespace (e.g. "content <fn>") that will look odd when rendered. We probably want to figure out how to rip out any space before a footnote tag.

Andrew Scholer (he/him/his)
Computer Science Instructor/Program Chair
Chemeketa Community College

To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/MTAwMDAwOC5iZWV6ZXI.1695309452%40quikprotect.

Rob Beezer

unread,
Sep 22, 2023, 12:12:07 PM9/22/23
to prete...@googlegroups.com
Very nice! Thanks. I don't like to poison the well, but I'll give some
personal reactions first, and hope others will do the same. We can talk details
the first half of Drop-In (or I can stay on after the braille session the second
hour).

I've seen the footnotes that expand inline, and the resulting re-wrap I find a
bit jarring.

One of the things we have working very nicely with knowls is that they can open
*after* the end of the next block-like item. Not sure if we were opposed to to
the block behavior for footnotes where it splits a paragraph in the middle.

Which leaves me partial to the speech bubble. Since you suggest some JS would
be needed, could it be narrow if the content is short (a URL say) or wide (90%
of text width, say) when wrapping is necessary?

I could patrol places where we have "p" and perhaps replace them with div.para,
which I believe is the most frequent interperetation of a PTX "p". We'd hate to
say you can't have a footnote just because of some variablilty in implementation.

Rob

On 9/21/23 17:34, Andrew Scholer wrote:
> Here are some mockups. Three possible formats: "Inline"/"Block"/"Speech Bubble":
> https://codepen.io/ascholerchemeketa/full/YzdYMgG
> <https://codepen.io/ascholerchemeketa/full/YzdYMgG>
>
> Any could be implemented with details/summary or with epub friendly HTML. But
> you can't have both at the same time. Using the epub html means a bit of JS to
> make it work on a webpage.
>
> Note the possible issues demonstrated at the bottom.
> <details> can't live in a <p>. But I don't think that be an issue in practice.
> PTX doesn't generate <p> tags in many places.
> Spaces in the markup are a likely bugaboo. I don't think we want to count on
> authors not having any whitespace between the content preceding a footnote and
> the footnote tag. But if there is whitespace (e.g. "content <fn>") that will
> look odd when rendered. We probably want to figure out how to rip out any space
> before a footnote tag.
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor/Program Chair
> Chemeketa Community College
> 503.589.7649
> computerscience.chemeketa.edu/people/andrew-scholer/
> <http://computerscience.chemeketa.edu/people/andrew-scholer/>
>
>
> On Thu, Sep 21, 2023 at 8:17 AM Rob Beezer <bee...@privacyport.com
> <mailto:bee...@privacyport.com>> wrote:
>
> "yech" indeed.  Welcome to my life.  Wanna help with braille?  ;-)
>
> Perhaps you found it, we are using a supported device with
>
> a/@epub:type="noteref"
>
> (pretext-epub.xsl, from line 1228)
>
> Seems every system has a separation of the footnote mark and the footnote
> content, so that was the origin of my thoughts about abstraction, but perhaps
> not worth the trouble.
>
> I'll be available the first hour of Drop-In tomorrow if you want to chat.
>
> Rob
>
> On 9/20/23 17:07, Andrew Scholer wrote:
> > That just sent me down a rabbit hole of epub3 spec... yech. I might need
> to pick
> > someone's brain about that.
> >
> > I'll start looking at the web side and try to at least get to a point
> where I
> > can ask a bunch of questions at the Friday drop in.
> >
> > Andrew Scholer (he/him/his)
> > Computer Science Instructor/Program Chair
> > Chemeketa Community College
> > 503.589.7649
> > computerscience.chemeketa.edu/people/andrew-scholer/
> <http://computerscience.chemeketa.edu/people/andrew-scholer/>
> > <http://computerscience.chemeketa.edu/people/andrew-scholer/
> <http://computerscience.chemeketa.edu/people/andrew-scholer/>>
> >
> >
> > On Wed, Sep 20, 2023 at 10:57 AM Rob Beezer <bee...@privacyport.com
> <mailto:bee...@privacyport.com>
> >     <mailto:pretext-dev%2Bunsu...@googlegroups.com
> <mailto:pretext-dev%252Buns...@googlegroups.com>>.
> >     To view this discussion on the web visit
> >
> https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect <https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect> <https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect <https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyMy5iZWV6ZXI.1695232653%40quikprotect>>.
> >
> > --
> > You received this message because you are subscribed to the Google Groups
> > "PreTeXt development" group.
> > To unsubscribe from this group and stop receiving emails from it, send an
> email
> > to pretext-dev...@googlegroups.com
> <mailto:pretext-dev%2Bunsu...@googlegroups.com>
> > <mailto:pretext-dev...@googlegroups.com
> <mailto:pretext-dev%2Bunsu...@googlegroups.com>>.
> > To view this discussion on the web visit
> >
> https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com> <https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com?utm_medium=email&utm_source=footer <https://groups.google.com/d/msgid/pretext-dev/CACm44N_BiSgkUOqJu14uroXAVTtVqrSwDQVDL1a9kTwD6eEu%2Bg%40mail.gmail.com?utm_medium=email&utm_source=footer>>.
>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pretext-dev...@googlegroups.com
> <mailto:pretext-dev%2Bunsu...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/MTAwMDAwOC5iZWV6ZXI.1695309452%40quikprotect <https://groups.google.com/d/msgid/pretext-dev/MTAwMDAwOC5iZWV6ZXI.1695309452%40quikprotect>.
>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email
> to pretext-dev...@googlegroups.com
> <mailto:pretext-dev...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/CACm44N93AwPdid5WmgAVYWNKEfFAU-Qe%3DX0w2PA2%3DPSW_TC5-w%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CACm44N93AwPdid5WmgAVYWNKEfFAU-Qe%3DX0w2PA2%3DPSW_TC5-w%40mail.gmail.com?utm_medium=email&utm_source=footer>.

David W. Farmer

unread,
Sep 22, 2023, 12:40:44 PM9/22/23
to prete...@googlegroups.com

Am I correct that we are using "details" for everything that
currently is a knowl? Including when I have a knowl for
[Theorem 3.14] in the middle of the sentence? And so the case
of footnotes is not necessarily special?

I have become accustomed to the "open after the current paragraph"
behavior, and that is what (I assume) knowls will continue to do.

That requires JavaScript, right? Maybe not when an Example is
hidden, because it just opens where it is. But in the middle of
a paragraph, something has to tell the contents where to go.

Whatever the markup, I think the reader will expect the same behavior
in both cases. And I think people are pretty happy with the
"after the current enclosing block" behavior.

Regards,

David
> email to pretext-dev...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/MTAwMDA0Mi5iZWV6ZXI.1695399126%40quikprotect.
>

Rob Beezer

unread,
Sep 22, 2023, 1:11:21 PM9/22/23
to prete...@googlegroups.com
On 9/22/23 09:40, David W. Farmer wrote:
> Am I correct that we are using "details" for everything that
> currently is a knowl?  Including when I have a knowl for
> [Theorem 3.14] in the middle of the sentence?  And so the case
> of footnotes is not necessarily special?

Very short answer: no.

Content may electively be "born hidden", such as a Theorem. Or it is always
born hidden, like a footnote or a hint to an exercise. These had their content
"on the page" but was not visible until you click. This is "orginal" content.
Where born. Mostly blocks (but definitely footnotes are not blocks). Footnotes
will become whatever, born-hidden knowls are trialing as "details".

You can cross-reference many things from amny places, like a theorem. An indewx
entry is a specialized cross-reference (think about that one). The revealed
content lives in a file, partly since it may be referenced repeatedly, but also
so that it does not recursively pile-up more cross-reference content. This file
is *duplicate* content, not original, so must be sanitized (mostly no repeat
HTML id).

Short answer: born hidden knowls create their own problems when they have
interior born-hidden knowls (think exercise with hints). Moving to "details"
really helps reduce complexity. Cross-reference knowls are not changing.

> I have become accustomed to the "open after the current paragraph"
> behavior, and that is what (I assume) knowls will continue to do.

Really not changing, except for footnotes (see Anderw's demos).

> That requires JavaScript, right?  Maybe not when an Example is
> hidden, because it just opens where it is.  But in the middle of
> a paragraph, something has to tell the contents where to go.
>
> Whatever the markup, I think the reader will expect the same behavior
> in both cases.  And I think people are pretty happy with the
> "after the current enclosing block" behavior.

I think these concerns are moot. Two regressions right now that I can see:

1. MathJax will render math in born-hidden knowls before it is revealed.
Andrew suggests lazy loading.

2. "hint", "answer", and other "appendages" are currently laid-out inline, and
opening one does not disturb that. See current beta where layout is
line-by-line, which perhaps we can "fix" with CSS. But I think doing a reveal
will split that linear arrangment.

Alex Jordan

unread,
Sep 22, 2023, 1:29:14 PM9/22/23
to prete...@googlegroups.com
The schema allows an "fn" to contain an "xref". Let's say there is an
xref pointing to a definition (a block, not a section). Will the
speech bubble footnote work for that?
> --
> You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/MTAwMDAyOC5iZWV6ZXI.1695402680%40quikprotect.

Rob Beezer

unread,
Sep 22, 2023, 2:57:18 PM9/22/23
to prete...@googlegroups.com
On 9/22/23 10:29, Alex Jordan wrote:
> Will the speech bubble footnote work for that?

We'll make it work. It can be a traditional hyperlink if need be.

Once there is a PR for this, would you test out this case? Thanks.

Rob

Andrew Scholer

unread,
Sep 22, 2023, 4:09:04 PM9/22/23
to prete...@googlegroups.com
Weighing back in with my opinions re: the three flavors.

I like the inline & block versions over the speech bubble as they end up being less obtrusive after activation. They do cause a reflow of the existing content as they are revealed. But, once the note is visible, you are 100% free to read it, ignore it, move back and forth between preceeding and following content, etc... After activating the speech bubble, you are almost obligated to close it again before you continue reading.

Between the inline & block, shorter unstructured content probably looks better inline and longer more complex content looks better in a block. There seems to be a consensus between Rob & David that authors should be discouraged from using footnotes to do accomplish arbitrary goals. Maybe putting footnotes inline would help emphasize that there are better ways to embed many kinds of assides/notes/etc... in pretext.

Andrew Scholer (he/him/his)
Computer Science Instructor/Program Chair
Chemeketa Community College

--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.

Alex Jordan

unread,
Sep 22, 2023, 4:24:49 PM9/22/23
to prete...@googlegroups.com
In Andrew's example, these additions to the CSS might be worth considering.

.fake-p {
position: static;
}

.details-content {
position: absolute;
right: 0;
width: 200px;
}


The .fake-p position is already defaulting to static, but if you make
that explicit, then...

The position: absolute can position the details-content off to the
right of the fake-p.
> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CACm44N8EyjFUOcnJ-E32gNWZKB%2BmD5zzM_Rhe%2BA4gQHVG4G2SQ%40mail.gmail.com.

Andrew Scholer

unread,
Sep 22, 2023, 5:36:18 PM9/22/23
to prete...@googlegroups.com
@Alex
That approach would assume there is blank space off to the right of the content in which the footnote can be displayed. If the user's browser is too narrow to have a bunch of space, the footnote would obscure content, including possibly the footnote marker itself.

If multiple footnotes are on the same line, or even in close proximity, it would cause all kinds of other headaches. Which actually is another strike against the speech balloon approach. I added some consecutive footnotes to illustrate this issue.

Andrew Scholer (he/him/his)
Computer Science Instructor/Program Chair
Chemeketa Community College

Reply all
Reply to author
Forward
0 new messages