<script src="../../resources/ahem.js"></script>
<style>
    div div { font-family: Ahem; font-size: 32px; -webkit-font-smoothing: none; display: inline-block; margin: 8px 0; }
    .flipped { writing-mode: vertical-rl; }
    div.flipped div { display: block; margin:0 8px 0 0; }
    .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="flipped">
    <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>