SVG images for alignment spec - positional alignment

[rachelandrew]

Some SVG images for the alignment specification positional alignment section.

I have the Sketch document here if you can think of clearer examples, or want additional labels etc.

[fantasai]

Hm, so in the interest of consistency, I'm thinking these should either follow the style in the overview, or follow the style with the distribution keywords. Also wondering if there's a way to convey what start actually means more clearly? The images make flex-start, self-start, start, and left all seem identical...

[fantasai]

(Happy to merge the branch in anyway, though, if you're comfortable making improvements live. But also okay if you want to sketch things out elsewhere before finalizing.)

[rachelandrew]

Yes I couldn't think of a useful way to show the difference - if you have any ideas I can give it a go

[fantasai]

I got nothing. :(

[rachelandrew]

I was thinking about this. I could switch start and end lines (so start being on the right) which might help people to understand that start isn't always equal to left.

self-start is the hardest one though to come up with a clear example that isn't a mess of labels.

[fantasai]

Yeah, but then why is it on the right? In English it's always to the left...

I guess another important point would be that these operate in the vertical axis as well. :) Like, start=top for align-self in Grid or in a horizontal flexbox, but start=left for justify-self in the same situations.

For self-start vs start, maybe show the letters A, 文, א, and α in each box, and then using the align-self model in flex, show that they all align to the left for start, but the Hebrew letter aligns right for self-start? If we make it a wrap-reverse flexbox (with 5, 6, 7 as the next few boxes to show the ordering) then we can also demonstrate flex-start vs start by wrapping the last few items to a new line, but maybe that's a bit much... it'll need a caption for sure, but then that might be appropriate for the specificness of flex-*.

[rachelandrew]

I think if you want to show vertical axis as well we end up with a number of diagrams for each possibility. Which is fine, but it could end up being an entire grid of tiny drawings.

[rachelandrew]

Back on this now I've finished launching all the things. How about something like this (this is just for start, so we will end up with a little set for each). I've also used a similar style as the earlier images in the spec.

I think this format gives enough to be able to demonstrate some of the differences between the types.

[tabatkins]

We don't need the arrows in the diagrams (they're there in the generic diagrams for each property, to indicate where things can move; here nothing's moving, as it's already positioned), but otherwise 👍 for the diagram revisions. If you can produce those I'll happily merge.

(Sorry for the delay, but I just merged and reviewed the older ones, and I agree with @fantasai’s earlier critiques.)

[rachelandrew]

So I have:

start

end

*center

self-start

(which I'm still not sure about)

flex-start

flex-end

left

right

Thoughts? Changes/additional images? Once we like them I'll turn them into SVG.

[fantasai]

Oy, missed your last comment here @rachelandrew. We've merged in some illustrations from Melanie Richards into a series of examples in https://drafts.csswg.org/css-align/#positional-values which I think helps explain the different start/end variants, might help with your question about self-start. I would also love to have illustrations per keyword as you have here, though, to make it easy for people to absorb information from the list of values.

The first comment I have is that the illustrations should be scaled so that they can take up less vertical space on the page and generally be more information-dense, e.g. by scaling up the font and scaling down the distances. The other comment I have is maybe have a look at the illustrations Melanie added and see if there are ways to make the diagrams clearer/more self-evident. (This is admittedly a hard problem. Links to the examples / clarifying caption text might be needed.)

This is a hard spec to illustrate, but also one in which it's going to be important!

[svgeesus]

@rachelandrew if you could link your GitHub account with your W3C one the IPR bot would be happy.

@fantasai are there being merged later after changes, or should this be closed?

[fantasai]

See comments above.

[svgeesus]

@rachelandrew there are requests for further changes from @fantasai are you able to make those changes?

Or (given the long time since this PR was opened, and that other illustrations have been added meanwhile) should this PR be closed? The changes in #1066 (comment) look good to me personally, but I am not one of the editors.

Also closing/re-opening just to kick the bot into action