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

Question

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

Вот что я сейчас использую на моем сайте :

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

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

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

Обновление:

Combining Circumflex Accent ̂ или ̂ дает разные результаты на разных браузерах / платформах, большинство из которых неверны (на моем Mac только Safari делает это правильно).

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

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

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

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

Answer 1

U+0302 COMBINING CIRCUMFLEX ACCENT

Создайте одно с картой персонажей или с сущностью

 ̂

Наклейте один на что угодно, поставив после него:

ê Â 1̂ ̂

Становится

е & # X302; & # X302; 1 & # X302; * * & Тысяча двадцать-один # X302; * * тысячу двадцать-два

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

Answer 2

Попробуйте КОМБИНИРОВАНИЕ CIRCUMFLEX ACCENT (U + 0302) используя ̂ или ̂:

1̂

Пример:

1

Answer 3

Проверьте комбинацию диакритических знаков faq. Комбинированная окружность U + 0302.

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

Возможно, вам удастся уменьшить число:

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

Answer 4

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

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

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

Answer 5

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

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

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

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