Акценты на числах в HTML (например, a ^ вместо 1)

Question

Я пытаюсь найти лучший способ расставить акценты по окружности ( ˆ = ˆ) поверх цифр (нотная запись), не прибегая к изображениям.Некоторые буквы имеют эквивалентные HTML-объекты:ê = ê, Ô = Ô, и т.д., но цифры этого не делают.

Вот что я в настоящее время использую на своем Веб-сайт:

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

Это выглядит довольно хорошо, но не идеально - из-за небольших различий в форме чисел и рендеринге браузера что-то обязательно будет немного не так.

Есть ли у кого-нибудь более элегантное решение для этого?

Обновить:

Объединяющий Акцент На Изгибе по окружности ̂ или ̂ выдает разные результаты в разных браузерах / платформах, большинство из которых неправильные (на моем Mac только Safari делает это правильно).

Согласно это, правильное отображение комбинирующего акцента зависит как от шрифта, так и от средства визуализации.Я использую Times New Roman, Times, так что это не представляется выполнимым вариантом.Я не могу позволить себе хлопот и неизбежного игнорирования требования к пользователю иметь определенный шрифт.

Я предполагаю, что мне придется придерживаться ручного размещения акцента поверх заметки, как указано выше, если не будет никаких других новых ответов.Спасибо.

Обновление 2:

Встраивание бесплатного шрифта с улучшенной поддержкой диакритических знаков (особенно Дулос СИЛ) казалось многообещающим, но на данный момент (ноябрь 2009) Chrome не поддерживает @font-face в CSS по умолчанию.Однако, как только это произойдет, это будет здорово, поскольку другие браузеры уже на борту. webfonts.info это место для получения информации по этому поводу.

Answer 1

Если рендеринг метки объединения недостаточно хорош, я думаю, вам придется подкорректировать его с помощью позиционирования.

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

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

Все равно мерзкий взлом!Но, возможно, меньше работы, чем MathML.

Answer 2

U+0302 COMBINING CIRCUMFLEX ACCENT

Создайте его с помощью карты символов или с помощью объекта

 ̂

Приклейте один поверх всего, что захотите, поместив его после этого:

ê Â 1̂ ̂

Становится

С 1 ̂

...но он не предназначен для того, чтобы переходить через цифру 1 или смайлик.Обратите внимание, как он поднялся выше для буквы "А", но не для цифры "1" или смайлика.

Answer 3

Попробуйте КОМБИНИРОВАНИЕ АКЦЕНТА С ИЗГИБОМ ПО ОКРУЖНОСТИ (U+0302) используя ̂ или ̂:

1̂

Пример:

1̂

Answer 4

Многое будет зависеть от того, поддерживает ли шрифт, который использует ваш пользователь, эту функцию.Поскольку вы не можете встраивать шрифты на веб-страницу (без каких-либо потенциальных юридических проблем), лучше всего попробовать приведенные выше предложения с другими шрифтами, чтобы определить, поддерживается ли тот символ, который вы ищете.Как только вы найдете шрифт, укажите ссылку на него в своем CSS-файле, а затем сообщите пользователю, что для корректного просмотра вашего сайта требуется определенный шрифт.

Попробуйте использовать следующий индекс юникода: http://www.fileformat.info/info/unicode/char/a.htm

Вам нужно будет знать имя персонажа, которого вы пытаетесь отобразить.Как только вы найдете его, на информационной странице будет рассказано, как отобразить символ с помощью кодов символов HTML.

Answer 5

Ознакомьтесь с комбинирование диакритических знаков Вопросы и ответы.Объединяющая окружность равна U+0302.

В этом разделе говорится:"Некоторые шрифты, такие как шрифты Doulos и Charis, которые свободно доступны для скачивания, содержат большой набор соответствующих предварительно составленных глифов".Возможно, стоит попробовать заставить ваших пользователей загрузить эти шрифты (если они работают).

Возможно, вы добьетесь некоторого успеха, сократив это число:

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