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-multicol] Overflow in the block direction for continuous media #2923

Open
rachelandrew opened this issue Jul 13, 2018 · 8 comments
Open

[css-multicol] Overflow in the block direction for continuous media #2923

rachelandrew opened this issue Jul 13, 2018 · 8 comments
Assignees

Comments

@rachelandrew
Copy link
Contributor

@rachelandrew rachelandrew commented Jul 13, 2018

In multicol 1, overflow in continuous media happens in the inline direction, therefore if we restrict a multicol container by height and the content of that container creates more columns than will fit, new columns are created in the inline direction and we get a horizontal scrollbar. This is, in general, not what web authors want.

Overflow in the Block direction would enable something like the below image, where the additional columns are created below the initial multicol container.

overflow-block-direction

In talking to web authors, there was an interest in this ability. Use cases would be to give the multicol container a height in viewport units in order to know that a reader would not have to scroll up and down to read the content, instead they could read one set of columns, scroll down and read the next. There are examples of people using vertical media queries to check for enough space to display columns such as https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-12

When discussing this, authors immediately jumped to the need/desire to control those overflow columns in some way, perhaps by being able to specify a different number of columns/column width in the overflow. For example having the first set of column boxes render three columns, and the second two.

@frivoal
Copy link
Collaborator

@frivoal frivoal commented Jul 13, 2018

I have a work-in-progress draft spec to deal with putting additional columns in the block direction (and sizing things properly, so that these extra columns are not only overflow, but actually consume space and don't collide with what's after). I'll share as soon as it is a bit more fleshed out.

When it comes to styling the next row(s) of columns differently, I think this will be solved by continue: fragment and ::nth-fragment](https://drafts.csswg.org/css-overflow-4/#fragment-pseudo-element). That isn't solved yet, but we're making baby steps towards it in css-overflow-3, since line-clamp starts to put in place some of the related machinery.

@arnt
Copy link

@arnt arnt commented Jan 12, 2019

For paged media, please make the default height of the multicol container be "to the bottom of the current page".

@jr-grenoble
Copy link

@jr-grenoble jr-grenoble commented May 11, 2019

The feature is absolutely needed, but it begs one comment: allowing text to flow in the block direction is equivalent to assigning paged media behavior to continuous media for the purpose of multicols (in paged media, columns must overflow in the "block" direction).

Wouldn't it be both more general and easier to allow CSS to assign paged media behavior to continuous media? This would well support the use of CSS to create interactive presentations (slides) or newspaper like layouts, on screen; and it would immediately solve the multicol issue.

By the way, controlling whether columns have the same specs when moving to the next "page/block" remains an open question.

@Heydon
Copy link

@Heydon Heydon commented Jul 19, 2019

What can I do to help push this along?

@rachelandrew
Copy link
Contributor Author

@rachelandrew rachelandrew commented Jul 19, 2019

It's something we intend to look at in Level 2, I'm currently working to get Level 1 back to CR so it isn't something we can focus on right now. What would help would be if someone were willing to pay for the work - neither @frivoal nor myself are specifically paid to work on multicol. So we do it as we have time to do and the time I have I'm using to get the issues in the Level 1 specification sorted.

@Heydon
Copy link

@Heydon Heydon commented Jul 19, 2019

@rachelandrew Thanks for the quick reply. Okay, I don't think I can afford to pay you 😅but, if it is at all helpful, maybe I can write about it publicly, and moot some ideas for the syntax. I am already exploring some existing ways to control column display based on circumstance, such as using quantity queries: https://codepen.io/heydon/pen/PvXJGv.

@rachelandrew
Copy link
Contributor Author

@rachelandrew rachelandrew commented Jul 19, 2019

Yes - we are always interested in ideas and particularly in use cases for this stuff! Do post a link back here, it can take a while for things to get worked on but we do take the contributions of folk into account when we get to it.

@Heydon
Copy link

@Heydon Heydon commented Jul 22, 2019

@rachelandrew Here's the post: https://every-layout.dev/blog/multi-column-manipulation/

P.S. I tried using a CSS regions polyfill to emulate block overflow, but couldn't get the polyfill itself yo work. I may revisit it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
css-multicol-1
  
Level 2
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants