Acentos en los números en formato HTML (como un ^ más de 1)

Question

Estoy tratando de encontrar la mejor manera de poner acentos circunflejo (= ˆ) en la parte superior de los números (notación musical) sin recurrir a las imágenes. Ciertas letras tienen las entidades HTML equivalentes: E = ê, o = Ô, etc., pero los números no lo hacen.

Esto es lo que estoy utilizando actualmente en mi página web :

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

Se ve bastante bien, pero no es perfecto --- debido a ligeras diferencias en las formas de números y renderizado del navegador, algo que está destinada a ser un poco apagado.

¿Alguien tiene una solución más elegante para esto?

Actualización:

La combinación ̂ acento circunflejo o ̂ produce diferentes resultados en diferentes navegadores / plataformas, la mayoría de los cuales no son perfectos (en mi Mac, Safari sólo se hace bien).

Según este , correcta visualización de un acento combinando depende tanto de la la fuente y el procesador. Estoy usando Times New Roman, Times, por lo que no parece ser una opción viable. No me puedo permitir la molestia e inevitable haciendo caso omiso de que requiere que el usuario tenga una fuente en particular.

Creo que voy a tener que seguir con el posicionamiento de forma manual el acento encima de la nota que el anterior a menos que haya otros nuevas respuestas. Gracias.

Actualizar 2:

Incorporación de una fuente libre con un mejor soporte diacrítica (especialmente Doulos SIL ) parecía prometedor, pero a partir de ahora (noviembre de 2009), Chrome no es compatible @font-face en CSS por defecto. Una vez que lo hace, sin embargo, que será muy bueno, ya que los otros navegadores ya están a bordo. webfonts.info es el lugar para obtener información sobre esto.

Answer 1

Si la representación de la marca de la combinación no es lo suficientemente bueno supongo que tendría que entrar ilegalmente en él con el posicionamiento.

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

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

Todavía un corte desagradable! Pero, posiblemente, menos trabajo que MathML.

Answer 2

U+0302 COMBINING CIRCUMFLEX ACCENT

Hacer una con mapa de caracteres o con la entidad

 ̂

Pegue uno más de lo que quiera poniéndolo después de que:

  

ê Â 1̂ ̂

Se convierte

  

E Â 1

... pero no está diseñado para repasar el 1 o de la cara sonriente. Observe cómo se movió más arriba para el A, pero no para el 1 o de la cara sonriente.

Answer 3

Trate el COMBINACIÓN acento circunflejo (U + 0302) utilizando ̂ o ̂:

1̂

Ejemplo:

  

1

Answer 4

Mucho dependerá de si el tipo de letra o no su usuario está utilizando soporta esta característica. Como no se puede incrustar fuentes en una página web (sin algún potencial de problemas legales), lo mejor es tratar las sugerencias anteriores con diferentes fuentes para determinar si el personaje que tu buscas es compatible. Una vez que encuentre una fuente, hacer referencia a ella en su archivo CSS y luego informar al usuario que se requiere una fuente específica poder ver correctamente el sitio.

Trate de usar el siguiente índice Unicode: http: //www.fileformat. info / info / unicode / char / a.htm

Usted necesitará saber el nombre del personaje que está tratando de mostrar. Una vez que hayas encontrado, la página de información le dirá cómo mostrar el carácter utilizando los códigos de caracteres HTML.

Answer 5

Salida del href="http://unicode.org/faq/char_combmark.html#12b" rel="nofollow en combinación diacrítica FAQ. A circunfleja combinación es U + 0302.

Esa sección dice: "Algunas fuentes, como las fuentes Doulos y Charis, que están libremente disponibles para su descarga, contienen grandes repertorios de glifos precompuestas apropiadas". Puede ser que sea digno de un intento de conseguir sus usuarios descargar esas fuentes (si trabajan).

Es posible que tenga cierto éxito la reducción del número:

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