Prev: Absolute Question
Next: Centered content with changing background color
From: Jukka K. Korpela on 18 Apr 2010 04:32
A. Deguza wrote:

> I Looked at the examples at
> http://www.w3.org/TR/css3-multicol/#introduction. Then put Example IX
> in a text file and saved it as html.

You missed the information (available from sources outside the W3C draft)
that some support exists for multi-column when browser-specific experimental
names are used for the properties.

> P.S.: Here is the code for the Example IX:

In future, when problems recur, post the URL of a document that demonstrates
the problem, with validated markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Gus Richter on 18 Apr 2010 09:57
On 4/17/2010 11:37 PM, Jukka K. Korpela wrote:
>
> "Snaking columns" seems to refer to columns where content is
> to be read by reading the columns consecutively in the layout order.
> Isn't there any official term for this? The CSS Multi-column Layout
> Module draft doesn't bother even explaining what "multicolumn" really
> means in it, as opposite to the very common setting where a web page is
> divided into columns, each with content of its own, to be read in any
> order.

I had no idea what "Snaking Columns" referred to until after I searched
for it. I guess it does have a sense to it, although I had been used to
referring to it as "Newspaper Columns" (and being part of "Pagination").
Browser developers are calling it "multi-Columns". W3C describess its
functionality as "content can be flowed into multiple columns with a gap
and a rule between them". So be it - they all smell the same.

>> Firefox, Chrome, Safari support it with proprietary CSS properties.
>
> So you'd need duplication such as (to quote the CSS of the demo page you
> mentioned)

In fact, it's not a demo page at all but a live blog (by a Mozilla
developer targetted basically at Mozilla users) wherein the use of
Multicolumns is ongoing. I selected the particular dated blog due to its
depth of columns. Note the latest:
<http://weblogs.mozillazine.org/roc/archives/2010/04/accelerating_th.html>

> .columns {
> -moz-column-width: 20em;
> -moz-column-gap: 3em;
> -moz-column-rule: 1px solid;
> -webkit-column-width: 20em;
> -webkit-column-gap: 3em;
> -webkit-column-rule: 1px solid;
> }
>
> I wonder the syntax used in the draft has been omitted. Technically,
> using it would make the style sheet incorrect according to W3C
> recommendations on CSS, but those recommendations are a mess, and using
> that syntax would seem to be the best way to prepare for browsers that
> will implement the draft or a recommendation based on it.

The proprietary properties are not recommended to be used except for
experimental purposes and not for production purposes. One reason being
that the specification is not finalized and may yet change.

>> Opera and IE don't, but degrade gracefully.
>
> In the sense that they just ignore all the CSS declarations written
> using browser-specific syntax for other browsers - not surprisingly. If
> you additionally used column-width etc., then there might be problems,
> in versions of the browsers having _some_ supporty to multi-column but
> limited and possibly buggy. So this might be a reason to consider
> avoiding the proposed "standard" syntax.

Such is my understanding as well.

>> Here is a live example:
>> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>
>
> The degradation isn't that graceful in practice, since on IE, the
> content appears in one column with no width limitation, so looking at
> the page on, say, 1680 px screen in fullscreen mode is... an experience.
> I think a good example would also address the practical question of
> setting maximum width for the content when multi-column is not applied,
> without disturbing multi-column presentation.

Since the blog is directed at a mostly Mozilla user audience, the author
may not have bothered much about the fine points for an IE or Opera user.

> And if you look at the example page on a browser that _does_ support the
> multi-column techniques used, and if you test it with varying canvas
> widths, you'll see that it's not that great. Usually multi-column
> presentation more or less requires justification (text-align: justify)
> to look good, at least if the columns are fairly narrow. This in turn
> means that hyphenation should be used - but browsers don't do that
> (without much help), and e.g. Firefox does not even break a word like
> "GPU-assisted" after the hyphen, unless you help it by writing
> "GPU-<wbr>assisted" in the markup.

Agreed - or by using Soft Hyphen (&shy;). Essentially a word-processor
simulation would be ideal with auto-hyphenation.

