User-Agent: Mozilla/5.0 (X11; U; Linux i686; nn-NO; rv:220.127.116.11) 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
Bah, wrong url, this is the webkit one: https://bugs.webkit.org/show_bug.cgi?id=15550
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
Created attachment 576043 [details] TEST CASE 1, updated with expected results
Created attachment 576046 [details] TEST CASE 2, updated with expected results
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.
Ok, test case 2 is working in FF again now.
Created attachment 577326 [details] TEST CASE 1, updated to be well-formed
Created attachment 577327 [details] TEST CASE 2, updated to be well-formed
Created attachment 577328 [details] TEST CASE 3, updated to be well-formed
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.
(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.
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 577423 [details] TEST CASE 2, updated for IE 10 Made one last tweak for IE10.
> <!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)
Created attachment 577767 [details] TEST CASE 2 (v4)
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.
4 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.
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.
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.
4 months ago
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
column-span: all always create new block formatting contexts, whether the element is a descendent of a multicol or not, chrome is not currently support.