The default bug view has changed. See this FAQ.

Implement column-span (from CSS3 multicolumn)

NEW
Assigned to

Status

()

Core
CSS Parsing and Computation
P2
enhancement
6 years ago
13 days ago

People

(Reporter: Odin Hørthe Omdal, Assigned: neerja)

Tracking

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

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [css3-multicol][DevRel:P2] [webcompat], URL)

Attachments

(4 attachments, 14 obsolete attachments)

1.53 KB, text/html
Details
254.55 KB, text/html
Details
33.89 KB, text/html
Details
84.43 KB, text/html
Details
(Reporter)

Description

6 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; nn-NO; rv:1.9.2.12) Gecko/20101027 Ubuntu/10.10 (maverick) Firefox/3.6.12
Build Identifier: 

Not implemented:

http://www.w3.org/TR/css3-multicol/#column-span0

Very useful, started looking for it because I needed it. WebKit got it in march:
https://bugzilla.mozilla.org/show_bug.cgi?id=418036

Reproducible: Always
(Reporter)

Comment 1

6 years ago
Created attachment 494979 [details]
testcase
(Reporter)

Updated

6 years ago
Keywords: css3
Whiteboard: [css3-multicol]
(Reporter)

Comment 2

6 years ago
Bah, wrong url, this is the webkit one:

https://bugs.webkit.org/show_bug.cgi?id=15550

Updated

6 years ago
Assignee: nobody → sjohnson
Blocks: 684062
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

6 years ago
No longer blocks: 684062

Updated

6 years ago
Keywords: dev-doc-needed

Updated

6 years ago
Blocks: 684062

Updated

6 years ago
Blocks: 698783
Created attachment 576003 [details]
TEST CASE 1
Created attachment 576004 [details]
TEST CASE 2
Created attachment 576005 [details]
TEST CASE 3
I just added three test cases. Here are results of running competitors' browsers in each of the three test cases (note, IE9 does not implement any multicolumn support, so they were omitted from this):

NAME   | CASE 1 |                     CASE 2                     |           CASE 3            |
------------------------------------------------------------------------------------------------
Safari |  PASS  | Works as expected, but text is crunched (PASS) |            PASS             |
Opera  |  PASS  | Makes the containing div larger (FAIL)         | Places on a new line (FAIL) |
Chrome |  PASS  | Makes the containing div larger (FAIL)         |            PASS             |

So, I think, given this, we should probably look at implementing this in a way similar to how pages are split for printing. If we split the frames in the frame constructor. IIUC, Roc thinks that if we do the splitting in nsCSSFrameConstructor, then we're going to be unable to correctly handle case 3. Given that webkit handles this correctly, we should probably avoid not complying with the spec on this aspect.

Thoughts?
Created attachment 576010 [details]
Chart displaying test results

