Akzente auf Zahlen in HTML (wie a ^ über 1)

Question

Ich versuche, den besten Weg zu finden circumflex Akzente zu setzen (= ˆ) oben auf Zahlen (eine musikalische Notation) ohne Bilder zurückzugreifen. Bestimmte Buchstaben haben entsprechende HTML-Entitäten: ê = ê, Ô = Ô, etc., aber Zahlen nicht.

Hier ist das, was ich zur Zeit mit auf meiner Webseite :

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

Es sieht ziemlich gut, aber nicht perfekt --- wegen geringfügigen Unterschieden in der Anzahl Formen und Browser-Rendering, ist etwas verpflichtet, ein wenig weg zu sein.

Hat jemand eine elegantere Lösung?

Update:

Die Kombination Circumflex ̂ oder ̂ unterschiedliche Ergebnisse auf verschiedenen Browsern / Plattformen produziert, von denen die meisten sind nicht richtig (auf meinem Mac, nur Safari tut es richtig).

Nach diese , korrekte Anzeige eines Kombinations Akzent hängt sowohl von der Schriftart und der Renderer. Ich verwende Times New Roman, Times, so dass es keine praktikable Option zu sein scheint. Ich kann nicht den Aufwand leisten und unvermeidlich zu ignorieren einen Benutzer erfordern eine bestimmte Schriftart zu haben.

Ich denke, ich werde mit manuell halten haben den Akzent der Spitze der Note positioniert, wie oben, es sei denn, es gibt noch andere neue Antworten. Vielen Dank.

Update 2:

eine kostenlose Schriftart mit besseren diakritischer Unterstützung Einbetten (vor allem Doulos SIL ) schien vielversprechend, aber ab jetzt (Nov 2009), Chrome unterstützt keine @font-face in CSS standardmäßig. Sobald dies der Fall, aber es wird groß sein, da die anderen Browser bereits an Bord sind. webfonts.info ist der richtige Ort für Informationen zu diesem Thema.

Answer 1

Wenn die Kombinationszeichen Rendering ist nicht ausreichend gut, ich denke, man würde es mit der Positionierung bis hacken hat.

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

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

Immer noch ein gemeiner Hack! Aber möglicherweise weniger Arbeit als MathML.

Answer 2

U+0302 COMBINING CIRCUMFLEX ACCENT

Machen Sie einen Charakterkarte oder mit der Entität

 ̂

Stick über alles, was Sie wollen, indem sie, nachdem sie setzen:

  

ê Â 1̂ ̂

Wird

  

ea1

... aber es ist nicht über die 1 oder das Smiley-Gesicht zu gehen entworfen. Beachten Sie, wie es nach oben bewegt, höher für die A, aber nicht für die 1 oder der Smiley.

Answer 3

Versuchen Sie die KOMBINATION Circumflex (U + 0302) mit ̂ oder ̂:

1̂

Beispiel:

  

1

Answer 4

wird viel davon abhängen, ob die Schriftart Ihre Benutzer unterstützt diese Funktion. Da Sie Schriftarten in einer Web-Seite nicht einbetten können (ohne einige mögliche rechtliche Probleme), die beste Wahl ist es, die oben genannten Vorschläge mit verschiedenen Schriftarten, um zu versuchen, um zu bestimmen, ob das Zeichen für die Suche unterstützt wird. Sobald Sie eine Schriftart finden Referenz es in Ihrem CSS-Datei und dann den Benutzer darüber informieren, dass eine bestimmte Schriftart auf die korrekte Schreibweise Ihrer Website anzuzeigen erforderlich ist.

Versuchen Sie, die folgenden Unicode-Index mit: http: //www.fileformat. info / info / Unicode / char / a.htm

Sie müssen den Namen des Charakters kennen, die Sie Anzeige versuchen. Sobald Sie es gefunden haben, wird die Informationsseite Ihnen sagen, wie das Zeichen angezeigt werden Codes mit HTML-Zeichen.

Answer 5

Schauen Sie sich die diakritische Zeichen FAQ zu kombinieren. Eine Kombination circumflexa ist U + 0302.

Dieser Abschnitt sagt: „Einige Schriften, wie die Doulos und Charis Schriftarten, die zum Download frei verfügbar sind, enthalten große Repertoires geeigneten vorverfasstes Glyphen“. Es könnte sich lohnen, einen Versuch die Benutzer zu erhalten, um diese Fonts herunterladen (wenn sie arbeiten).

Sie können einen gewissen Erfolg haben die Zahl schrumpft:

<span style="font-size: 75%">1</span>&#x0302;