html - 如何固定我的 latex 数学术语的宽度和高度？

Question

如何固定我的 latex 数学术语的宽度和高度？
我目前正在编写一个交互式网络功能，我可以在其中单击 latex 数学术语，它会取消为零。然而，现在，它有点跳动/毛刺，因为一旦用户点击第一个数学术语的大小就会发生变化(如图中以橙色突出显示)。


有没有办法可以在单击前后将橙色框的宽度和高度设置为恒定宽度？

<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>

用户单击第一个术语后，将呈现:

<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代码:

p { font-size: 30px;}

代码笔:
CODEPEN LINK

Answer 1

您可以使用 \phantom{}创建一个与取消表达式大小相同的空间并使用 \llap{}将未取消的表达式放在它上面，如

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

( \kern .7em 是为了将导数正确放置在取消项的空间内，并通过实验确定。)
请注意，您可以使用 action扩展来处理未取消的沙取消版本之间的切换，所以你真的不需要 javascript 来完成这个特定的例子。
这是一个使用 \toggle 的示例在未取消和取消版本之间切换的操作:

<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
$$