Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com tests: line box heights

Line-height <1 alignment test

  1. ggggtext
    AAAA

The two lines of text above should overlap. However, the top of the A should not go above the baseline of the g - it should only overlap the g-descender.

<div style="margin: 100px 0; line-height: 5px; font-size: 205px">
Some <span style="font-size: 5px">text</span> <span style="Line-height: 205px">Some</SPAN>
</div>

-------------Top of em square - 100px (205-5)/2 up
^        -------
|        |
|        | 
|      -|-------------------------------------------------
5px     ||          ------------ |-------------- --------||
^       -|----------|----------|-|-------|-----|-|-------|-
|        |          |          | |       |     | |       |
|        |--------  |          | |       |     | |       | 
|(205-5)/2=100px |  |          | |       |     | |-------|
|                |  |          | |       |     | |
|                |  |          | |       |     | |         ______
|                |  |          | |       |     | |         |text|
|Baseline---------  -----------| |       |     | |-------- ------ SPAN
|                         
------bottom of em square 

Since the height of the line box is from the bottom of the bottom box to the top of the top one, only the bottom of g's will go outside the line box. This means that the line below, which has a line box equal to font-size should only overlap with the things that are below the baseline - i.e., the descenders.

Treatment of <BR> test

  1. This should not look the same - this should have much more overlap.

    gggg
    AAAA

Placement of properties on inline test

  1. This should have massive overlap - not mere descender overlap (assuming the two pieces of text are rendered on different lines):

    gggg AAAA

    The code is:

    <div style="margin: 100px 0; line-height: 0">
    <span style="line-height: 5px; font-size: 205px">gggg</span>
    <span style="font-size: 205px; line-height: 205px">AAAA</span>
    </div>

BR test
  1. This should also have massive overlap:

    gggg
    AAAA

    The code is (the same but for a BR element):

    <div style="margin: 100px 0; line-height: 0">
    <span style="line-height: 5px; font-size: 205px">gggg</span><br>
    <span style="font-size: 205px; line-height: 205px">AAAA</span>
    </div>