Re: Option so line-height only affects height between lines

Le 2014-12-08 19:04, Ben Sciascia a écrit :
> Here’s a link that shows both the issues mentioned:
> http://line-height.devsite.nz/
> 
> Design is obviously subjective but even this basic example shows the
> issues - specific comments below...
> 

By default, the default, initial vertical margins of <p> element in the 
user agent style sheet all mainstream browsers use

p {margin: 1em 0;}

So, can you try replacing:

<div class="left">
         <p>
           <img src="http://placehold.it/350x150">
         </p>
       </div>

with

<div class="left">
           <img src="http://placehold.it/350x150">
       </div>

and then set the h2'smargin-top to 0.

<div class="right">

     <h2 style="margin-top: 0;"></h2>

I checked this and it works for me (Firefox 34.0.5 here): the Headline 
then does line up with image on left perfectly.

--------

2 other things

1)
Height of em box is consistent in a font but glyphs do not have the same 
shape, the same height and not the same width in a proportional font.

Eg.
"É" and "e" do not have the same height;
"w" and "i" do not have the same width.
So *_visually_* this is tricky. And the line box could be aligned with 
something else but we visually can not be sure because we have to use 
special characters or a font like Ahem font.

So, it's impossible to vertically align 2 glyphs which have different 
shape and form.

2)

When you say:

"Line-height in CSS not only affects the height between lines of text"

this may not be true; it depends on what you meant by "lines of text". 
Line-height sets a minimal of height for the line box; line box is not 
line of text (or line of glyphs). Line height can increase due to tall 
image or bigger font-size.

"
Line boxes are stacked with no vertical separation (except as specified 
elsewhere) and they never overlap.
"
http://www.w3.org/TR/CSS21/visuren.html#inline-formatting

So, in the text of the spec, there is no inter-line-box-gap or 
inter-line-box-spacing.

Gérard

