Floating Characters in CSS and Javascript

Question

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

Answer 1

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.