Is there a way to make something like the image below using text-based HTML/mathML. My concern is with the arrows over the letter v. This is for iOS (webKit); I'd rather not use mathJAX or the like if I can help it.
I found this:
It would be nice if there were a more intuitive way to do it. But at least it works.
Primarily, vectors symbols should be denoted using bold italic, according to the international standard on mathematical notations, ISO 80000-2. This is easy in HTML:
In theory, you could alternatively use special characters like U+1D497 MATHEMATICAL BOLD ITALIC SMALL V (which can be written as
The standard allows an alternate notation that uses an arrow above a symbol (which should appear in italic if it is a variable). It does not identify the arrow at the character encoding level, but it is apparently identifiable with U+20D7 COMBINING RIGHT ARROW ABOVE, which can be written as
However, font support to this character is rather poor, in several ways. There are just a few fonts that support it, and most of them are sans-serif fonts (which are generally unsuitable for mathematical texts) and lack italic typeface. Though the arrow itself should be immune to being italicized, this means that the base character would need to be taken from a different font, and this typically creates a mess. Moreover, browsers and other rendering software don’t seem to place the arrow properly, probably because it’s wrongly defined in the fonts. So with the present implementations, using an arrow above is not a reasonable option.
In MathML, you can write e.g.
but the rendering is rather poor (the arrow is too long), and e.g. IE 9 does not support MathML as embedded into an HTML document.
The conclusion is that MathJax or jqMath is probably the best shot in practice, if you wish to an “arrow above” notation (or generally use mathematical formulas that have some inherent two-dimensionality, as opposite to simple sequences of character and simple subscripts and superscripts).
The default arrow is a bit large for use as an over-arrow but you can do
which renders reasonably well in firefox (gecko) and chrome (webkit) on windows, can't test iOS.