Re: [css-line-grid] (mostly) editorial comments on the ED

On 8/15/14, 12:32 PM, "Dave Cramer" <dauwhe@gmail.com> wrote:

>Hi Alan,
>
>
>Here are a few observations after reading through the ED.

Thanks for the read-through!

> 
>[1] Perhaps due to my background in print, I'm used to seeing baseline
>grids, and find them to be the easiest way to visualize text alignment. A
>baseline grid might make figures 1 and 2 a little easier to understand at
>a glance, but others might disagree.

I agree. Given the content in figure 1, I think it should show an
alphabetic baseline grid.

>[2] What's the intended alignment for the sidebar in figure 3? In my
>browsers, neither the top of the text nor the baseline align with the
>first line of the main text. I think of it as a lovely example of the
>need for this functionality :)

Correct - it appears to be showing identical line-heights, but all of the
alphabetic baselines should be aligned. There’s a separate solution that
would not have identical line-heights and just have the first line of the
side note baseline align with the main text’s baseline. That could be an
example for box-snap:first-baseline.

>[3] I didn't immediately find definitions of text-over baseline and
>text-under baselines. CSS Line Layout uses text-over-edge and
>text-under-edge, but also has text-before-edge and text-after-edge. The
>original definitions seem to be in CSS Writing Modes.

Thanks - I noticed the lack of definitions when I did the bikeshed
conversion, but hadn’t yet fixed them up.

>[4] Section 3.1. I'd like to see an example of line-snap: contains.

There should be two examples - one where a line small enough is contained
by consecutive text-over and text-under baselines, and one where a larger
line is contained by non-consecutive baselines.

>[5] Example 2 is very good, and is a nice introduction to how
>line-snapping works.
>
>
>[6] For Example 3, I would have found it helpful to have a figure showing
>the original situation, before any shifting or snapping. Perhaps having a
>more visible border around the images would help illustrate the vertical
>centering (there's not much contrast
> between the white figure background and the example background color).

Hmm, I see what you mean. It doesn’t help that the line-grid isn’t
centered in the picture, either. I omitted the earlier steps, because in
my mind they’re identical to figures 7 and 8 above. I could make that more
explicit in the text.

>[7] Example 4 might benefit from showing the intermediate stage as well
>as the start and end point.

The only issue with that is that the intermediate stage either has the
block top-aligned (as in figure 8) or the partial shifting doesn’t
directly show how it’s being influenced by the grid. I do see that I need
to change ‘centering’ to ‘end-alignment’ in the prose.

>[8] Use case: a very common situation for us is a page of regular text,
>interrupted by a blockquote that uses a different font size and line
>height:
>
>
>p { font-size: 12pt; line-height: 16pt; }
>
>blockquote p { font-size: 10pt; line-height: 13pt; }
>
>
>There are two constraints:
>
>
>[A] The regular text after the blockquote should align to the baseline
>grid
>
>[B] The space above and below the blockquote should be equal.
>
>
>Using a line grid for the regular text would satisfy the first
>constraint, but not the second. Would applying box-snap: center to the
>blockquote do this?

It would get fairly close to your second constraint. The perceptual space
might be slightly different depending on the regular text’s descent and
cap height. A large cap height and small descent would make the block
quote look slightly lower than center.

>[9] I probably shouldn't mention a desire to align the last text baseline
>of a page float (like a sidebar) to a line grid :)

That should work with box-snap:last-baseline. Are you concerned with how
line grids will interact with float positioning, or do you have some other
complication in mind?

Thanks,

Alan

Received on Friday, 15 August 2014 20:06:37 UTC