<style>
    div div { font-family: ahem; font-size: 32px; -webkit-font-smoothing: none; display: inline-block; margin: 8px 0; }
    .horizontal-bt { -webkit-writing-mode: horizontal-bt; }
    .over { color: blue; -webkit-text-emphasis: "m"; -webkit-text-emphasis-position: over; }
    .under { color: green; -webkit-text-emphasis: "m"; -webkit-text-emphasis-position: under; }
</style>
<div>
    <div>
        1111
        <br>
        <span>2222</span>
        <br>
        <span class="over">3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="under">2222</span>
        <br>
        <span>3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="under">2222</span>
        <br>
        <span class="over">3333</span>
        <br>
        4444
    </div>
</div>
<div class="horizontal-bt">
    <div>
        1111
        <br>
        <span>2222</span>
        <br>
        <span class="under">3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="over">2222</span>
        <br>
        <span>3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="over">2222</span>
        <br>
        <span class="under">3333</span>
        <br>
        4444
    </div>
</div>