Using <sub> tag and preserve line-height

Question

I have a long text with some subscripts and superscripts tags. Example:

<div>hello <sub>world</sub>, how are you? Translated as logical aggregates or associative compounds, these characters have been interpreted as combining two or more pictographic or ideographic characters to suggest a third meaning.</div>

Live example at http://jsfiddle.net/BzqFb/

Now I can see that lines of text with text are wider then those without text. Is there any way how I can change tag style css and have all lines of text with exactly same height?

And are there some kind of texts which can change height of line in HTML text?

EDIT: I want to have subscript behaviour, not just small text. I can make line-height large so that subscript text should fit the line, but still the line with subscripted text is wider then line without subscripted text.

Answer 1

Do not use the sub element at all. Instead, use e.g. <span class=sub>...</span> together with a style sheet that makes the content vertically lowered and, if desired, sets the font size. For vertical lowering, you can use position: relative and a suitable value for top or bottom; this makes the content displaced without affecting spacing between lines. For example,

.sub { position: relative; top: 0.8ex; font-size: 75%; }

You could instead use the sub element and nullify its effect on vertical placement, with vertical-align: baseline, but then you would have difficulties with setting the font size in a cross-browser way, due to a gross IE bug (in interprets a percentage in the font-size value for sub as relative to the default size it uses for that element, instead of correctly relating it to the parent element’s font sie, as other browsers do).

Note: The sub element does not change line-height, but it typically makes the height of line boxes larger. This is why you cannot solve the problem by setting line-height.

Answer 2

Is there any way how I can change tag style css and have all lines of text with exactly same height

Why just you don't use <small> element? it keeps the text vertically aligned with the same line height:

<div class="container">hello <small>world</small>, how are you? ...</div>

Fiddle Demo

Per Original Poster's comment, you could use position: relative; for the subscript element and set a top of 0.2em to preserve the line height of the whole text:

sub {
    vertical-align: text-bottom; /* <-- Reset the user agent stylesheet   */
    position: relative;          /* <-- Set position to the element       */
    top: .2em;                   /* <-- Move the <sub> element down a bit */
}

UPDATED FIDDLE