RichInStyle.com - proposals: the inline box model

Contents

Introduction

This proposal is designed to address the problems with the current inline box model. Specifically, it is intended to address the following deficiencies:

1. That the current implementation is difficult to understand, few people correctly understanding it.
2. That even if one does understand it, it is complicated to work out the height of the line box that will result - line-height frequently does not set the height of the line box!
3. That the way in which the specification is implemented results in absurd results - where elements are inline that have a small font size, they can distort the line box height.

   Attempts have been made to address this, the suggestion being made that each line box should be assumed to be spanned by an inline element with font-size equal to line-height. However, such suggestions are demonstrably flawed:

   1. They mean that one cannot always set the line box height to the value that one wishes.
   2. They necessitate an arbitrary value for the baseline of the spanning element.
4. That backgrounds are implemented in an ugly way.

As a result, I am proposing this simpler alternative:

Line boxes

The line box is the box used for alignment of text. Text is aligned with respect to the line box. Line boxes are always stacked without separation:

Line boxes are used solely for alignment - text may overflow the line box.

The height of the line box

A line box's height is equal in size to the larger of

1. the largest computed value for line-height within that line, and
2. the replaced element (such as an image) with the absolute height (i.e., including borders, padding and margin) within that line.

For example:

<P style="line-height: 2; font-size: 20px">
This is a P element. <SPAN style="font-size: 1.5em">And this is a SPAN.</SPAN>

In this example, the line box would be 60 pixels high (the SPAN has a font-size of 30 pixels, line-height: 2 therefore results in 60 pixels).

<P style="line-height: 2; font-size: 20px">
This is a P element. <IMG src="image.png" style="height: 50px; border: solid 2px">

In this example, the line box would be 54 pixels high - the total height of the image is 50 + 2 + 2 = 54 pixels.

Alignment of text within line boxes

The em square

The em square is the box in which glyphs are placed. It is exactly equal in height to the actual value (i.e., the one arrived at after taking into account font-size and font-size-adjust, plus any clipping or rounding to a value that the browser can render) for font-size.

Leading

The leading of a line box is equal to the difference between the height of the line box and the maximum value of:

1. the height of the em squares in that line box
2. the absolute height of images in that line box

For example, given:

<P style="line-height: 30px; font-size: 20px">
<SPAN style="font-size: 24px">Text</SPAN>

The half-leading is equal to half this value - 3 pixels. It is so called because half of the leading will be applied above, and half below the text - the text is centered vertically within the line box.

Vertical-align

Baseline-aligned text

Every line box has a baseline. The baseline of a line box is half-leading + the maximum actual value for the baseline descriptor of fonts within the line box above the bottom of the line box. In the example above, assuming a baseline value of 3 pixels for P and 4 for SPAN, the baseline is therefore 4 (max-baseline) + 3 (half-leading) = 7 pixels above the bottom of the line box.

All elements within that line box that have vertical-align: baseline will have their baselines aligned with this point. Elements that do not have baselines will have their bottoms aligned with this point.

Text-top-aligned text

The top of the em square of text-top-aligned text is aligned with the top of the highest em square in that line box.

If the element doesn't have a baseline, its top is aligned with that point instead.

Text-bottom-aligned text

The bottom of the em square of text-bottom-aligned text is aligned with the bottom of the lowest em square in that line box.

If the element doesn't have a baseline, its bottom is aligned with that point instead.

Top-aligned text

The top of the em square of top-aligned text is aligned with the highest of:

1. the top of the highest em square in that line box
2. the highest absolute top of replaced elements in that line box

If the element doesn't have a baseline, its top is aligned with that point instead.

Bottom-aligned text

The bottom of the em square of bottom-aligned text is aligned with the lowest of:

1. the bottom of the lowest em square in that line box
2. the lowest absolute bottom of replaced elements in that line box

If the element doesn't have a baseline, its bottom is aligned with that point instead.

Middle-aligned text

The middle of the em square of middle-aligned text is aligned with the baseline of the line box plus half the largest value of x-height in the line box.

If the element doesn't have a baseline, its absolute middle is aligned with that point instead.

Subscripted text

The baseline of subscripted text is aligned with a point below the baseline of the line box. This distance below should be determined by reference to the font itself.

If the element doesn't have a baseline, its bottom is aligned with that point instead.

Superscripted text

The baseline of superscripted text is aligned with a point above the baseline of the line box. This distance above should be determined by reference to the font itself.

If the element doesn't have a baseline, its bottom is aligned with that point instead.

Length- and percentage-aligned text

The baseline of length-aligned text is aligned with respect to the baseline of the line box. This distance should be determined by the computed value for vertical-align. Positive values raise the baseline, negative ones lower it. Percentages relate to the computed value for line-height of the element on which it is specified. For example, vertical-align: 10%; line-height: 20px means that the baseline should be raised by 2px.

If the element doesn't have a baseline, its bottom is aligned with that point instead.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.