Accenti sui numeri in HTML (come ^ su 1)

Question

Sto cercando di trovare il modo migliore per mettere gli accenti circonflessi ( ˆ = ˆ) sopra i numeri (una notazione musicale) senza ricorrere alle immagini.Alcune lettere hanno entità HTML equivalenti:ê = ê, Ô = Ô, ecc., ma i numeri no.

Ecco cosa sto utilizzando attualmente sul mio sito web:

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

Sembra piuttosto buono, ma non perfetto: a causa delle lievi differenze nelle forme dei numeri e nel rendering del browser, qualcosa è sicuramente un po' fuori posto.

Qualcuno ha una soluzione più elegante per questo?

Aggiornamento:

L'accento circonflesso combinato ̂ O ̂ produce risultati diversi su browser/piattaforme diversi, la maggior parte dei quali non sono corretti (sul mio Mac, solo Safari lo fa correttamente).

Secondo Questo, la corretta visualizzazione di un accento combinato dipende sia dal carattere che dal renderer.sto usando Times New Roman, Times, quindi non sembra essere un'opzione praticabile.Non posso permettermi il fastidio e l'inevitabile ignoramento di richiedere a un utente di avere un carattere particolare.

Immagino che dovrò continuare a posizionare manualmente l'accento sopra la nota come sopra, a meno che non ci siano altre nuove risposte.Grazie.

Aggiornamento 2:

Incorporando un font gratuito con un migliore supporto dei segni diacritici (specialmente Doulos SIL) sembrava promettente, ma al momento (novembre 2009) Chrome non supporta @font-face nei CSS per impostazione predefinita.Una volta fatto, però, sarà fantastico, dato che gli altri browser sono già integrati. webfonts.info è il posto giusto per informazioni a riguardo.

Answer 1

Se il rendering del marchio che unisce non è sufficientemente buona immagino che avrebbe dovuto incidere in su con il posizionamento.

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

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

Ancora un brutto trucco! Ma forse meno lavoro di quanto MathML.

Answer 2

U+0302 COMBINING CIRCUMFLEX ACCENT

Creane uno con la mappa dei caratteri o con l'entità

 ̂

Attaccane uno su tutto ciò che vuoi mettendolo dopo:

ê Â 1̂ ̂

Diventa

ê Â 1̂ ̂

...ma non è progettato per andare oltre l'1 o la faccina sorridente.Nota come è salito più in alto per la A ma non per l'1 o per la faccina sorridente.

Answer 3

Prova il COMBINAZIONE accento circonflesso (U + 0302) utilizzando ̂ o ̂:

1̂

Esempio:

  

1

Answer 4

Molto dipenderà o meno il carattere vostro utente sta utilizzando supporti questa funzione. Poiché non è possibile incorporare i font in una pagina web (senza un certo potenziale problemi legali), la cosa migliore è quello di provare i suggerimenti di cui sopra con diversi tipi di carattere per determinare se il personaggio vostro ricerca è supportata. Una volta trovato un tipo di carattere, fare riferimento a esso nel file CSS e quindi informare l'utente che un font specifico è necessario per visualizzare correttamente il sito.

Provare a utilizzare il seguente indice unicode: http: //www.fileformat. informazioni / informazioni / unicode / car / a.htm

È necessario conoscere il nome del personaggio che si sta tentando di visualizzare. Una volta che hai trovato, la pagina di informazioni vi dirà come per visualizzare il carattere utilizzando i codici di caratteri HTML.

Answer 5

Controlla la href="http://unicode.org/faq/char_combmark.html#12b" rel="nofollow combinare i segni diacritici faq. Un circonflesso combinarli è U + 0302.

Questa sezione spiega: "Alcuni tipi di carattere, come ad esempio i font Doulos e Charis, che sono liberamente disponibili per il download, contengono grandi repertori di glifi appropriati precomposte". Potrebbe essere la pena di provare per ottenere i vostri utenti di scaricare i font (se lavorano).

Si potrebbe avere un certo successo riducendo il numero di:

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