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 · 9 comments
Open
Assignees

Comments

@rachelandrew
Copy link
Contributor

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 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 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

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 commented Jul 19, 2019

What can I do to help push this along?

@rachelandrew
Copy link
Contributor Author

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 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

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 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.

@baybal
Copy link

baybal commented Nov 29, 2021

I just stumbled on this peculiarity of the spec, and I want the spec to follow firefox, and historical webkit behaviour: extra content overflows vertically as if columns are balanced, and it respects orphans css prop.

Otherwise, I see no way how to square it with #4689 and spec-compliant column-fill, an min-height behaviour.

How overflow-y: auto can work if columns overflow an y-scrollable container element? Columns will overlow on the right, while y-direction will be occupied by empty space equivalent to height of overflown column?

I cannot fathom what purpose this logic serves.

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

No branches or pull requests

6 participants