\overrightarrow TeX command implemented

[erichake]

I followed the \overline model to implement the \overrightarrow command. The css trick is in the static/katex.less file.

[sophiebits]

The appearance of the arrow part doesn't quite look right. I think it's supposed to overlay the \rightarrow command with the longer line.

[gagern]

See also #402 which requested this feature. There @kevinbarabash wrote:

I would look at how \overline is done and then combine that with \rightarrow. This will probably require knowing how wide \rightarrow is.

That width information should be available from #366, I think. #407 (comment) mentions \overrightarrow as well.

[erichake]

Well I'm really new to the katex code, but I understood that for the dom part, everything rely on css classes (for span elements). That's probably why it's a bit more difficult to get things such arrow ends or widehats...

To realize this in the dom part, I used a css class with 0px width but with borders. The result is four arrow heads (left,top,bottom,right), but each of theses arrow heads are isocèle triangles (as you can see in the example of my first post). So yes it's not as beautiful as the one you get in real LaTeX results... if someone have an idea of another css trick I could use for a better result, you're welcome !

rightarrow in katex is a unicode symbol. I didn't use this because I can't see how you could manage the stretch effect above vectors.

On the other hand I implemented this overrightarrow also for the canvas version of katex (thank's Martin!), and it looks much more nice I think:

With canvas everything is much easier, because you can draw things exactly the way you want...

[erichake]

With the unicode 27A4 (➤), I have now this result in the DOM version:

[gagern]

In case this is useful, applying these tips to \overrightarrow{AB} I see the following box structure for that:

..\vbox(9.50206+0.0)x15.58682
...\hbox(3.66875+0.0)x15.58682
....\glue(\tabskip) 0.0
....\hbox(3.66875+0.0)x15.58682, glue set 5.5866fill
.....\mathon
.....\hbox(0.0+0.0)x7.7778
......\mathon
......\hbox(5.83333+0.83333)x7.7778
.......\OMS/cmsy/m/n/10 ^^@
......\mathoff
.....\kern -3.8888
.....\cleaders 0.0 plus 1.0fill
......\hbox(0.0+0.0)x5.55563
.......\mathon
.......\kern -1.11108
.......\hbox(0.0+0.0)x7.7778
........\mathon
........\hbox(5.83333+0.83333)x7.7778
.........\OMS/cmsy/m/n/10 ^^@
........\mathoff
.......\kern -1.11108
.......\mathoff
.....\kern -3.8888
.....\OMS/cmsy/m/n/10 !
.....\mathoff
....\glue(\tabskip) 0.0
...\kern -1.0
...\hbox(6.83331+0.0)x15.58682
....\glue(\tabskip) 0.0
....\hbox(6.83331+0.0)x15.58682
.....\mathon
.....\glue 0.0 plus 1.0fil
.....\hbox(6.83331+0.0)x15.58682
......\OML/cmm/m/it/10 A
......\OML/cmm/m/it/10 B
......\kern0.50172
.....\glue 0.0 plus 1.0fil
.....\mathoff
....\glue(\tabskip) 0.0

So TeX has a vbox containing two hboxes, one for the line and one for the letters, with some negative kerning between the two. The line consists of two occurrences of one symbol, and one occurrence of another symbol. So apparently that's not even a \rule box in there, but actually a symbol from the cmsy font. The \cleaders is probably what does the stretching. Not sure if any of this can be modeled easily on the KaTeX side.

With the unicode 27A4 (➤), I have now this result in the DOM version:

Using symbols outside the KaTeX fonts has a huge risk of looking differently on different browsers. Please try to stick to the KaTeX fonts. Since they already can draw \rightarrow, the symbol used for that should be good.

[erichake]

My first try was to use this unicode 2192 (rightarrow), but unfortunately this is not only the arrow head, but the whole arrow... So when you use it in css you have to stretch it, and it doesn't look great in some cases. I also tried to hide the line arrow behind an overline, and again the result was not so good in some cases.

[erichake]

All my tries to superimpose lines and rightarrow failed depending on which browser or on which font size... So I changed radically my approach, as I saw that the \u2212 (minus) was in katex lib, and with the same vertical position characteristics than the rightarrow. I also discovered that mathjax uses this \u2212 to render the overrightarrow.
So now my overrightarrow is really close from LaTeX standards:

[kevinbarabash]

This is a clever solution, but it fails if the math under the arrow is too wide. Could you add a comment with the limitations of this approach and a TODO to make this better at some point? The limitations that I see here are that this won't work with \overleftrightarrow and if the expression under the arrow is too large it won't extend far enough. Not sure how many people would use \overleftarrow, but it seems like an easy addition.

[kevinbarabash]

@erichake thanks for the pull request. We require all contributors to sign our Contributor License Agreement.

[kevinbarabash]

@erichake thanks for signing the CLA. Friendly ping about adding a comment about the limitations of this approach.

[kevinbarabash]

Closing in preference of #670.