[css-rhythm][css-line-grid] Work out the interaction between line-height-step and line-snap

[frivoal]

If we're not careful, the line-height-step property and the line grid will interfere instead of complementing each other. (see also #939)

We need to figure out how line-height-step and line-snap interact. I can think of a few possiblilities

1. When line-snap is not none, line-height-step computes to 0 (or same thing at used value time?)
2. first adjust the height of the line box, distribute the extra space equally above and below, then shift the adjusted linebox down as necessary to snap to the grid
3. first adjust the height of the line box, distribute the extra space equally above and below, then shift the "original" linebox down within the adjusted size as necessary to snap to the grid. If this is not enough and we need to shift the "original" linebox by more than the space distributed below, then:
   3.1. distribute the extra space equally above and below and shift the adjusted linebox down as necessary to snap to the grid
   3.2. place all the extra space above, and and shift the adjusted linebox down as necessary to snap to the grid

I am not exactly sure which of these makes more sense, nor whether the same thing is preferred for line-snap: baseline and line-snap: contain or not, or if we should do something else.

Either way, it seems to me that the fix can go into the css-line-grid spec, but maybe we need to add some anchoring terminology in the css-rhythm spec:

• "the natural line box": the line-box as per CSS21 §10.8 Line height calculations.
• "the adjusted line box": the line box after its height is adjusted by line-height-step.

[kojiishi]

In my understanding, the current definition is 2. Step sizing modifies the algorithm to compute line height. Line grid kicks in after the line height was computed.

I'm not seeing problems in doing so at this moment. In this issue, are you already seeing any problems, or is this a meta-issue that "we should think to see if there were any issues" but no issues are found so far? I'm understanding the latter, correct?

[frivoal]

As far as I can tell, you run into issues when the line-height-step is different from the size of the step of the line grid. This is going to be very hard to discuss without a white board.

I've tried running various examples on paper, and it seems to me that there are cases where approach 2 (i.e. current spec) generates bigger gaps than strictly necessary, and that we could avoid that with different approaches.

Since this is a bit tedious, I'll go with my conclusion first, and then run through some examples to support it.

• There is more than one possible approach to combining line-height-step and line-snap, by playing on how the extra space created by line-height-step is distributed above and below the line.
• The different approaches result in different layouts
• There are several possible approaches that result in less "wasted" space than the one currently specified
• Depending on exactly why people use the values that cause wasted space (use cases vs accidents), which approach is best may vary. We should look at common use cases and common mistakes.

Here are two (similar) examples:

---

Example 1

• The step of the line grid is 16px, with 14px above the baseline and 2px bellow
• The line-height-step is 12px
• The "natural height" of the first line is 10px, with 9 above the baseline and 1 bellow
• The "natural height" of the second line is 14px, with 12 above the baseline and 2 bellow
• The "natural height" of the second line is 10px, with 9 above the baseline and 1 bellow

current spec gives the following result:

• The first line is stepped to 12px, with 10 above the baseline and 2 bellow
• The second line is stepped to 24px, with 17 above the baseline and 7 bellow
• 2 (descender of the first line) + 17 (ascender of the second) don't fit 16, so the second line is shifted down to the third grid line
• The third line is stepped to 12px, with 10 above the baseline and 2 bellow
• 7 (descender of the second line) + 10 (ascender of the third) don't fit 16, so the third line is shifted down to the 5th grid line

=> result: we used 5 lines, with one blank line between each with content line

Alternative approach A:

1. place lines on the line grid before adjusting their height
2. compute the stepped up line height, which gives you an amount of extra space to distribute above and bellow the natural line box
3. place as much as possible, but not more than half, of the extra space above the line, and the rest below
4. repeat the steps with the next line.

