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.

4 Responses to Box Leading Model

  1. diding says:

    Yeah, it’s great! Thanks for your hard work.
    BTW,when to release the tableElement?
    when I want to use table in tlf, I must use a component extends sprite as a table like Live Writer .the following is an e.g.(
    but really, I want a tableElement , especially official .

  2. Robin Briggs says:

    Thanks! I’m afraid tables are still on our to-do list; they are not part of TLF 2.0.

  3. Jan Klosinski says:

    Could you post a sample code which demonstrates this behavior? I’ve been trying to see a difference in rendering a span with a baselineShift set, and I don’t see any difference between BOX and AUTO.

    • Alan Stearns says:

      You won’t see much of a difference if you only have a single line of text. If you have multiple lines like the examples above you can set baseline shift on a span and have it collide with a line above or below with the default leading model. The box model will allocate more space for the line with the baseline shifted text to avoid that collision.