How to write \cancel{} with the new value

[rudolf-adamkovic]

I would like to use \cancel{} with the new value, like the value “1” here:

Is this possible with KaTeX?

[ronkok]

I'm afraid that KaTeX does not support the \cancelto function.

I don't know any way to write that function without a page refresh. And KaTeX avoids doing a page refresh.

[rudolf-adamkovic]

I see. Thank you for taking time to reply.

[mbourne]

Here's a proposal for cancelTo. It's a hacky proof of concept and the formatting could be improved a lot, but I hope it's useful.

https://bourne2learn.com/math/katex-experiments/cancelTo-proposal.html

[ronkok]

@mbourne I like your code. It makes a nice sharp arrowhead.

The trouble is that KaTeX does not know the width of anything except single characters. It very carefully keeps track of all vertical distances, but for horizontal layout, it just writes the characters side-by-side and lets the browser work out horizontal alignment. Things like fraction lines and stretchy arrows are specified via clever CSS.

So if you had a term like (\frac{1}{x+1})^2 and you wanted to zero out that whole term, I can't use your method, because I don't know how wide the term is. That leaves us with some less-than-perfect options:

1. Do a second pass after the browser has rendered the math. This is slow and it can't be used for server-side rendering.
2. Do a major re-write of KaTeX that keeps track of all horizontal distances. Not something I am going to do myself. Others are welcome to it.
3. Write a version of \cancelto that can accept only a simple string of ordinary characters. It would fail and write an error message for any expression that contains an operator. This option actually does satisfy many of the use cases for \cancelto, but it would fail often enough to be irritating. There would be never-ending requests like "Could you improve \cancelto just enough to include x+1? How about x^2?"

Personally, I am going to not write option 3 just to avoid all the follow up requests. Again, others are welcome to it.

[mbourne]

Hi Ron
I hear what you're saying, and I have no idea about the deep inner workings of KaTeX, but let me (for the sake of the exercise) pursue this a bit more.

(1) I edited the "proposal" page just now to see what was involved with canceling an expression that was a bit more involved. (I used the OP's example). As you see, it's still possible to kind-of get it working.

(2) Since I fall short on the divinity quality, I am not present at the moment of creation of the SVG, so need to create the arrow head after the "load" event. I obtained the dimensions of the SVG using getBoundingClientRect.

It seems to me it would be possible to obtain those dimensions immediately after the SVG is created and then add the arrow head, wouldn't it? (I get that may not be possible for server-side rendering, since I guess it is not on the DOM until it appears in the browser. Headless browser on the server, maybe...?)

(3) For the demo, I used a large font to see what was going on (since my arrow heads or "1"s would often disappear). Using a normal page font size, this is about the best I could do (just looks like a blob to me):

If the SVG was wider for \cancelTo, it would work better as the arrow head could be made longer.

BTW, I ended up changing the SVG so the right end went up 85% to the top, otherwise the top part of the arrow head would sometimes be cut off.

I'll go away now... :-)

[edemaine]

getBoundingClientRect would be very difficult to incorporate into the current KaTeX workflow, which is essentially LaTeX → HTML string, without DOM. This is largely by design, for efficiency and for server-side rendering. Maybe DOM-based features would make sense as an extension, but not base KaTeX?

Personally I feel like @ronkok's second approach (keep careful track of widths) would be the way to go long-term (though likely hard, especially dealing with ligatures/kerning in fonts). For reference, MathJax does this (I believe) when rendering to SVG — something I'd also love to have in KaTeX, and probably a more pressing need than \cancelTo (for me anyway — I used it to build https://github.com/edemaine/tex2svg-webworker which I use in https://github.com/edemaine/cocreate which needed SVG rendering).

[JacobBeaudry]

This is how I handled cancellations before I learnt about \cancelto. There's no arrowhead, and it's not perfect, but maybe it's better than nothing. Here are two options with slightly different alignment:

\frac{\overset{\phantom{\normalsize{\cancel{(3x-1)}}}1}
              {\cancel{(3x-1)}}}
      {2x^2 \underset{1\phantom{\normalsize{\cancel{(3x-1)}}}}{\cancel{(3x-1)}}}

Or:

\frac{\overset{\phantom{\normalsize{\cancel{(3x-1)}}}\hspace{1em}1}
              {\cancel{(3x-1)}}}
      {2x^2 \hspace{-.5em}\underset{1 \hspace{1em}\phantom{\normalsize{\cancel{(3x-1)}}}}{\cancel{(3x-1)}}}

If you need to use it more than once, it's probably simplest to implement it as a macro. Personally, I don't bother with the \hspace commands, as I find it's clear from context that the overset value is the resulting value. Hope this may be of some help.

[MrOsta]

@JacobBeaudry great implementation, i just simply used \underset & \overset. Like that: \underset{2}{\cancel{4}}