Placer une petite flèche sur une lettre avec css

Question

J'essaie d'utiliser html et css pour présenter une simple notation vectorielle dans une page Web. Un vecteur est simplement désigné par une flèche pointant vers la droite sur une lettre. Exemple, sous forme d'image: vector

Le problème est que je pourrais utiliser cette notation sur quelques douzaines de lettres ou de symboles différents, et je ne veux pas devoir tout arrêter et faire une autre image chaque fois que le besoin de on arrive. Je veux représenter cela en utilisant du texte si possible.

Lors de la recherche, je suis tombé sur une notation HTML (& rarr;) pour une belle flèche pointant vers la droite (→). Donc, ce que je voudrais pouvoir faire est de trouver des css qui, pour une lettre encadrée par une certaine classe d'envergure, insèrent cette flèche et la positionnent sur le contenu de l'intervalle.

Par exemple:

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

viderait comme l'image ci-dessus liée. Est-ce possible avec des css purs?

Devrais-je recourir à javascript?

Merci

Answer 1

La flèche est une partie du contenu et appartient dans le code HTML. Vous devriez être en mesure de supprimer le JavaScript et CSS et le texte devrait toujours avoir du sens (disons que vous décidez d'imprimer la page).

Vous devez utiliser le COMBINING RIGHT ARROW ABOVE avec la lettre du vecteur pour représenter le vecteur complet glyphe.

Je propose le balisage suivant:

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

Pour une représentation plus agréable, vous pouvez alors déplacer le symbole en arrière sur la lettre avec une touche de 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 */ 
} 

est ici a jsbin example.

Answer 2

Qu'est-ce que vous proposez spécifiquement devrait être fait avec Javascript, mais vous pourriez le faire avec CSS si vous avez utilisé une image d'arrière-plan pour la flèche.

Quelque chose comme:

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