Using Tag And Preserve Line-height

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

hello _world, how are you? Translated as logical aggregates or associative

Solution 1:

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:

<divclass="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

Solution 2:

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.

Solution 3:

Well you can do this

sub{
    vertical-align: middle
}

but the text is almost like normal. http://jsfiddle.net/BzqFb/7/

you might as well use a span and change the span font size to a smaller font

Solution 4:

Try line-height CSS property like this JSFiddle

.container {
    width: 300px;
    line-height: 30px;
}

Remember, subscript tag makes the text to appear as a subscript of current line. By default vertical-align:sub; property is set on sub tags. So either over-ride that or don't use sub tags if you just want to make the text smaller.

Edited After Question was edited

It is not the case that subscripted line is wider than any other line. Its just that next word in line could not fit the remaining width available in current line so the word goes to new line.See this JsFiddle to validate this point or you can also use text-align: justify to make all the lines justified. See this JsFiddle #3

Share