On 2007-04-20, Jón Fairbairn <jo***********@cl.cam.ac.ukwrote:
Ben C <sp******@spam.eggswrites:
>On 2007-04-18, J?n Fairbairn <jo***********@cl.cam.ac.ukwrote:
Bergamot <be******@visi.comwrites:
J?n Fairbairn wrote:
The second is to use floats, but I can't see how to get the
baselines to line up correctly.
The baseline of the text in the float should be lower than that of the
adjoining text if the font size for h3 is larger, which it usually is.
I believe that I set the font-size to be the same as the
paragraph text.
Ah, I missed that detail.
It's possible that font-weight might make a
difference, though it doesn't seem to. In fact, what seems
to happen (in firefox) is that the position of the float
beats with the pixel alignment at a slightly different rate
from the lines in the paragraphs, so some of the floated
headings line up and some are 1px lower. Strange.
That is a bit strange.
>Second-guessing the offset from the top of a linebox to the baseline is
not feasible I don't think. It depends on the font, its various metrics
and on how the browser interprets them. You don't get fine-grained
control over that stuff with CSS.
Seems like a bit of a deficiency to me, though I don't mean
control of font and metrics); the baseline of a line of text
is a fundamental typographic property, yet block boxes don't
have them.
The baseline of a block box would presumably be the baseline of the
first linebox in it (which might be nested in several more block boxes).
That's how the baseline for a table cell is determined.
It's not clear how you'd use the baseline on a block box, but it makes
sense on a table cell or inline-block because they can line up with
other things to their left and right.
In Opera you vertical-align: baseline on an inline-block works (and
could be used for your headings). Konqueror on the other hand considers
inline blocks not to have a baseline and so aligns the inline-block's
bottom margin edge with the parent baseline instead. FF doesn't support
inline-blocks at all.
It comes down to whether an inline-block is "inline-level" or not. I
think it is, and therefore that Opera is right.
>display: inline is really the only way to do this (and use a span for
the first-letter etc. the way you are).
What would be the correct way of introducing the break? I
don't think I fully understand the way margins are supposed
to collapse (and possibly, neither does IE7), so while most
browsers produce a reasonable spacing when an empty
paragraph is used, IE7 introduces extra space.
The top and bottom margins of an empty <pshould collapse with each
other: they count as "adjoining" since there is nothing in between. So
div { margin: 20px 0; }
<div>Hello</div>
<div></div>
<div>world</div>
should display just the same as
<div>Hello</div>
<div>world</div>
I use <divin this example rather than <pbecause <pintroduces an
extra confusion here. The HTML 4.0 spec says:
"We discourage authors from using empty P elements. User agents
should ignore empty P elements."
even though <p></pis technically valid [assuming (%inline;)* means "0
or more inlines" which I should think it does].
It doesn't normally make a difference, but if I write:
<p>Hello</p>
<p style="margin: 600px 0"></p>
<p>world</p>
Should I get a 600px gap between the first and third paragraphs or not?
Not if I ignore empty P elements.
(I think that's what happens; I don't normally have windows running)
I don't know what IE does either.
* * *
One last bit of unpleasantness: neither using display:
inline no floats produces the correct effect if display:
run-in is also set. With the inline version, the markup for
the following paragraph messes it up, and with float, the
float seems to take precedence (in Opera at least), though
I'm not sure it should.
It should. If you set float to anything other than "none" you get
display: block regardless of what you set for display. This is in
section 9.7 of the CSS 2.1 spec.
