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

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 18px, 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** |

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/940#issuecomment-292425207 using your GitHub account

Received on Friday, 7 April 2017 03:54:38 UTC