Floating Characters in CSS and Javascript

I'm working on an English/Thai phrase app. In addition to displaying both English and Thai text, I need to display Phonetic text. The Phonetic text is English characters with arrows indicating inflection above the syllables. Example:

knuckles

↘      ↑

kaw-new

In that example, the falling arrow should be centered above "kaw" and the up arrow should be centered above "new".

The HTML currently looks like:

<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>

The CSS currently looks like:

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

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

That's the HTML and CSS I've come up with, but I can't seem to get it to display the way I want. It's almost right in Safari, but not at all right in Firefox (not bothering with IE testing as the app uses HTML5 localS开发者_运维百科torage which IE doesn't support). The HTML is being dynamically written using JavaScript, so I'm open to suggestions there. Also, I'm not using a monospaced font, so somehow I need to calculate the arrow's location in relation to the word it goes above.

If anyone has any suggestions I'd love to hear them.

How about

.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>

This centers the arrow above each syllable. You should really make each syllable its own container (span is fine, but make it inline-block), because that's the most logical way to do it.

The clue here is that the inner span is a block container, which automatically takes up the whole line, forcing the text to start on the next line.

How about throwing them in to a 2x2 table with centered alignment?

I'm pretty sure that cross-browser, that will give you the best behavior.