Placing a small arrow over a letter with css

Question

I'm trying to use html and css to present some simple vector notation in a webpage. A vector is simply denoted by a right-pointing arrow over a letter. Example, as an image: vector

The problem is that I might be using this notation over a few dozen different letters or symbols, and I don't want to have to stop everything and make another image each time the need for one comes up. I want to represent this using text if at all possible.

While searching, I stumbled across some HTML notation (→) for a nice right-pointing arrow (→). So, what I'd like to be able to do is come up with some css that, for a letter enclosed by a certain span class, inserts that arrow and positions it over the contents of the span.

For example:

<span class="vector">v</span>

would render like the image linked above.

Is this possible with pure css? Would I have to resort to javascript?

Thanks

Answer 1

The arrow is a part of the content and belongs in the HTML. You should be able to remove the JavaScript and CSS and the text should still make sense (let's say you decide to print out the page).

You should use the COMBINING RIGHT ARROW ABOVE with the vector letter to represent the full vector glyph.

I propose the following markup:

<var class="vector">v<span>&#8407;</span></var>

For extra nice representation you can then shift the symbol back over the letter with a touch of CSS:

var.vector {
  font-style : normal;
}
var.vector span {
  margin-left: -.55em;   /* shift the arrow back over the letter */
  vertical-align : .2em; /* tune the arrow vertical position */
}

Here is a jsbin example.

Answer 2

What you're specifically proposing would have to be done with Javascript, however you could do it with CSS if you used a background image for the arrow.

Something like:

span.vector {
    background: url(arrow.png) no-repeat top;
}