Re: line-height suggestions and easier alignment

On 5/01/2012 8:12 AM, Alan Stearns wrote:

> On 1/4/12 12:13 PM, "Gérard Talbot"<www-style@gtalbot.org>  wrote:
>>
>> I am inclined to be against adding anything else  until the problems
>> listed, carefully explained with regards to section 10.8 of CSS 2.1 are
>> not addressed to begin with. Anything else added into the leading model
>> (CSS3) needs to be extremely very well justified, substantiated.
>>
>
> Gérard,
>
> The basic problem is not being able to control where the leading is applied.

I agree with this premise but a *line box* is only the height of it's 
content. This line box can only be changed by using font-size.

Let me state this with great emphasis, 'line-height' never changes this 
content height and 'vertical-align' does not alter any vertical 
alignment of this content.

The behavior of the content (glyphs) that this thread has be referring 
too is only seen in 'Test 1' of this test case.

http://css-class.com/test/css/visformatting/vertical-align.htm

'Test 2' and 'Test 3' are the only examples where 'vertical-align' 
works. Please take time to examine this test case.


> Specifically the part of 10.8.1 that divides the leading and adds half to
> the top and half to the bottom. Not all typographic systems work that way
> (as you found in your wikipedia research). Adding a property to modify how
> leading is applied could ease the impedance mismatch.

This can be done but it has to be a change to the CSS line box. What you 
are proposing is a new CSS box within the current CSS line box which has 
upper and lower parts that can behave like adjustable leading.

> We will certainly need to justify and substantiate the need, but I think
> Richard's made a good start with his page of examples. Here's another,
> simpler case. In the code below I'd like to align the text to the top of the
> line box (as I get when I set line-height to 1em). Vertical-alignment
> doesn't help, but if I had a way of placing all of the leading below the
> line it would work the way I want.
>
> <style>
>      .line {
>          line-height:2em;
>          background-color:lightgray;
>          vertical-align:top;
>      }
> </style>
> <html>
> <body>
>      <div class="line">
>          "Top" Aligned Text
>      </div>
> </body>
> </html>
>
> Thanks,
>
> Alan

Alan. Please go here an install Ahem font (select AHEM____.TTF).

http://www.w3.org/Style/CSS/Test/Fonts/Ahem/

Once downloaded, place this font in the font directory of the Windows 
directory (within the root directory of your drive) if you are using 
Windows. Someone may want to suggest where the font directory is on Mac.

Now please examine the below test case which has been slightly altered 
from your test case.

<!DOCTYPE html>
<html>

<style>
     .line {
         vertical-align:top; /* DELETE ~ this does nothing at the test 
case stands */
     }
  .line-height {line-height: 2em;}
  .bigger {font-size: 3em;}
  div {border-top: 5px solid blue;border-bottom: 5px solid blue; margin: 
1em 0;}
.outer {background: pink;}
.inner {background: yellow; font-family: Ahem;}

</style>

<body>

     <div class="line line-height">
         <span class="outer">"Top" Aligned Text <span class="inner">X 
pÉ</span></span>
     </div>

     <div class="line line-height bigger">
         <span class="outer">"Top" Aligned Text <span class="inner">X 
pÉ</span></span>
     </div>


     <div class="line">
         <span class="outer">"Top" Aligned Text <span class="inner">X 
pÉ</span></span>
     </div>

     <div class="line bigger">
         <span class="outer">"Top" Aligned Text <span class="inner">X 
pÉ</span></span>
     </div>

</body>
</html>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Sunday, 8 January 2012 07:50:55 UTC