Show-and-tell: equation annotation for MathJax

Show-and-tell: equation annotation for MathJax

[Guillaume Dehaene]

[-- Attachment #1: Type: text/plain, Size: 1157 bytes --]

Hello everyone,

I've done some work on building an equation annotation tool for MathJax.
My final objective is to build a pandoc / quarto lua filter to support a
markdown to HTML pipeline.

I've finished a POC in HTML + CSS + JS
View the poc here
<https://guillaumedehaene.github.io/mathjax_equation_annotation/equation_annotation.html>
The source code is here
<https://github.com/GuillaumeDehaene/mathjax_equation_annotation>

I'm overall happy with its current state, even though it is far from
perfect.
In particular, I'm worried that my hacks of the MathJax DOM elements could
break things: I'll see if I can get some feedback from that project.

I'd be very happy to get feedback on it, here or by direct email.

Best
Guillaume

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAKOoOVVRAzpb7BDJXzR7NG8VUMASoXzBvFqJe-gAGpxiuMAwrw%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 3802 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Gwern Branwen]

[-- Attachment #1: Type: text/plain, Size: 704 bytes --]

So this does not let you annotate individual elements of the equation to
provide popups/links or color them, but is only whole-equation level and
basically a way to a margin-note/sidenote that aligns nicely with the
equation?

-- 
gwern
https://gwern.net <https://www.gwern.net>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 1196 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Guillaume Dehaene]

[-- Attachment #1: Type: text/plain, Size: 2742 bytes --]

Yes, that's correct. This is a smart-margin feature.

It wouldn't be too hard technically and probably desirable to annotate
individual elements of an equation block
(for example, consider highlighting a term being moved from one side of the
equal side to the other in two successive equations)
However, I've run into two design / UX issues when considering this case:
- in the final HTML, how would the user interact with the annotation:
  - to see that an element is annotated (needs to work with nested
annotations, with multiple annotations, etc)
  - to see which elements are concerned by the currently-displayed
annotation (without interfering with the "is annotated" styling of the
other elements of the equation block)
  etc
- how would the writer specify the annotation, in a way that isn't too
disruptive of their normal workflow?
  - this is the bigger issue for me. without a rich-text editor which
supports highlighting of individual math elements, I don't know how to
handle this

even If I had a great answer, there remains the issue of hacking it inside
of MathJax.
At this point, it might be better to actually fork their code, instead of
writing something a posteriori

I'd love to have it as a feature someday, but it's in the distant future.

Le lun. 13 nov. 2023 à 17:32, Gwern Branwen <gwern-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> a écrit :

> So this does not let you annotate individual elements of the equation to
> provide popups/links or color them, but is only whole-equation level and
> basically a way to a margin-note/sidenote that aligns nicely with the
> equation?
>
> --
> gwern
> https://gwern.net <https://www.gwern.net>
>
> --
> You received this message because you are subscribed to the Google Groups
> "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com
> <https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com?utm_medium=email&utm_source=footer>
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAKOoOVUVuWVjcX7UkvgJTCErekjDarzFCeSRU7_%3DZyNNqgCVUA%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 3759 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Hypatia]

[-- Attachment #1.1: Type: text/plain, Size: 3077 bytes --]

I just asked about a similar thing: 
https://github.com/quarto-dev/quarto-cli/discussions/7679.

I'm going to see if you can hack up something based on your code. Thanks a 
lot!

On Tuesday, November 14, 2023 at 3:27:53 AM UTC-5 Guillaume Dehaene wrote:

> Yes, that's correct. This is a smart-margin feature.
>
> It wouldn't be too hard technically and probably desirable to annotate 
> individual elements of an equation block
> (for example, consider highlighting a term being moved from one side of 
> the equal side to the other in two successive equations)
> However, I've run into two design / UX issues when considering this case:
> - in the final HTML, how would the user interact with the annotation:
>   - to see that an element is annotated (needs to work with nested 
> annotations, with multiple annotations, etc)
>   - to see which elements are concerned by the currently-displayed 
> annotation (without interfering with the "is annotated" styling of the 
> other elements of the equation block)
>   etc
> - how would the writer specify the annotation, in a way that isn't too 
> disruptive of their normal workflow?
>   - this is the bigger issue for me. without a rich-text editor which 
> supports highlighting of individual math elements, I don't know how to 
> handle this
>
> even If I had a great answer, there remains the issue of hacking it inside 
> of MathJax.
> At this point, it might be better to actually fork their code, instead of 
> writing something a posteriori
>
> I'd love to have it as a feature someday, but it's in the distant future.
>
> Le lun. 13 nov. 2023 à 17:32, Gwern Branwen <gw...-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> a écrit :
>
>> So this does not let you annotate individual elements of the equation to 
>> provide popups/links or color them, but is only whole-equation level and 
>> basically a way to a margin-note/sidenote that aligns nicely with the 
>> equation?
>>
>> -- 
>> gwern
>> https://gwern.net <https://www.gwern.net>
>>
>> -- 
>> You received this message because you are subscribed to the Google Groups 
>> "pandoc-discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an 
>> email to pandoc-discus...-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
>> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com 
>> <https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com?utm_medium=email&utm_source=footer>
>> .
>>
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/4704092c-08bc-4755-a676-2f403166a3e3n%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 4888 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Hypatia]

[-- Attachment #1.1: Type: text/plain, Size: 3293 bytes --]

*I can

Sorry for the misleading typo... I didn't mean you to do that... lol

On Thursday, November 23, 2023 at 12:03:51 AM UTC-5 Hypatia wrote:

> I just asked about a similar thing: 
> https://github.com/quarto-dev/quarto-cli/discussions/7679.
>
> I'm going to see if you can hack up something based on your code. Thanks a 
> lot!
>
> On Tuesday, November 14, 2023 at 3:27:53 AM UTC-5 Guillaume Dehaene wrote:
>
>> Yes, that's correct. This is a smart-margin feature.
>>
>> It wouldn't be too hard technically and probably desirable to annotate 
>> individual elements of an equation block
>> (for example, consider highlighting a term being moved from one side of 
>> the equal side to the other in two successive equations)
>> However, I've run into two design / UX issues when considering this case:
>> - in the final HTML, how would the user interact with the annotation:
>>   - to see that an element is annotated (needs to work with nested 
>> annotations, with multiple annotations, etc)
>>   - to see which elements are concerned by the currently-displayed 
>> annotation (without interfering with the "is annotated" styling of the 
>> other elements of the equation block)
>>   etc
>> - how would the writer specify the annotation, in a way that isn't too 
>> disruptive of their normal workflow?
>>   - this is the bigger issue for me. without a rich-text editor which 
>> supports highlighting of individual math elements, I don't know how to 
>> handle this
>>
>> even If I had a great answer, there remains the issue of hacking it 
>> inside of MathJax.
>> At this point, it might be better to actually fork their code, instead of 
>> writing something a posteriori
>>
>> I'd love to have it as a feature someday, but it's in the distant future.
>>
>> Le lun. 13 nov. 2023 à 17:32, Gwern Branwen <gw...-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> a écrit :
>>
>>> So this does not let you annotate individual elements of the equation to 
>>> provide popups/links or color them, but is only whole-equation level and 
>>> basically a way to a margin-note/sidenote that aligns nicely with the 
>>> equation?
>>>
>>> -- 
>>> gwern
>>> https://gwern.net <https://www.gwern.net>
>>>
>>> -- 
>>> You received this message because you are subscribed to the Google 
>>> Groups "pandoc-discuss" group.
>>> To unsubscribe from this group and stop receiving emails from it, send 
>>> an email to pandoc-discus...-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
>>> To view this discussion on the web visit 
>>> https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com 
>>> <https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/c0cc24db-dcf7-4b6d-8d4f-a15a27fa2f82n%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 5562 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Hypatia]

[-- Attachment #1.1: Type: text/plain, Size: 3532 bytes --]

Hacked it: 
https://github.com/quarto-dev/quarto-cli/discussions/7679#discussioncomment-7649554!

On Thursday, November 23, 2023 at 12:04:36 AM UTC-5 Hypatia wrote:

> *I can
>
> Sorry for the misleading typo... I didn't mean you to do that... lol
>
> On Thursday, November 23, 2023 at 12:03:51 AM UTC-5 Hypatia wrote:
>
>> I just asked about a similar thing: 
>> https://github.com/quarto-dev/quarto-cli/discussions/7679.
>>
>> I'm going to see if you can hack up something based on your code. Thanks 
>> a lot!
>>
>> On Tuesday, November 14, 2023 at 3:27:53 AM UTC-5 Guillaume Dehaene wrote:
>>
>>> Yes, that's correct. This is a smart-margin feature.
>>>
>>> It wouldn't be too hard technically and probably desirable to annotate 
>>> individual elements of an equation block
>>> (for example, consider highlighting a term being moved from one side of 
>>> the equal side to the other in two successive equations)
>>> However, I've run into two design / UX issues when considering this case:
>>> - in the final HTML, how would the user interact with the annotation:
>>>   - to see that an element is annotated (needs to work with nested 
>>> annotations, with multiple annotations, etc)
>>>   - to see which elements are concerned by the currently-displayed 
>>> annotation (without interfering with the "is annotated" styling of the 
>>> other elements of the equation block)
>>>   etc
>>> - how would the writer specify the annotation, in a way that isn't too 
>>> disruptive of their normal workflow?
>>>   - this is the bigger issue for me. without a rich-text editor which 
>>> supports highlighting of individual math elements, I don't know how to 
>>> handle this
>>>
>>> even If I had a great answer, there remains the issue of hacking it 
>>> inside of MathJax.
>>> At this point, it might be better to actually fork their code, instead 
>>> of writing something a posteriori
>>>
>>> I'd love to have it as a feature someday, but it's in the distant future.
>>>
>>> Le lun. 13 nov. 2023 à 17:32, Gwern Branwen <gw...-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> a écrit :
>>>
>>>> So this does not let you annotate individual elements of the equation 
>>>> to provide popups/links or color them, but is only whole-equation level and 
>>>> basically a way to a margin-note/sidenote that aligns nicely with the 
>>>> equation?
>>>>
>>>> -- 
>>>> gwern
>>>> https://gwern.net <https://www.gwern.net>
>>>>
>>>> -- 
>>>> You received this message because you are subscribed to the Google 
>>>> Groups "pandoc-discuss" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send 
>>>> an email to pandoc-discus...-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
>>>> To view this discussion on the web visit 
>>>> https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com 
>>>> <https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com?utm_medium=email&utm_source=footer>
>>>> .
>>>>
>>>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/57a7749f-72bf-4d76-9422-296e57e80e42n%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 5939 bytes --]

Re: Show-and-tell: equation annotation for MathJax

[Guillaume Dehaene]

[-- Attachment #1: Type: text/plain, Size: 4920 bytes --]

That was fast: I was in the middle of brainstorming some ideas to help you
out!

I love how your solution is super terse, compared to my own super heavy
code.
Maybe I can find some improvement ideas.

Have you checked that your alignments are correct with a wide variety of
test cases?
What happens for me is that, when my JS function runs, the mathjax elements
do not necessarily have their final size, producing misalignment.
If that's the case, an easy solution is to simply repeat the alignment code
after a small delay.

Do you mind if I add this as an annotation style to my extension?

Cheers
Guillaume


Le jeu. 23 nov. 2023 à 09:41, Hypatia <knight.of.lambda.calculus@gmail.com>
a écrit :

> Hacked it:
> https://github.com/quarto-dev/quarto-cli/discussions/7679#discussioncomment-7649554
> !
>
> On Thursday, November 23, 2023 at 12:04:36 AM UTC-5 Hypatia wrote:
>
>> *I can
>>
>> Sorry for the misleading typo... I didn't mean you to do that... lol
>>
>> On Thursday, November 23, 2023 at 12:03:51 AM UTC-5 Hypatia wrote:
>>
>>> I just asked about a similar thing:
>>> https://github.com/quarto-dev/quarto-cli/discussions/7679.
>>>
>>> I'm going to see if you can hack up something based on your code. Thanks
>>> a lot!
>>>
>>> On Tuesday, November 14, 2023 at 3:27:53 AM UTC-5 Guillaume Dehaene
>>> wrote:
>>>
>>>> Yes, that's correct. This is a smart-margin feature.
>>>>
>>>> It wouldn't be too hard technically and probably desirable to annotate
>>>> individual elements of an equation block
>>>> (for example, consider highlighting a term being moved from one side of
>>>> the equal side to the other in two successive equations)
>>>> However, I've run into two design / UX issues when considering this
>>>> case:
>>>> - in the final HTML, how would the user interact with the annotation:
>>>>   - to see that an element is annotated (needs to work with nested
>>>> annotations, with multiple annotations, etc)
>>>>   - to see which elements are concerned by the currently-displayed
>>>> annotation (without interfering with the "is annotated" styling of the
>>>> other elements of the equation block)
>>>>   etc
>>>> - how would the writer specify the annotation, in a way that isn't too
>>>> disruptive of their normal workflow?
>>>>   - this is the bigger issue for me. without a rich-text editor which
>>>> supports highlighting of individual math elements, I don't know how to
>>>> handle this
>>>>
>>>> even If I had a great answer, there remains the issue of hacking it
>>>> inside of MathJax.
>>>> At this point, it might be better to actually fork their code, instead
>>>> of writing something a posteriori
>>>>
>>>> I'd love to have it as a feature someday, but it's in the distant
>>>> future.
>>>>
>>>> Le lun. 13 nov. 2023 à 17:32, Gwern Branwen <gw...-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> a écrit :
>>>>
>>>>> So this does not let you annotate individual elements of the equation
>>>>> to provide popups/links or color them, but is only whole-equation level and
>>>>> basically a way to a margin-note/sidenote that aligns nicely with the
>>>>> equation?
>>>>>
>>>>> --
>>>>> gwern
>>>>> https://gwern.net <https://www.gwern.net>
>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "pandoc-discuss" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>>> an email to pandoc-discus...-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
>>>>> To view this discussion on the web visit
>>>>> https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com
>>>>> <https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzAOVy1QkYuR1MRwnGix%2BKsJJKfSMdFQka97jTUabQLQg%40mail.gmail.com?utm_medium=email&utm_source=footer>
>>>>> .
>>>>>
>>>> --
> You received this message because you are subscribed to the Google Groups
> "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/57a7749f-72bf-4d76-9422-296e57e80e42n%40googlegroups.com
> <https://groups.google.com/d/msgid/pandoc-discuss/57a7749f-72bf-4d76-9422-296e57e80e42n%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAKOoOVUh%3DseSfpScCGywuvuTRxG1Tk4p00dSHCFacagw5DqXtw%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 7301 bytes --]