Default leading for paragraphs

[City Dweller]

Hi all,

Does anyone here know how browsers calculate the leading (vertical distance
between base lines) in a paragrap?

For example, consider this HTML code:

LINE1<P>LINE2

How is the vertical difference between the baselines of LINE1 and LINE2
calculated? I am writing an HTML rendering application and can't figure it
out. Apparently it depends on the font size and metrics, but how exactly?

Thanks in advance.

-- Abe

 

[Jukka K. Korpela]

Does anyone here know how browsers calculate the leading (vertical
distance between base lines) in a paragrap?

_In_ a paragraph?

For example, consider this HTML code:

LINE1<P>LINE2

How is the vertical difference between the baselines of LINE1 and LINE2
calculated?

This gets more and more confusing. Such a vertical distance depends on many
factors, but I'm afraid you cannot understand the issue before you understand
the basics of HTML.

I am writing an HTML rendering application

Oh my.

By the way, what makes you think you should imitate web browsers? They do not
imitate the rendering principles of traditional typography. If you don't want
to just use a web browser (and perhaps tune the rendering with a style
sheet), why don't you start designing a _good_ layout engine? But you'll need
to learn HTML first.

 

[Toby Inkster]

For example, consider this HTML code:

LINE1<P>LINE2

I'd rather consider this code:

<P>Line 1</P>
<P>Line 2</P>

The vertical gap between the two paragraphs is the sum of the lengths of
the following CSS properties as applied to the paragraphs in question:

padding-bottom of the top paragraph
border-bottom of the top paragraph
margin-bottom of the top paragraph
margin-top of the bottom paragraph
border-top of the bottom paragraph
padding-top of the bottom paragraph

 

[Neredbojias]

Hi all,

Does anyone here know how browsers calculate the leading (vertical
distance between base lines) in a paragrap?

For example, consider this HTML code:

LINE1<P>LINE2

LINE1 and LINE2 aren't in a (-the same) paragraph...

How is the vertical difference between the baselines of LINE1 and
LINE2 calculated? I am writing an HTML rendering application and can't
figure it out. Apparently it depends on the font size and metrics, but
how exactly?

Normal vertical line distance can be adjusted by the css line-height
property. I've noticed that the default is not the same in all browsers
(but when I've set it, it _appeared_ to match.)

 

[Jim Moe]

Does anyone here know how browsers calculate the leading (vertical distance
between base lines) in a paragrap?

See "10.8.1 Leading and half-leading" of the CSS2 spec.

 

[City Dweller]

Wow, what an asshole! Thanks for nothing, fucker.

-- Abe

 

[City Dweller]

It's easy when CSS is in use, what what if it isn't? All major browsers seem
to agree on a default gap. I am trying to find out what formula they use.

Thanks for responding.

-- Abe

 

[City Dweller]

Actually IE and Opera agree remarkably well, so they must use the same rule

-- Abe

 

[Toby Inkster]

It's easy when CSS is in use, what what if it isn't? All major browsers
seem to agree on a default gap. I am trying to find out what formula
they use.

They use CSS (even if you don't!)

 

[dorayme]

Wow, what an asshole! Thanks for nothing, fucker.

-- Abe

Now that is extremely rude, Abe. I want that you should go wash
your mouth out with a strong soap. When you come back, I want
that you should not top post, that you should think about what
Toby Inkster has said, that you should get hold of Firefox, get
its developer extensions and get to see what css is actually
being used in various browsers (as default) and go learn the
Christian religion (I pick this particular one, having studied
very closely your remarks and concluded it would be the best for
you).

 

[Jukka K. Korpela]

The vertical gap between the two paragraphs is the sum of the lengths of
the following CSS properties as applied to the paragraphs in question:

Nope.

I'm not worried about the OP, who clearly has no idea of what he is
doing and no desire to clarify it, but I'm worried about others who
might be reading this thread.

padding-bottom of the top paragraph
border-bottom of the top paragraph
margin-bottom of the top paragraph
margin-top of the bottom paragraph
border-top of the bottom paragraph
padding-top of the bottom paragraph

Vertical margins "collapse", i.e. margin-bottom and margin-top are not
added but the _larger_ of them is used. This is essential, because the
common browser defaults for p elements set margins (and no padding and
no border), corresponding e.g. to
p { margin: 1.12em 0; }
with the nonzero value (setting top margin and bottom margin) typically
adjusted to match the line-height value in the browser's default style
sheet. This does _not_ create 1.12em + 1.12em spacing between paragraphs
but just 1.12em spacing.

Moreover, the _visual_ gap between the lowest point in the text of the
first paragraph and the highest point in the text of the second
paragraph is somewhat larger than people will expect from the above
considerations. First, the font design, or the actual characters
appearing in the text, may not utilize the full height of the font.
(Consider a row of x's with another row of x's under it. There's
considerable vertical space between the x glyphs even if all paddings,
borders, and margins are zero.) Second, the line-height value may create
some spacing, and typically does; typical default values range from 1.1
to 1.2

 

[Andy Dingley]

Does anyone here know how browsers calculate the leading (vertical distance
between base lines) in a paragrap?

Yes. Now why should anyone bother to help you?
<plonk>

 

[David Graham]

Nope.

I'm not worried about the OP, who clearly has no idea of what he is
doing and no desire to clarify it, but I'm worried about others who
might be reading this thread.


Vertical margins "collapse", i.e. margin-bottom and margin-top are not
added but the _larger_ of them is used. This is essential, because the
common browser defaults for p elements set margins (and no padding and
no border), corresponding e.g. to
p { margin: 1.12em 0; }
with the nonzero value (setting top margin and bottom margin) typically
adjusted to match the line-height value in the browser's default style
sheet. This does _not_ create 1.12em + 1.12em spacing between paragraphs
but just 1.12em spacing.

Thanks for that clarification - your quite correct in thinking people
following this thread may come away with the wrong idea - I certainly did
bye
David

 

[Nije Nego]

Wow, what an asshole! Thanks for nothing, fucker.

-- Abe

From where I stand everything Yukka said is correct, but I would just add
that, before learning HTML you should collect some basic COMMUNICATION
skills.

You do not have to thank me.