> Besides, reading a long column _using vertical scrolling_ and then
> scrolling upwards again to get to the start of the next column is
> rather... perverse. Multi-column might work, properly implemented, in
> situations where we can expect the content to appear on screen with no
> need for scrolling, or on paper. But the user needs both eye movement
> and scrolling, it's just disturbing and pointless, comparable to a
> reading a multi-column paper publication and, upon noticing after some
> confusion that the text does not continue at the start of the next
> column, flipping to the next page, reading a column there, then flipping
> back and moving to the next column of the previous page. Even the
> "Continued on page 42" references are better, since they are at least
> explicit and clear.

Apply Zooming to the blog and note the change of number of columns as
you increase or decrease text size. Instead of using a column-count of a
fixed number of columns, the default of auto is used. The depth of
columns also will change. The spec does not have a column depth, nor a
vertical section gutter property/capability. It seems to me that the
capability of a fixed column depth and fit-to-viewport-column-depth
should be provided, but are missing.

--
Gus

From: Gus Richter on 18 Apr 2010 10:11
On 4/18/2010 3:19 AM, A. Deguza wrote:
> On Apr 17, 7:22 pm, Gus Richter<gusrich...(a)netscape.net> wrote:
>
>>
>> Here is a live example:
>> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>
>>
>> --
>> Gus
>
> I Looked at the examples at http://www.w3.org/TR/css3-multicol/#introduction.
> Then put Example IX in a text file and saved it as html.
>
> Looked at it with Chrome and Firefox. No columns.
>
> What am I missing?

The W3C example uses proposed specification properties. The browsers do
not at this time support those properties. What Chrome and Firefox
support at this time are their own proprietary properties with their own
prefixes to the proposed specification properties. Once the
specification is a Recommendation and the browser manufacturer feels to
be sufficiently compliant, will then add support in the browser for the
W3C properties (without the prefix).

--
Gus

From: A. Deguza on 18 Apr 2010 16:54
On Apr 18, 7:11 am, Gus Richter <gusrich...(a)netscape.net> wrote:
> On 4/18/2010 3:19 AM, A. Deguza wrote:
>
> > On Apr 17, 7:22 pm, Gus Richter<gusrich...(a)netscape.net>  wrote:
>
> >> Here is a live example:
> >> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>
>
> >> --
> >> Gus
>
> > I Looked at the examples athttp://www.w3.org/TR/css3-multicol/#introduction.
> > Then put Example IX in a text file and saved it as html.
>
> > Looked at it with Chrome and Firefox. No columns.
>
> > What am I missing?
>
> The W3C example uses proposed specification properties. The browsers do
> not at this time support those properties. What Chrome and Firefox
> support at this time are their own proprietary properties with their own
> prefixes to the proposed specification properties. Once the
> specification is a Recommendation and the browser manufacturer feels to
> be sufficiently compliant, will then add support in the browser for the
> W3C properties (without the prefix).
>
> --
> Gus

So how does the W3C site manage to serve that page with multiple
columns? Do they also use the Chrome and Firefox proprietary code to
illustrate what they are proposing?

Arturo
From: Gus Richter on 18 Apr 2010 17:57
On 4/18/2010 4:54 PM, A. Deguza wrote:
> On Apr 18, 7:11 am, Gus Richter<gusrich...(a)netscape.net> wrote:
>> On 4/18/2010 3:19 AM, A. Deguza wrote:
>>
>>> On Apr 17, 7:22 pm, Gus Richter<gusrich...(a)netscape.net> wrote:
>>
>>>> Here is a live example:
>>>> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>
>>
>>>> --
>>>> Gus
>>
>>> I Looked at the examples athttp://www.w3.org/TR/css3-multicol/#introduction.
>>> Then put Example IX in a text file and saved it as html.
>>
>>> Looked at it with Chrome and Firefox. No columns.
>>
>>> What am I missing?
>>
>> The W3C example uses proposed specification properties. The browsers do
>> not at this time support those properties. What Chrome and Firefox
>> support at this time are their own proprietary properties with their own
>> prefixes to the proposed specification properties. Once the
>> specification is a Recommendation and the browser manufacturer feels to
>> be sufficiently compliant, will then add support in the browser for the
>> W3C properties (without the prefix).
>>
>> --
>> Gus
>
> So how does the W3C site manage to serve that page with multiple
> columns? Do they also use the Chrome and Firefox proprietary code to
> illustrate what they are proposing?

They fudge it as a simulation of how the markup should be and how the
rendition should be. Look at the source.

--
Gus

First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: Absolute Question
Next: Centered content with changing background color