My previous chart was messed up, so if you can't read it, I'm posting a new chart that is in HTML for better viewing.
latest IE10 Platform Preview implements columns, so you should test that too.
Can you include in your test results what the expected rendering is and what the test is supposed to be testing?
(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #8)
> latest IE10 Platform Preview implements columns, so you should test that too.

Yep, I'm installing it on a VM right now.

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #9)
> Can you include in your test results what the expected rendering is and what
> the test is supposed to be testing?

Sure. I'll add that information.
Created attachment 576040 [details]
TEST CASE 3, updated with expected results
Attachment #576005 - Attachment is obsolete: true
Created attachment 576043 [details]
TEST CASE 1, updated with expected results
Attachment #576003 - Attachment is obsolete: true
Created attachment 576046 [details]
TEST CASE 2, updated with expected results
Attachment #576004 - Attachment is obsolete: true
I've updated the test cases. I will work on updating the chart so that it has images of what I see when I run the test on the given platform.
Oops, it looks like test case #2 is messed up in firefox. Let me tweak it a bit.
Created attachment 576052 [details]
TEST CASE 2, updated with expected results
Comment hidden (typo)
Ok, test case 2 is working in FF again now.
Created attachment 577326 [details]
TEST CASE 1, updated to be well-formed
Attachment #576043 - Attachment is obsolete: true
Created attachment 577327 [details]
TEST CASE 2, updated to be well-formed
Attachment #576052 - Attachment is obsolete: true
Created attachment 577328 [details]
TEST CASE 3, updated to be well-formed
Attachment #576040 - Attachment is obsolete: true
The test results needed to be placed at: http://www.glasstowerstudios.com/~scottj/test-results-b616436.html as bugzilla wouldn't let me post an attachment greater than 4096 bytes.

I've updated the chart of test results to include IE10. I found that IE10 developer preview is *very* picky when it comes to the syntax of html files that include multicolumn CSS properties. Specifically, if I didn't include the "<!DOCTYPE html PUBLIC "">", it would not display ANY multicolumn formatting. Further, behavior was different at times, depending on whether I added "<html>", "<body", and "<head>" tags.

There were two instances when the "<H2>" element wasn't even displayed. My thinking is that, for some reason, rather than placing a column-span: all element into the overflow, and treating it as column-span: none, when there isn't enough room for it, as the spec says to do, IE10 seems to just not display the element. Either than, or there is an issue with how I am specifying it. 

I also found a few errors with my previous tests, which have since been fixed. This caused some of the Safari and Chrome tests to result in expected values, so I changed them to PASS.

Updated

5 years ago
Attachment #576010 - Attachment is obsolete: true

Updated

5 years ago
(In reply to Scott Johnson (:jwir3) from comment #22)
> I've updated the chart of test results to include IE10. I found that IE10
> developer preview is *very* picky when it comes to the syntax of html files
> that include multicolumn CSS properties. Specifically, if I didn't include
> the "<!DOCTYPE html PUBLIC "">", it would not display ANY multicolumn
> formatting.

That's because IE only supports new CSS features in its "standards mode".
Testcase #3 has only 'column-span' on h2, no vendor prefixes. It needs the vendor prefixes.

I don't see the red box in testcase #2.
Created attachment 577398 [details]
TEST CASE 3, updated with vendor prefixes for h2

> Testcase #3 has only 'column-span' on h2, no vendor prefixes. It needs the
> vendor prefixes.

Fixed now.
Attachment #577328 - Attachment is obsolete: true
(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #24)
 
> I don't see the red box in testcase #2.

Hmm... so it apparently doesn't execute javascript when I use the "<!DOCTYPE html PUBLIC "">". Is there some way I can specify specific parts of an html document to be used only with certain browsers?
Actually I do see the box. (Why does JS matter? You're not using it.) It just looks pink because of the opacity:0.4. It's a bit confusing that the box extends below the element though. Also, it might disrupt the layout since it actually does take up space.

I'd just make it an absolutely positioned child of the div-with-columns, top:150px; width:100%, border-top:2px dashed red.
Created attachment 577407 [details]
TEST CASE 2, updated with expected results

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #27)
> Actually I do see the box. (Why does JS matter? You're not using it.) It
> just looks pink because of the opacity:0.4. It's a bit confusing that the
> box extends below the element though. Also, it might disrupt the layout
> since it actually does take up space.

Ah... yes, I was using javascript in a previous iteration to conditionally position the box on all platforms. But, I can achieve the same effect with what you suggested. Thanks.
Attachment #577327 - Attachment is obsolete: true
Created attachment 577423 [details]
TEST CASE 2, updated for IE 10

Made one last tweak for IE10.
Attachment #577407 - Attachment is obsolete: true

Comment 30

5 years ago
> <!DOCTYPE html PUBLIC "">

That's a senseless doctype. Just use HTML5 doctype to trigger standards mode in any Browser:

<!DOCTYPE html>

Ans validate your HTML files:

http://validator.w3.org/
or
http://validator.nu/

(and you can omit  type="text/css")
Created attachment 577766 [details]
TEST CASE 1 (v4)
Attachment #577326 - Attachment is obsolete: true
Created attachment 577767 [details]
TEST CASE 2 (v4)
Attachment #577423 - Attachment is obsolete: true
Created attachment 577768 [details]
TEST CASE 3 (v4)

(In reply to j.j. from comment #30)
> > <!DOCTYPE html PUBLIC "">
> 
> That's a senseless doctype. Just use HTML5 doctype to trigger standards mode
> in any Browser:
> 
> <!DOCTYPE html>
> 
> Ans validate your HTML files:
> 
> http://validator.w3.org/
> or
> http://validator.nu/
> 
> (and you can omit  type="text/css")

Thanks for the recommendation. I've validated these and removed the text/css part of the style tag.
Attachment #577398 - Attachment is obsolete: true

Updated

5 years ago
Priority: -- → P2

Updated

5 years ago
No longer blocks: 698783
Duplicate of this bug: 832618

Updated

4 years ago
Blocks: 913153

Updated

4 years ago
Assignee: sjohnson → nobody

Comment 35

2 years ago
I am trying to translate study in PDF to HTML. Its layout features two-columns with some of the tables spanning across both columns, causing a break in the text of the second column.

The layout of the study requires the tables span across both columns and since CSS3 column-span is not implemented, it is impossible to make the layout as shown in the PDF.


The study:
http://igmoris.nic.in/files/Biosafety_data/Biosafety/NK603%20-%20Monsanto/Hammond%20et%20al%202004.pdf

If we can make a proper hand-translation to HTML (and Adobe Acrobat Pro "Save As Webpage" doesn't even come close), then we can better explain boggy science to the public. Generally, such things are boring and hard. I want to highlight some of the problems in this study by Monsanto and I want to do it using dynamic effects in HTML. But I can't properly mark it up into HTML because column-span isn't implemented.

In general, it's important to have this feature for other scientific studies and the PDF alternative has many downsides.

Also, I noticed that this bug is four years old.
Alias: dhtmlkitchen@gmail.com
Alias: dhtmlkitchen@gmail.com
Comment hidden (offtopic)
Comment hidden (offtopic)
Comment hidden (offtopic)

Comment 39

a year ago
Would it be possible to take the part of Gecko used to render tables and re-purpose it to render columns? They seem like an analogous problem.

Requesting information from Scott Johnson about whatever progress he made while he was the bug's assignee.

Also suggesting the dev team raise this to P1 given the time it has spent open combined with the heightened importance of parity with WebKit as a result of the Chrome wars.
Flags: needinfo?(jaywir3)
My apologies for the late reply.

(In reply to ipatrol from comment #39)
> Would it be possible to take the part of Gecko used to render tables and
> re-purpose it to render columns? They seem like an analogous problem.

No. Tables and column sets function pretty differently. Namely, the table code doesn't allow for content to flow between table cells as in column sets. The way the column set code works is as follows - depending on how the columns are setup in CSS, there is a single nsColumnSetFrame that has anonymous block-level frames within it (the number are determined by the CSS rules). Then, during the reflow of the column set frame, the height of each of these anonymous frames is determined using a binary search over the set of constraints to determine the "optimal" height.

The reason this matters is that, given a spanning element, we somehow need it to span across these multiple anonymous block frames. However, this shouldn't affect the binary search algorithm, other than the content needs to flow around the new spanning element in all child frames of the column set.
 
> Requesting information from Scott Johnson about whatever progress he made
> while he was the bug's assignee.

So, my original intent was to split the column set frame into two column set frames, with another anonymous block frame in between (the spanning element). The problem is with the binary search, and flowing content between these two column set frames given a change in width (or other property that would require a new reflow) of the column set frame.

I think that we might be able to do something akin to what's been done with absolute/relative positioning elements - that is, make a placeholder frame, leave room for the spanning element within each column, and then add it back in visually after the reflow has completed.

I'm simply not sure how to go about this at the moment. I can give you insight into the nsColumnSetFrame code if it would be helpful, if you're interested in starting on a new patch.
Flags: needinfo?(jaywir3)
Keywords: DevAdvocacy

Updated

11 months ago
Whiteboard: [css3-multicol] → [css3-multicol][DevRel:P2]

Updated

9 months ago
Flags: platform-rel?

Updated

9 months ago
platform-rel: --- → ?
Summary: column-span not implemented (css3 multicolumn) → Implement column-span (from CSS3 multicolumn)
platform-rel: ? → ---
(Assignee)

Updated

2 months ago
Assignee: nobody → npancholi
(Assignee)

Updated

a month ago
Depends on: 1339298
The URL for the test case is not reachable, so I replaced it with the one to the spec.

Sebastian
Creates Web Compatibility issue on https://boards.greenhouse.io/robinhood
See https://webcompat.com/issues/4902
Whiteboard: [css3-multicol][DevRel:P2] → [css3-multicol][DevRel:P2] [webcompat]
(Assignee)

Updated

13 days ago
Depends on: 1346983
You need to log in before you can comment on or make changes to this bug.