> 
> 
> On 9/12/2014, at 9:54 am, Gérard Talbot <www-style@gtalbot.org> wrote:
> 
>>> Because line-height also adds space above the headline, headlines
>>> often fail to line up with other elements.
>> 
>> Please create a *_simple and reduced test page_* illustrating, 
>> demonstrating the issue you describe and upload it somewhere so that 
>> we can examine your code.
> 
> Notice how out-of-the box, line-height is pushing the headline below
> the image. In many instances it doesn’t matter but in some designs, it
> does matter - requiring additional properties to compensate (like
> adjustments to top margin on either the image or the headline).
> 
> This is what I meant by "This creates a situation similar to the old
> box model” - changing leading also changes the space between elements
> forcing us to juggle multiple properties to compensate for the extra
> space line-height is adding above and below the element.
> 
> 
> 
> 
>>> This forces us to compensate with negative margins - and if the line
>>> height is changed, the compensating adjustments also requiring
>>> updating, creating unnecessary work.
>>> USE-CASE #2: Headlines need to be visually grouped with paragraphs
>>> If the design requires that headlines be visually grouped with
>>> paragraphs, less space is required between the headline and paragraph
>>> and more space before the paragraph.
>> 
>> Visually grouped how? Horizontally? Again, please create a reduce test 
>> page illustrating the issue.
> 
> If you scroll down to the second two examples you can see what I
> mean't by visually grouped - the second example shows additional space
> between the headline and the preceding paragraph. This visually groups
> the headline with the paragraph immediately below it.
> 
> You can also see that the second headline feels a bit squashed
> (subjective, I know) but any increases in line-height will also add
> additional space above and below the headline.
> 
> Once again, we have a juggling situation where we're adjusting
> line-height along with compensating properties instead of just
> line-height - especially when line-height is adjusted at a later date
> (i.e. after we’ve added any compensating properties).
> 
> 
> 
> 
> I agree that the additional space line-height adds is hardly
> noticeable in many instances but sometimes it is noticeable - and can
> require the juggling of multiple properties to compensate which is
> unnecessary in my opinion.
> 
> Hence the suggestion of an option to force line-height to only affect
> the space between lines and not the space above and below an element.
> 
> Hope that all makes sense,
> 
> Regards,
> 
> Ben
> 
> 
> 
> 
>> Le 2014-12-01 14:49, Ben Sciascia a écrit :
>>> Line-height in CSS not only affects the height between lines of text,
>>> it also alters the space above and below elements.
>>> This creates a situation similar to the old box model when padding
>>> also affected width - changing line-height in CSS can require us to
>>> also alter top and bottom margins or padding.
>>> USE-CASE #1: Top edges of headlines need to line-up with top edges of
>>> other elements
>> 
>> Are you saying the headlines are on the left-hand (or on the 
>> right-hand) side of other non-headline text elements? What do you do? 
>> Are you using a table element?
>> 
>>> Because line-height also adds space above the headline, headlines
>>> often fail to line up with other elements.
>> 
>> Please create a *_simple and reduced test page_* illustrating, 
>> demonstrating the issue you describe and upload it somewhere so that 
>> we can examine your code.
>> 
>>> This forces us to compensate with negative margins - and if the line
>>> height is changed, the compensating adjustments also requiring
>>> updating, creating unnecessary work.
>>> USE-CASE #2: Headlines need to be visually grouped with paragraphs
>>> If the design requires that headlines be visually grouped with
>>> paragraphs, less space is required between the headline and paragraph
>>> and more space before the paragraph.
>> 
>> Visually grouped how? Horizontally? Again, please create a reduce test 
>> page illustrating the issue.
>> 
>> I'm only trying to better understand your description alongside with 
>> what you code exactly.
>> 
>> Gérard
>> 
>>> But because line-height is also affecting the space between the
>>> headline and the paragraph, line-height on larger headlines (like h1s
>>> and h2s) create a space that’s too big.
>>> Reducing line-height reduces the space but it also forces lines in
>>> multi-line headlines to bleed together. Adding negative margin to
>>> compensate quickly becomes painful if the line-height is adjusted -
>>> again, the designer is adjusting multiple properties instead of one.
>>> CONCLUSION:
>>> Overall, this suggestion is about creating an additional line-height
>>> property that forces line-height to only affect the height between
>>> lines and not the space before and after elements.
>>> Regards,
>>> Ben
>>> ___
>>> Ben Sciascia
>>> Sciascia Brothers
>>> Level 1, 56 Brown Street, Ponsonby
>>> PO Box 68-578 Newton,
>>> Auckland, New Zealand
>>> PH: +649 360 0559
>>> FAX: +649 360 0012
>>> MOB: +64 21 44 33 66
>>> www.sciascia.co.nz
>>> ben.sciascia@sciascia.co.nz
>>> WARNING: This e-mail contains information which is CONFIDENTIAL and
>>> may be subject to LEGAL PRIVILEGE. If you are not the intended
>>> recipient, you must not peruse, use, disseminate, distribute or copy
>>> the e-mail or attachments.  If you have received this message in
>>> error, please telephone us immediately and destroy the original
>>> message.
> 
> 
> ___
> 
> Ben Sciascia
> 
> Sciascia Brothers
> Level 1, 56 Brown Street, Ponsonby
> PO Box 68-578 Newton,
> Auckland, New Zealand
> 
> PH: +649 360 0559
> FAX: +649 360 0012
> MOB: +64 21 44 33 66
> 
> www.sciascia.co.nz
> 
> ben.sciascia@sciascia.co.nz
> 
> WARNING: This e-mail contains information which is CONFIDENTIAL and
> may be subject to LEGAL PRIVILEGE. If you are not the intended
> recipient, you must not peruse, use, disseminate, distribute or copy
> the e-mail or attachments.  If you have received this message in
> error, please telephone us immediately and destroy the original
> message.

Received on Tuesday, 9 December 2014 05:56:14 UTC