如何固定我的乳胶数学术语的宽度和高度？

Question

如何固定我的乳胶数学术语的宽度和高度？

我目前正在编写一个交互式网络功能，我可以在其中单击乳胶数学术语，它会取消为零。然而，现在，它有点跳动/毛刺，因为一旦用户点击第一个数学项的大小（如图中以橙色突出显示）。

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

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

代码笔：

代码笔链接

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