Floating Symbols in CSS and Javascript

Question

I am working on an English / Thai application. In addition to displaying English and Thai text, I need to display phonetic text. Phonetic text - English characters with arrows indicating the inflection over syllables. Example:

leg

↘ ↑

Kau new

In this example, the drop arrow should be centered above the "kaw", and the up arrow should be centered above the "new".

Currently, HTML looks like this:

<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 now looks like this:

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

. ( , ), .

, , , .

Answer 2

2x2 ?

, -, .