Box Leading Model

The leadingModel property controls the placement of lines, and we’ve added a new possible value for it — “box”. The box leading model approximates how lines are laid out in the browser. TLF’s default leading model is a baseline-to-baseline model that allows designers to exactly specify the distance from one baseline to the next, but it doesn’t allow “corrections” for situations the designer may not have envisioned or planned for, such as extra space required for superscripts, subscripts, or inline graphics. With the box leading model, TLF calculates the “natural” bounding box of the line, based on the size and vertical locations of the items in the line. Then it places the line using the maximum of the line height and natural height, so you can add space between the lines by adjusting the line height, but the space will never be smaller than the natural height.

You should consider using the new box leading model if you more concerned about lines overlapping than you are about uneven spacing. In particular, I would suggest using it if you are having problems with inline graphics, baselineShifts, or other content that may cause lines to overlap. Continue using the existing leading models if it is more important to have all lines spaced evenly.

Here’s an example of what the difference looks like in practice. This is some text with a superscript using the default leading model (“auto” with English text, which corresponds to “romanUp”):

Notice that the second line has a superscript in it that goes very close to the line above. If there were a character with a descender above it, the descender would collide with the superscript. Now look at the identical text with the box leading model applied:

Now the second line is allocated more space, so that the superscript doesn’t intersect the line above. But there’s a tradeoff, and you’ll notice that the lines are no longer evenly spaced. This is roughly the way a browser would lay out the same text, and it is very handy for cases where you don’t know what might be in the text being displayed, but you do know you don’t want any overlaps.