Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

enter image description here

share|improve this question

3 Answers 3

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 &#x1d497; 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 &#x20d7; or as &#8407; 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).

share|improve this answer

I found this:

2v&#8407;+w&#8407;=0&#8407;

2v⃗+w⃗=0⃗

2vplusw

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

share|improve this answer
1  
Whether and how it works depends on the font being used. –  Jukka K. Korpela Jan 5 '13 at 19:15
    
Can you provide an image of the correct rendering of this? As it doesn't display correctly for me unfortunately. –  w3d Jan 5 '13 at 20:28
1  
Image added above. Or try Safari on a Mac or iOS device. –  William Jockusch Jan 6 '13 at 1:08

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.