Accents sur les nombres en HTML (comme un ^ sur 1)

StackOverflow https://stackoverflow.com/questions/1738852

Question

Je suis en train de trouver la meilleure façon de mettre les accents circonflexes (= ˆ) sur le dessus des nombres (une notation musicale) sans avoir recours à des images. Certaines lettres ont équivalentes entités HTML: E = ê, O = Ô, etc., mais les chiffres ne le font pas.

Voici ce que je suis actuellement en utilisant mon : 

<span style="position:relative;">1
   <span style="position:absolute; 
                left:0.1em; 
                bottom:0.2em; 
                font-size:1.1em;">
                &circ; 
   </span>  
</span>

Il semble assez bon, mais pas parfait --- en raison de légères différences dans les formes numériques et rendu du navigateur, quelque chose est lié à être un peu au large.

Quelqu'un at-il une solution plus élégante pour cela?

Mise à jour:

La combinaison circonflexe Accent &#770; ou &#x302; produit des résultats différents sur différents navigateurs / plates-formes, dont la plupart ne sont pas à droite (sur mon Mac, Safari ne le fait à droite).

Selon cette , un affichage correct d'un accent combinant dépend à la fois la la police et le moteur de rendu. J'utilise Times New Roman, Times, il ne semble pas être une option viable. Je ne peux pas se permettre les tracas et inévitable ignorant de demander à l'utilisateur d'avoir une police particulière.

Je suppose que je vais devoir rester avec positionnement manuel l'accent placé sur la note comme ci-dessus, à moins qu'il y ait d'autres nouvelles réponses. Merci.

Mise à jour 2:

incorporation d'une police libre avec un meilleur soutien diacritique (en particulier Doulos SIL ) semblait prometteur, mais maintenant (novembre 2009), Chrome ne supporte pas @font-face en CSS par défaut. Une fois fait, cependant, il sera grand, puisque les autres navigateurs sont déjà à bord. webfonts.info est l'endroit pour plus d'informations à ce sujet.

Était-ce utile?

La solution

Si le rendu de la marque de combinaison est pas assez bon, je suppose que vous auriez à le pirater avec le positionnement. 

<style>
    .over { position: relative; }
    .over span { position: absolute; top: -0.5em; left: 0; }
</style>

abc <span class="over">1<span>^</span></span> xyz

Encore un hack méchant! Mais peut-être moins de travail que MathML.

Autres conseils

U+0302 COMBINING CIRCUMFLEX ACCENT

Faire un avec carte de caractère ou avec l'entité 

 &#x302;

Tenez-vous un sur tout ce que vous voulez en le mettant après:

  

e&#x302; A&#x302; 1&#x302; :) &#x302;

Devient

  

E A 1 :)

... mais il n'a pas été conçu pour aller sur le 1 ou le visage souriant. Remarquez comment il déplacé plus haut pour la A, mais pas pour le 1 ou le visage souriant.

Essayez COMBINAISON CIRCONFLEXE ACCENT (U + 0302) en utilisant &#770; ou &#x302;: 

1&#770;

Exemple:

  

1

Beaucoup dépendra de si oui ou non la police de votre utilisateur utilise supporte cette fonctionnalité. Puisque vous ne pouvez pas incorporer les polices dans une page Web (sans peine juridique potentiel), votre meilleur pari est d'essayer les suggestions ci-dessus avec des polices différentes pour déterminer si le caractère de votre recherche est pris en charge. Une fois que vous trouvez une police, la référence dans votre fichier CSS et informer l'utilisateur est nécessaire une police spécifique pour afficher correctement votre site.

Essayez d'utiliser l'index unicode suivant: http: //www.fileformat. info / info / unicode / char / a.htm

Vous aurez besoin de connaître le nom du personnage que vous essayez d'afficher. Une fois que vous l'avez trouvé, la page d'information vous indiquera comment afficher le caractère en utilisant des codes de caractères HTML.

Non affilié à StackOverflow
scroll top