Skip to content
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
Open

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

fantasai opened this issue Nov 5, 2017 · 3 comments

Comments

@fantasai
Copy link
Collaborator

@fantasai 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
Copy link

@meyerweb 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
Copy link

@andresgalante 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
Copy link

@meyerweb 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.