Would like text line spacing at a preset height -- regardless of font size

Kevin_M_Schafer · 01-30-2012, 10:42 PM

Would anyone have an idea how to set the text line spacing for a css/html page so that regardless of what font size is used, the line spacing will stay the same? (the spacing would be set to accommodate the largest line of text -- the headline)

I am working on an experiment where I am importing an article with ssi and showing only about four lines of text. Among these lines are a headline, which is larger, a byline, and a couple lines of the article text. I would like to see how it would work to set the line spacing the same on all lines of text on an ssi page -- just for importing. A second style page will kick in when that page is clicked to read the rest of the article. Under normal circumstances, if a headline bumps to a second line, a line of article text can be split in half, as my div window is only about 66 pixels or so in height.

I have entered 62.5% for font size on my body element, and have been experimenting with ems instead of pixels.

Thanks.

--Kevin

.

felgall · 01-31-2012, 01:12 AM

Quote:

Originally Posted by Kevin_M_Schafer

I have entered 62.5% for font size on my body element, and have been experimenting with ems instead of pixels.

Specifying a percentage there is only necessary because of a bug in IE. To simplify things it is easier to use 100% though since the value used doesn't matter as there is no fixed relationship between pixels and em as it all depends on the screen size and screen resolution.

You can set line-height independently of font-size.

Kevin_M_Schafer · 01-31-2012, 04:42 AM

Hi felgall,

It worked! I set the line height in the css div window element and all three font sizes styled the text as it came through via ssi -- and they all displayed having the same line height. Now, regardless if there are two line headlines or one, the article text lines will display at the same height with no chance of being horizontally cut in half.

Eventually, when the "Continue reading" link is clicked, a new page will open that uses a different css to space the text normally. The ssi is only used to show these slivers of text in the main page.

Thanks for your help.

--Kevin

.