Is there a way to get a space and a half between lines?

Forum Moderators: open

Message Too Old, No Replies

Is there a way to get a space and a half between lines?

Need space and a half in HTML 4.0

DanielLee

2:54 am on Aug 25, 2002 (gmt 0)

Hi,
My customer wants a space and a half between the lines of the text.
I am currently using . If I use just one it gets to tight, if I use two it gets to spread out.

Any assistance appreciated. Thank you in advance.

Sincerely,

Daniel

tedster

3:34 am on Aug 25, 2002 (gmt 0)

You can use css to set the line-height to exactly what you need. For instance, in the style declaration you can use:

p {
line-height:1.5em;
}

One silly old kludge was to use a transparent gif inline that forced the lines apart (instead of a space, for instance). Another silly old kludge was to superscript a non-breaking space somewhere in the line.

madcat

5:28 am on Aug 26, 2002 (gmt 0)

a transparent gif inline that forced the lines apart

superscript a non-breaking space somewhere in the line.

Yikes!

I started when people were using CSS to perform such minor tasks- CSS had to be sweet salvation-

tedster

6:48 am on Aug 26, 2002 (gmt 0)

Sweet salvation indeed. The first time I saw a web page with a non default line-height it was like a cold drink in the desert.

There are some typsetting principles for readability that relate line length to line-height (or, in print terminology, "leading" - rhymes with "sledding"). Most basically, the longer the line, the more you need extra line height for easy reading.

That's one of the reasons I'm very careful with liquid design in a single div layout. When it gets beyond a certain width, it gets difficult for the eye to return to the left margin and find the next line - hence the need for more line-height as the line gets wider. Maybe someday there will be a way to link line-height to line width directly.

Wouldn't that be sweet?

DanielLee

7:28 am on Aug 26, 2002 (gmt 0)

Hi,

Thank you for the replys. I kjnow nothing about Cascading style sheets and I would rather not add to my learning curve right now so if I may as you a question.

Can I take the recommended action of

"in the style declaration you can use:
p {
line-height:1.5em;
}

and use that without changing the HTML I already have on the site? Or is this a complete change that I will have to learn a whole new way of making a page?

I know that is probably a kind of silly question but in all honesty it's going on 3 am and I have to go to my regular job tomorrow, its a time thing, so if you could please just give me the answer on this one I promise to look up the answer myself on the next one.

Thanks again for your assistance.

Sincerely,

Daniel

Nicu_Alecu

8:42 am on Aug 26, 2002 (gmt 0)

OK, Daniel, here it goes: in the <head> section of your HTML file you put this:

<style type="text/css"> 
<!-- 
P { line-height : 150%; } 
--> 
</style>

This means that the text you want to be "space and a half" high in the body of your file will have to be enclosed in tags, like this:

<p>This is the 150% high line of text</p> 
  But this one is NOT!

No paragraph text arround the second line!

If you have additional questions, just sticky me!

Sinner_G

8:48 am on Aug 26, 2002 (gmt 0)

What would the height of the space be if you just used the without specifying in CSS? I always thought it was 150% regular line by default.

Nicu_Alecu

9:53 am on Aug 26, 2002 (gmt 0)

Sinner_G, I never really bothered about that, but after seing your question, I did some checking. Well the answer is no, the default line-height of a paragraph is not a fixed percent but depends on a lot of factors, like browser type (IE or NN or Opera or ... whatever), or the font-size defined in the document. I tested a few combinations of browsers and in-line font-size styling, along with some different browser settings regarding fonts, and the results were somewhere between 110% and 120%. I never reached as far as 150%.

Anyway, Daniel said his customer wants "a space and a half between lines", so setting the line-height at 150% makes the paragraph display "exactly" like he wanted.