Support Column Breaks part of CSS3 columns spec

NEW
Unassigned

Status

()

Core
Layout
P2
enhancement
7 years ago
4 months ago

People

(Reporter: william, Unassigned)

Tracking

(Depends on: 2 bugs, Blocks: 3 bugs, {css3, dev-doc-needed, DevAdvocacy})

Trunk
css3, dev-doc-needed, DevAdvocacy
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [css3-multicol][DevRel:P1])

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTBDFff GTB7.0
Build Identifier: 

It doesn't appear that the column breaking part of the css3 spec is implemented: http://www.w3.org/TR/css3-multicol/#column-breaks

I am building a webapp that doesn't need to work in IE, and the lack of support for break-inside: avoid-column; is causing problems.

Reproducible: Always

Updated

7 years ago
Status: UNCONFIRMED → NEW
Component: General → Layout
Ever confirmed: true
Keywords: css3
QA Contact: general → layout
Version: unspecified → Trunk

Updated

7 years ago
Whiteboard: [css3-multicol]

Comment 1

7 years ago
This bug makes CSS3 multi-column layouts entirely useless for everything other than text. half implemented things don't help anybody!

Comment 2

6 years ago
The column flow also doesn't happen for tables. These should column break at rows across columns without additional tags. 

As above the use is for a webapp and XULRunner application. 

This could be addressed with colbreak inserted into the <tr>, but would probably be better if tables column flowed like text, as part of the standard flow.
Duplicate of this bug: 649648
richardigp's comment points to a workaround for some of this functionality until it is implemented:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Very definitely a hack, but should be forward-compatible unless a browser supports splitting table cells between columns without supporting column-break-inside.

Updated

6 years ago
Assignee: nobody → sjohnson

Updated

6 years ago
Blocks: 684062
I think we should probably do this as part of bug 132035, or at least do bug 132035 first with this bug in mind.
Depends on: 132035

Updated

5 years ago
Priority: -- → P2

Comment 6

5 years ago
+1

Also, instead of using:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Just use something like:

.column-fix {
        -webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	display: table;
}

Again, it's a hack, but it makes your HTML much cleaner.

Comment 7

5 years ago
It's probably bad manners to drill things but I am not sure this is part of bug 132035. The issue is tables in columns is a flow layout paradigm not a page issue (or am I wrong?). Therefore tables should flow across the columns to reflect the layout intention of the author. The real issue is should header rows repeat on columns but that is probably a little too "printy". 

This is of concern to me/us because our XULRunner based ePub3 reader AZARDI (listed in XULRunner hall of honor) cannot present tables effectively in a controlled viewport/columns based presentation. Webkit handles table flow OK, although it too has some serious column flow issues. It is great to work with the native flow-power of the rendering engine rather than work around it.

Updated

5 years ago
Blocks: 775628

Comment 8

5 years ago
Please fix this ASAP. It is causing people not to use the multi column function. I am trying to use for a mega menu and while it looks great in Safari and Chrome, it fails miserably in FF.
This needs to be fixed ASAP. How can one even think of implementing CSS Columns without the ability to control breaks? Regrettably, this is becoming typical of Mozilla as of late - implementing things half-way and then leaving them there (this bug was filed in 2010!). Microsoft got it right in IE10 (and without prefixes!). Do you want me to switch back to IE?
page-break-inside:avoid just landed on nightly builds.
Depends on: 685012

Comment 11

5 years ago
Excellent, thanks. Will this CSS avoid an element being broken up by a column as well as by a page?

Comment 12

5 years ago
Thanks!!!!

Comment 13

5 years ago
(In reply to EB from comment #12)
> Thanks!!!! I hope it works for columns as well as pages!!!

Comment 14

5 years ago
(In reply to EB from comment #13)
> (In reply to EB from comment #12)
> > Thanks!!!! I hope it works for columns as well as pages!!!
Just tested and it doesn't appear to work for columns :(

Comment 15

4 years ago
It does now - FF v20.0 :-)

Updated

4 years ago
Blocks: 913153

Comment 16

4 years ago
Bug 775618 will alias some existing page-break-* properties. Does this fix (part of) the initial problem?

Comment 17

3 years ago
Scott, still working on this?
Depends on: 775618
Flags: needinfo?(jaywir3)
(In reply to Florian Bender from comment #17)
> Scott, still working on this?

Nope, I'm not working on this at the moment. Feel free to take it if you want. :)
Assignee: jaywir3 → nobody
Flags: needinfo?(jaywir3)

Comment 19

3 years ago
Temporary workaround is to add 'display:table' on element with 'page-break-inside' or just wrap it with table.
CSS multi-columns implementation is a mess between browsers. I came to this :

.column-fix {
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	display: table;
}

But display:table workaround causes issues on other browsers where break-* properties are well supported. So I have to specifically load a stylesheet for Firefox. This puts FF on the same level as IE from a web developer perspective :'(
Keywords: dev-doc-needed

Comment 21

2 years ago
FWIW, to completely prevent column breaks in Firefox, I've found that using the combination:

    display: inline-block;
    width: 100%;

seems to work better as a workaround than `display: table`, which more often interferes with other styles (eg. padding).
Keywords: DevAdvocacy
Whiteboard: [css3-multicol] → [css3-multicol][DevRel:P1]

Updated

11 months ago
Flags: platform-rel?

Updated

11 months ago
platform-rel: --- → ?
platform-rel: ? → ---
You need to log in before you can comment on or make changes to this bug.