How do I fix the width and height of my latex math term?

user_14709667 0
Viewed 313

How do I fix the width and height of my latex math term?

I am currently coding an interactive web function where I can click on the latex math term and it'll cancel to zero. However, right now, it is a bit jumpy/glitchy because the size of the first math term changes (highlighted in orange as shown in the picture) once the user clicks on it.

Original State

After User Clicks on First Term

Is there a way where I can set the width and height of the orange box to constant width before and after clicking?

<p>
<span class="special">Mass Continuity Equation:</span> 
<span class="first" id="first" data-click-state="1">\({{\partial \rho} \over {\partial t}}\)</span>
<span id="second">\(+\)</span> 
<span id="third" data-click-state="1">\({{\partial u} \over {\partial x}}\)</span> 
<span id="symbol"> \(+\) </span> 
<span id="fourth" data-click-state="1"> \({{\partial v} \over {\partial y}}\)</span> 
<span id="fifth">\(+\)</span> 
<span id="sixth" data-click-state="1"> \({{\partial w} \over {\partial z}}\) </span>
<span id="seventh">\(= 0\)</span> 
</p>

After user clicks the first term, this will be rendered:

<p>
<span class="special">Mass Continuity Equation:</span> 
<span class="first" id="first" data-click-state="0">\(\require{cancel}\cancelto{0} {{\partial \rho} \over {\partial t}}\)</span>
<span id="second">\(+\)</span> 
<span id="third" data-click-state="1">\({{\partial u} \over {\partial x}}\)</span> 
<span id="symbol"> \(+\) </span> 
<span id="fourth" data-click-state="1"> \({{\partial v} \over {\partial y}}\)</span> 
<span id="fifth">\(+\)</span> 
<span id="sixth" data-click-state="1"> \({{\partial w} \over {\partial z}}\) </span>
<span id="seventh">\(= 0\)</span> 
</p>

CSS code:

p { font-size: 30px;}

Codepen:

CODEPEN LINK

mathjax css html
1 Answers

You can use \phantom{} to make a space that is the size of the canceled expression and use \llap{} to place the uncanceled expression on top of it, as in

\require{cancel}
\phantom{\cancelto{0}{\partial\rho \over \partial t}}
\llap{{\partial\rho \over \partial t}\kern .7em}

(The \kern .7em is to get the derivative placed properly within the space of the canceled term, and was determined experimentally.)

Note that you can use the action extension to handle toggling between the uncanceled sand canceled versions, so you really don't need javascript to accomplish this particular example.

Here is an example that uses \toggle actions to flip between uncanceled and canceled versions:

<script src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML"></script>

$$
\require{cancel}\require{action}
\def\dd#1#2{{\partial#1 \over \partial#2}}
\def\Cdd#1#2{\cancelto{0}{\dd{#1}{#2}}}
\def\Tdd#1#2{
  \toggle
    {\phantom{\Cdd{#1}{#2}}\llap{\dd{#1}{#2}\kern.6em}}
    {\color{red}{\Cdd{#1}{#2}}}
  \endtoggle
}
\Tdd \rho t + \; \Tdd u x + \; \Tdd v y + \; \Tdd w z
$$

user_5023340
Related