[tex4ht] tex4ht remove image id from HCode passed. Makes animation no longer work

Wed Jan 31 04:13:40 CET 2024

I found the fix.

I just needed to do this

\HCode{
<img id="#4" src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline

instead of

\HCode{
<img id=#4 src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline

as I had it. I must have changed this myself without knowing. Now with this change the HTML
does indeeded has the id there:

<img id='codeperiodicanim' rel:animated_src='anim.gif' rel:auto_play='0' src='anim_COVER.png' width='750' />

THis is little strange that I had to do <img id="#4" and not <img id=#4

Because in HTML  id=codeperiodicanim  works (without the '') and also
id='codeperiodicanim' works.

OK. From now on will make sure to use id="#4" from now on.

Case closed.

Thanks,
--Nasser

On 1/30/2024 8:57 PM, Nasser M. Abbasi wrote:
> I had this code working for many years.
> 
> Now for some reason when I compiled the page again using tex4ht
> in TL 2023 animations on the page no longer run in HTML.
> 
> After much debugging, I found that <IMG id=...>  losses the id=....
> part when HTML is generated.
> 
> The code I use must use specific id name which is passed to it
> for the image in order for the HTML animations to work.
> 
> I use external javascript library (libgif), which uses this image id
> to add a stop/start/pause for the animation. (not shown in this example)
> 
> Below I show MWE and the resulting HTML. We see the id=... is missing
> from the <IMG  > tag.
> 
> --------------- A.tex-----
> \documentclass[12pt]{book}
> 
> \ifdefined\HCode
> \newcommand{\addGIFX}[4]
> {
> \HCode{
> <img id=#4 src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline
>    <br>
>    <script type="text/javascript">\Hnewline
>    var #4 = new SuperGif({ gif: document.getElementById('#4') } );\Hnewline
>    #4.load();\Hnewline
>    </script>\Hnewline
>     <a href="javascript:;" onmousedown="#4.pause(); return false;">Pause</a>\Hnewline
>     <a href="javascript:;" onmousedown="#4.play(); return false;">Play</a>\Hnewline
>     <a href="javascript:;" onmousedown="#4.move_to(0); return false;">Restart</a>\Hnewline
>     <a href="javascript:;" onmousedown="#4.move_relative(1); return false;">Step forward</a>\Hnewline
>     <a href="javascript:;" onmousedown="#4.move_relative(-1); return false;">Step back</a>\Hnewline
>     }
> }
> \fi
> 
> \begin{document}
> 
> \ifdefined\HCode
> \addGIFX{"anim.gif"}{"750"}{"anim_COVER.png"}{codeperiodicanim}
> \fi
> \end{document}
> ---------------------------
> 
> Now when I compile the above using
> 
> make4ht -ulm default -a debug A.tex "mathjax,htm,fn-in,notoc*,p-width,nostyle"
> 
> This is the HTML
> 
> --------------------
> <!DOCTYPE html>
> <html lang='en-US' xml:lang='en-US'>
> <head><title></title>
> <meta charset='utf-8' />
> <meta content='TeX4ht (https://tug.org/tex4ht/)' name='generator' />
> <meta content='width=device-width,initial-scale=1' name='viewport' />
> <link href='A.css' rel='stylesheet' type='text/css' />
> <meta content='A.tex' name='src' />
> <script>window.MathJax = { tex: { tags: "ams", }, }; </script>
>    <script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js' type='text/javascript'></script>
> </head><body>
> <!-- l. 25 --><p class='noindent'> <img rel:animated_src='anim.gif' rel:auto_play='0' src='anim_COVER.png' width='750' />
> <br /> <script type='text/javascript'>
> var codeperiodicanim = new SuperGif({ gif: document.getElementById('codeperiodicanim') } );
> codeperiodicanim.load();
> </script>
> <a href='javascript:;' onmousedown='codeperiodicanim.pause(); return false;'>Pause</a>
> <a href='javascript:;' onmousedown='codeperiodicanim.play(); return false;'>Play</a>
> <a href='javascript:;' onmousedown='codeperiodicanim.move_to(0); return false;'>Restart</a>
> <a href='javascript:;' onmousedown='codeperiodicanim.move_relative(1); return false;'>Step forward</a>
> <a href='javascript:;' onmousedown='codeperiodicanim.move_relative(-1); return false;'>Step back</a>
> 
> </p>
>    
> </body>
> </html>
> -------------------------------------
> 
> The important part of all the above is this one line
> 
> <img rel:animated_src='anim.gif' rel:auto_play='0' src='anim_COVER.png' width='750' />
> 
> You see, the id is missing. When I change the above manually and add
> the id=... so it becomes
> 
> <img id=codeperiodicanim rel:animated_src='anim.gif' rel:auto_play='0' src='anim_COVER.png' width='750' />
> 
> Now animation works (after loading external libgif on my end)
> 
> For some reason in current tex4ht the call
> 
> \addGIFX{"anim.gif"}{"750"}{"anim_COVER.png"}{codeperiodicanim}
> 
> Is not passing the 4th argument #4 which is the id to the javascript
> code as it should using \newcommand given above.
> 
> Is there something I need to correct in the above newcommand
> to make text4ht adds id= to the HTML <IMG> it generates using the 4th
> argument as shown above?
> 
> TL 2023
> 
>> which tex4ht
> /usr/local/texlive/2023/bin/x86_64-linux/tex4ht
>> make4ht --version
> make4ht version v0.3m
> 
> 
> Thanks
> --Nasser
> 
> 
> 
> 
> 