Плавающие символы в CSS и Javascript

Question

Я работаю над английским / тайским приложением фраз. В дополнение к отображению текста на английском и тайском языках, мне нужно отобразить фонетический текст. Фонетический текст - английские символы со стрелками, указывающими на перегибы над слогами. Пример:

костяшки

↘ ↑

Кау новый

В этом примере падающая стрелка должна быть центрирована над "kaw", а стрелка вверх должна быть центрирована над "новым".

HTML-код в настоящее время выглядит следующим образом:

<div id="2173" class="eng">knuckles</div>
<div id="2173" class="phonetic"><div class="arrow">↘</div><div class="text">kaw-</div><div class="arrow">↑</div><div class="text">new</div></div>

CSS в настоящее время выглядит так:

.arrow {
    margin-left:1em;
    padding-bottom:1em;
    display:inline;
    position:absolute;
}

.text {
    display:inline;
    padding-top:0;
    margin-top:1em;
    position:relative;
    float:left;
}

Это HTML и CSS, которые я придумал, но я не могу заставить их отображать так, как я хочу. Это почти правильно в Safari, но совсем не так, как в Firefox (не надо беспокоиться о тестировании IE, так как приложение использует HTML5 localStorage, который IE не поддерживает). HTML-код динамически пишется с использованием JavaScript, поэтому я открыт для предложений там. Кроме того, я не использую моноширинный шрифт, поэтому каким-то образом мне нужно вычислить местоположение стрелки относительно слова, которое она идет выше.

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

Answer 1

Как насчет

.syllable {
    display:inline-block;
}
.syllable span {
    display:block;
    text-align:center;
}

<span class="syllable"><span>↘</span>kaw</span>
-<span class="syllable"><span>↑</span>new</span>

Это центрирует стрелку над каждым слогом. Вы действительно должны сделать каждый слог своим собственным контейнером (span - это нормально, но сделайте его inline-block), потому что это самый логичный способ сделать это.

Подсказка заключается в том, что внутренний диапазон представляет собой контейнерный блок, который автоматически занимает всю строку, заставляя текст начинаться со следующей строки.

Answer 2

Как насчет того, чтобы выбросить их в таблицу 2x2 с выравниванием по центру?

Я вполне уверен, что кросс-браузер, это даст вам лучшее поведение.