New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-sizing-3] Illustrate the Sizing Spec #1938

Open
fantasai opened this Issue Nov 5, 2017 · 3 comments

Comments

Projects
None yet
4 participants
@fantasai
Contributor

fantasai commented Nov 5, 2017

The new sizing keywords are kindof important for authors, especially now that Flex and Grid make them more useful. It would be nice for the spec to have some illustrations.

Needed SVG diagrams:

  • size (e.g. a rectangle with arrows representing block size, inline size, width, height -- maybe abbreviated version of these ascii diagrams
  • inner size
  • outer size
  • stretch-fit size
  • max-content size
  • min-content size
  • fit-content size

(Aside from the first one, “size”, illustrating these for just the inline axis should be sufficient.)

@meyerweb

This comment has been minimized.

Show comment
Hide comment
@meyerweb

meyerweb Nov 6, 2017

I’m pretty sure I can put together inner size and outer size diagrams in short order. I’d most likely use https://meyerweb.github.io/csstdg4figs/07-basic-visual-formatting/content-area-and-surroundings.html as a starting point for the appearance, unless you have existing box model diagrams you’d rather they emulate.

The rest I’m not sure about, since I’m not clear exactly what’s to be illustrated and in what way. (For the first, size, knowing which parts of the diagram are crucial and which are not is key.) I’m happy to turn pen sketches into SVG, if that’s easy to do. Or point to definitions and supporting explanations, and I can do my best to work it out on my own.

meyerweb commented Nov 6, 2017

I’m pretty sure I can put together inner size and outer size diagrams in short order. I’d most likely use https://meyerweb.github.io/csstdg4figs/07-basic-visual-formatting/content-area-and-surroundings.html as a starting point for the appearance, unless you have existing box model diagrams you’d rather they emulate.

The rest I’m not sure about, since I’m not clear exactly what’s to be illustrated and in what way. (For the first, size, knowing which parts of the diagram are crucial and which are not is key.) I’m happy to turn pen sketches into SVG, if that’s easy to do. Or point to definitions and supporting explanations, and I can do my best to work it out on my own.

@andresgalante

This comment has been minimized.

Show comment
Hide comment
@andresgalante

andresgalante Nov 6, 2017

I am sure @meyerweb will do a better job than me at it. But if you guys don't have time for this I can try doing it.

@fantasai if you can draw your ideas on a napkin I will have them done in no time.

andresgalante commented Nov 6, 2017

I am sure @meyerweb will do a better job than me at it. But if you guys don't have time for this I can try doing it.

@fantasai if you can draw your ideas on a napkin I will have them done in no time.

@meyerweb

This comment has been minimized.

Show comment
Hide comment
@meyerweb

meyerweb Nov 7, 2017

Attached are stabs at inner size and outer size. Should there also be vertical-axis labels? (Pardon me, cross-axis labels.)
inner-outer-sizes.zip

meyerweb commented Nov 7, 2017

Attached are stabs at inner size and outer size. Should there also be vertical-axis labels? (Pardon me, cross-axis labels.)
inner-outer-sizes.zip

@frivoal frivoal added the Help Wanted label Mar 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment