<!DOCTYPE html>
<p>The orange, blue, yellow and green text boxes should not overlap.</p>
<style>
    div, ruby {
        font: 1em/1 Ahem, sans-serif;
        font-size: 500%;
    }
</style>
<ruby style="display:block ruby; color:blue;">
    <span style="color:orange;">1234</span> ABCD <span style="color:yellow;">4578</span>
</ruby>
<div style="color:green;">
    EFGH
</div>