• place the first line on the grid: 9px above, 1px below
• distribute the extra space -> 9+1 above, 1+1 below
• The second line at its "natural size" fits on line 2, so place it there: 12 px above, 2px below.
• There is a 2px gap between the bottom of the first (adjusted) line box and the top of the second (natural) line box.
• The stepped up size of line 2 is 24px, giving 10 extra px to distribute.
• distribute the extra space -> 12+2 above, 2+8 below
• The third line at its natural size does not fit, so place it on the 4th grid line
• The third line is stepped to 12px, giving 2 extra px to distribute
• distribute the extra space -> 9+1 above, 1+1 below

=> result: we used 4 lines, with one blank line between the 2nd and the 3rd.

Alternative approach B:

1. place lines on the line grid before adjusting their height
2. compute the stepped up line height, which gives you an amount of extra space to distribute above and bellow the natural line box
3. place as much as possible , but not more than half, of the extra space above the line, and the rest below
4. repeat the steps with the next line.

• place the first line on the grid: 9px above, 1px below
• distribute the extra space -> 9+2 above, 1+0 below
• The second line at its "natural size" fits on line 2, so place it there: 12 px above, 2px below.
• There is a 3px gap between the bottom of the first (adjusted) line box and the top of the second (natural) line box.
• The stepped up size of line 2 is 24px, giving 10 extra px to distribute.
• distribute the extra space -> 12+3 above, 2+7 below
• The third line at its natural size does not fit, so place it on the 4th grid line
• The third line is stepped to 12px, giving 2 extra px to distribute
• distribute the extra space -> 9+2 above, 1+0 below

=> result: we used 4 lines, with one blank line between the 2nd and the 3rd. (same as Approach A)

---

Example 2:

Repeat the whole exercise with a the only difference being a line grid step size of 17px instead of 16px:

current spec gives the following result:

• The first line is stepped to 12px, with 10 above the baseline and 2 bellow
• The second line is stepped to 24px, with 17 above the baseline and 7 bellow
• 2 (descender of the first line) + 17 (ascender of the second) don't fit 17, so the second line is shifted down to the third grid line
• The third line is stepped to 12px, with 10 above the baseline and 2 bellow
• 7 (descender of the second line) + 10 (ascender of the third) do fit 17, so the third line is placed on the 4th grid line

=> result: we used 4 lines, with one blank line between the 1st and the 2nd

Alternative approach A:

• place the first line on the grid: 9px above, 1px below
• distribute the extra space -> 9+1 above, 1+1 below
• The second line at its "natural size" fits on line 2, so place it there: 12 px above, 2px below.
• There is a 3px gap between the bottom of the first (adjusted) line box and the top of the second (natural) line box.
• The stepped up size of line 2 is 24px, giving 10 extra px to distribute.
• distribute the extra space -> 12+3 above, 2+7 below
• The third line at its natural size does not fit, so place it on the 4th grid line
• The third line is stepped to 12px, giving 2 extra px to distribute
• distribute the extra space -> 9+1 above, 1+1 below

=> result: we used 4 lines, with one blank line between the 2nd and the 3rd.

Alternative approach B:

• place the first line on the grid: 9px above, 1px below
• distribute the extra space -> 9+2 above, 1+0 below
• The second line at its "natural size" fits on line 2, so place it there: 12 px above, 2px below.
• There is a 4px gap between the bottom of the first (adjusted) line box and the top of the second (natural) line box.
• The stepped up size of line 2 is 24px, giving 10 extra px to distribute.
• distribute the extra space -> 12+4 above, 2+6 below
• The third line at its natural size does fit, so place it on the 3th grid line
• The third line is stepped to 12px, giving 2 extra px to distribute
• There is a no gap between the bottom of the second (adjusted) line box and the top of the third (natural) line box.
• distribute the extra space -> 9+0 above, 1+2 below

=> result: we used 3 lines, with no one blank line between the content lines.

---

Summary:

	current spec	"approach A"	"approach B"
example 1	5 lines, blank line between each with content line	4 lines, blank line between 2nd and 3rd	4 lines, blank line between 2nd and 3rd
example 2	used 4 lines, blank line between 1st and 2nd	4 lines, blank line between 2nd and 3rd	3 lines, no blank