mathML/HTML symbol for mathematical vector

Question

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.

Answer 1

I found this:

2v⃗+w⃗=0⃗

2v⃗+w⃗=0⃗

It would be nice if there were a more intuitive way to do it. But at least it works.

Answer 2

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:

<b><i>v</i></b>

In theory, you could alternatively use special characters like U+1D497 MATHEMATICAL BOLD ITALIC SMALL V (which can be written as 𝒗 in HTML), but such characters are supported by very few fonts.

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 ⃗ or as ⃗ in HTML.

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.

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mover>
    <mi>v</mi>
    <mo>&rarr;</mo>
    </mover>
</math>

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

Answer 3

The default arrow is a bit large for use as an over-arrow but you can do

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mover>
    <mi>v</mi>
    <mo mathsize="50%">&rarr;</mo>
    </mover>
</math>

which renders reasonably well in firefox (gecko) and chrome (webkit) on windows, can't test iOS.

Answer 4

I'd like to revive this post for those who might come across it by chance. Here is my solution:

.vecteur {
  position: relative;
}
.vecteur::before {
  content: "\2192";
  position: absolute;
  top: -0.7em;
  left: -0.1em;
  font-size: 1.2em;
}
</style>

<span class="vecteur">a</span>

Answer 5

I don't think most people know on bold italic convention for vector values, so I think it is better to put the little arrow above vectors so they can be easily identified as different entities, with their different behaviours in Physics, from scalars (and not the score above, alternative notation, because this latter, can be mistaken as a complementary set or element notation).