Storing and displaying formatting or annotations is a tricky business: you can wrap the annotated text in an tag, like this:
<b>text</b>
which makes styling easy with CSS, but is invalid for overlapping ranges:
<i>longer <b>text</i> here</b>
To solve that, use self-closing start and end tags for each annotation:
<start class="i"/>longer<start class="b"/> text<end class="i"/> here<end class="b"/>
Because there are then no ranges to which CSS styles can be applied, work through the text a character at a time, changing the state of the formatting when each start or end tag is encountered:
<span class="i">l</span><span class="i">o</span><span class="i">n</span><span class="i">g</span><span class="i">e</span><span class="i">r</span><span class="i"> </span><span class="i b">t</span><span class="i b">e</span><span class="i b">x</span><span class="i b">t</span><span class="b"> </span><span class="b">h</span><span class="b">e</span><span class="b">r</span><span class="b">e</span>
which renders like this:
longer text here
[slight non-sequitur, but related]: Google wrote their own text layout engine, rather than using the internal text layout engine of each web browser independently and having to deal with the resulting inconsistencies, and combined that with operational transformation, for simultaneous editing.