The multicol tag reborn

J

Jukka K. Korpela

Everyone knows that <multicol> was a great invention by Netscape but
rejected by his enemies, later after his death abandoned by his
unthankful grandson Firefox. The <multicol> tag allows you to format
text in two or more columns in newspaper style (text flow goes from the
bottom of a column to the start of the next column) very conveniently.
For example:

<multicol cols=3>
this will be in three columns
</multicol>
<hr>
<multicol cols=2>
this will be in two columns
</multicol>

Would you believe that you can make this work on current mainstream
browsers (not IE 9 - you have to wait until IE 10) in a simple manner,
without modifying this markup at all, and without playing any JavaScript
tricks?
 
N

Neil Gould

Jukka said:
Everyone knows that <multicol> was a great invention by Netscape but
rejected by his enemies, later after his death abandoned by his
unthankful grandson Firefox. The <multicol> tag allows you to format
text in two or more columns in newspaper style (text flow goes from
the bottom of a column to the start of the next column) very
conveniently. For example:

<multicol cols=3>
this will be in three columns
</multicol>
<hr>
<multicol cols=2>
this will be in two columns
</multicol>

Would you believe that you can make this work on current mainstream
browsers (not IE 9 - you have to wait until IE 10) in a simple manner,
without modifying this markup at all, and without playing any
JavaScript tricks?
It would be very handy to have such a feature available, so I don't know why
it wasn't included in HTML standards. However, being functional on a
minority of the "current mainstream browsers" in actual use is of little
value.
 
G

Gus Richter

It would be very handy to have such a feature available, so I don't know why
it wasn't included in HTML standards. However, being functional on a
minority of the "current mainstream browsers" in actual use is of little
value.

<multicol> was a Netscape 4 proprietary element with buggy support by
NS4 only.

It has been reincarnated in CSS3 as "CSS Multi-column Layout Module":
<http://www.w3.org/TR/css3-multicol/>
which is a W3C Candidate Recommendation.
Support as indicated here:
<http://caniuse.com/#search=multicol>
 
D

dorayme

Jukka K. Korpela said:
<multicol cols=3>
this will be in three columns
</multicol>
<hr>
<multicol cols=2>
this will be in two columns
</multicol>

Would you believe that you can make this work on current mainstream
browsers (not IE 9 - you have to wait until IE 10) in a simple manner,
without modifying this markup at all, and without playing any JavaScript
tricks?

mmm... which browsers? And how simple?
 
J

Jukka K. Korpela

mmm... which browsers? And how simple?

Firefox 9, Chrome 18, Safari 5.1, Opera 11, Android 2.3... and probably
many older versions as well.

Simple, but slightly awkward.
 
J

Jukka K. Korpela

<multicol> was a Netscape 4 proprietary element with buggy support by
NS4 only.

Yes, that's one way of putting it.
It has been reincarnated in CSS3 as "CSS Multi-column Layout Module":
<http://www.w3.org/TR/css3-multicol/>
which is a W3C Candidate Recommendation.
Support as indicated here:
<http://caniuse.com/#search=multicol>

Yes, and that gives us a way use <multicol> again.

<style>
multicol[cols='2'] { column-count: 2; -moz-column-count: 2;
-webkit-column-count: 2; display: block }
multicol[cols='3'] { column-count: 3; -moz-column-count: 3;
-webkit-column-count: 3; display: block }
</style>

A bit clumsy, and you may need to add more rules if you wish to get more
columns, but then you can just use

<multicol cols=2>
Text to be shown in two columns.
</multicol>
 
G

Gus Richter

<multicol cols=2>
Text to be shown in two columns.
</multicol>


I don't understand why you wish/insist to use the <multicol> element?

Multi-column layout in CSS style sheets can declare that the content of
an element is to be laid out in multiple columns.
A multi-column element (or multicol element for short) is an element
whose ‘column-width’ or ‘column-count’ property is not ‘auto’ (default)
and therefore acts as a container for multi-column layout.
In the example below, column-count is not used to set the number of
columns. In this example, the number of columns of the multicol element
(the div classed as "columns") will be determined by the (available) div
width and specified column width.


<style>
..columns {display:block;
column-width: 10em; /* multicol supporting browsers e.g.
Opera (not quite) */
column-gap: 3em;
column-rule: medium solid;
-moz-column-width: 10em; /* Mozilla eperimental e.g. Gecko
(FF, SM, etc.) */
-moz-column-gap: 3em;
-moz-column-rule: medium solid;
-webkit-column-width: 10em; /* Webkit experimental e.g. Safari,
Chrome */
-webkit-column-gap: 3em;
-webkit-column-rule: medium solid;
}
</style>

<h1>H. Rackham's 1914 translation of Lorem Ipsum</h1>
<div class="columns">
<p>[32] But I must explain to you how all this mistaken idea of
denouncing pleasure and praising pain was born and I will give you a
complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness. No
one rejects, dislikes, or avoids pleasure itself, because it is
pleasure, but because those who do not know how to pursue pleasure
rationally encounter consequences that are extremely painful. Nor again
is there anyone who loves or pursues or desires to obtain pain of
itself, because it is pain, but occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any right
to find fault with a man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that produces no
resultant pleasure?</p>
<p>[33] On the other hand, we denounce with righteous indignation and
dislike men who are so beguiled and demoralized by the charms of
pleasure of the moment, so blinded by desire, that they cannot foresee
the pain and trouble that are bound to ensue; and equal blame belongs to
those who fail in their duty through weakness of will, which is the same
as saying through shrinking from toil and pain. These cases are
perfectly simple and easy to distinguish. In a free hour, when our power
of choice is untrammelled and when nothing prevents our being able to do
what we like best, every pleasure is to be welcomed and every pain
avoided. But in certain circumstances and owing to the claims of duty or
the obligations of business it will frequently occur that pleasures have
to be repudiated and annoyances accepted. The wise man therefore always
holds in these matters to this principle of selection: he rejects
pleasures to secure other greater pleasures, or else he endures pains to
avoid worse pains.</p>
</div>
 
G

Gus Richter

<style>
.columns {display:block;
^^^^^^^^^^^^^^


Excuse the error, but in trying a few things to make Opera work the same
as the others, I accidentally left display:block; - it should be removed.
 
G

Gus Richter

<style>
.columns {display:block;
column-width: 10em; /* multicol supporting browsers e.g. Opera (not
quite) */


As I said before "remove display:block;

Additionally my most recent release version of 11.61 for Opera would not
reflow the columns as the other browsers when the window/viewport was
changed.

Looking into it further, I found that by adding

column-fill:balance; /*which is the initial value*/

Opera rendered the same as the other browsers, as it did when I used

column-fill:auto;

Now when I remove column-fill from my style sheet, it also renders the
same. Some switch must be set internally and then locked in. My opinion
is therefore to include column-fill in either flavors as desired and
Opera will render the same as all others right away.
 
D

dorayme

Gus Richter said:
Additionally my most recent release version of 11.61 for Opera would not
reflow the columns as the other browsers when the window/viewport was
changed.

My Opera 11.61 on a Mac had no trouble.
 
G

Gus Richter

My Opera 11.61 on a Mac had no trouble.


I tried repeatedly to redisplay the example anew and had repeated
problems - the columns remained fixed and would not change when viewport
was reduced ....... until I used column-fill as I described ...... and
it then worked ok every time even w/o column-fill.

Anyway, including column-fill:balance; simply reafirms the initial
value and won't hurt any browser. (Even if it was only a quirk in my
Opera on my machine.)
 
B

BootNic

On 3/4/2012 5:53 PM, Gus Richter wrote:
[snip]

Excuse the error, but in trying a few things to make Opera work
the same as the others, I accidentally left display:block; - it
should be removed.

What is Opera doing or not doing that the other are or are not?


--
BootNic Sun Mar 4, 2012 08:54 pm
"They may forget what you said, but they will never forget how you made them
feel."
*Carl W. Buechner*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAk9UHPEACgkQOcdbyBqMFBEmdACfVEdhEcqto0mbhk26S3uvXYfj
SRIAn1JrOnAq+CrtGR/+rzLxiEn3AHH2
=yl23
-----END PGP SIGNATURE-----
 
G

Gus Richter

On 3/4/2012 5:53 PM, Gus Richter wrote:
[snip]

Excuse the error, but in trying a few things to make Opera work
the same as the others, I accidentally left display:block; - it
should be removed.

What is Opera doing or not doing that the other are or are not?


Varying the viewport size should change the number of columns.
 
J

Jukka K. Korpela

I don't understand why you wish/insist to use the <multicol> element?

Because we can! :)
Multi-column layout in CSS style sheets can declare that the content of
an element is to be laid out in multiple columns.

Yes, and you need several browser-specific properties. The <multicol>
tag nicely hides this.

Of course you _can_ use <div class="multicol">...</div> instead, but
it's not as cool as using the good old Netscapism.
 
G

Gus Richter

Because we can! :)

Wow! *Shakes head and walks away*
Yes, and you need several browser-specific properties. The <multicol>
tag nicely hides this.

Until moz and webkit support the properties as per the spec and then
experimental prefixes will no longer be necessary.
Of course you _can_ use <div class="multicol">...</div> instead, but
it's not as cool as using the good old Netscapism.

Wow again! *Shudders and runs away*
 
D

dorayme

Gus Richter said:
Wow! *Shakes head and walks away*


Until moz and webkit support the properties as per the spec and then
experimental prefixes will no longer be necessary.


Wow again! *Shudders and runs away*

One idea of the benefit is that *potentially* the multicol element is
smart and semantic, and surely, compared with that dumb taxi, the DIV,
has a cool flavour.
 
G

Gus Richter

One idea of the benefit is that *potentially* the multicol element is
smart and semantic, and surely, compared with that dumb taxi, the DIV,
has a cool flavour.


I suspect that you mean the html <multicol> element (describing it as
smart, semantic and having a cool flavour) and comparing it to the html
<DIV> element (describing it as a dumb taxi) [for being a CSS morphed
multicol element].

I do not think that it is cool to suggest any potential benefit for any
nonexisting html <multicol> element. There are other instances, although
interesting to take note of as curiosities, where browser support is
included in order to not break legacy web pages. That does not mean that
one should use them even though they may work.

The DIV is only an example of a multicol element, to wit:
"There is no specific markup element for multiple columns, CSS is used
to modify a given element and turn it into a multicol element, which
occurs automatically when certain column styles are set on an element.
Exceptions: A table element, any replaced block-level element, or
inline-block elements cannot be made into a multicol element."
 
D

dorayme

Gus Richter said:
One idea of the benefit is that *potentially* the multicol element is
smart and semantic, and surely, compared with that dumb taxi, the DIV,
has a cool flavour.

I suspect that you mean the html <multicol> element (describing it as
smart, semantic and having a cool flavour) and comparing it to the html
<DIV> element (describing it as a dumb taxi) [for being a CSS morphed
multicol element].

You are a detective, Gus! You interested in joining me in applying for
jobs in the Homicide Unit of the Baltimore Police? We would work with
John Munch, Meldrick Lewis, Al Giardello, Tim Bayliss, Frank
Pembleton, Kay Howard, Mike Kellerman, Stuart Gharty, Paul Falsone,
Terri Stivers, Megan Russert, Beau Felton, Stanley 'Big Man' Bolander.
Now that I guarantee would be cool.
I do not think that it is cool to suggest any potential benefit for any
nonexisting html <multicol> element.

No one is suggesting that it is cool to suggest anything.
There are other instances, although
interesting to take note of as curiosities, where browser support is
included in order to not break legacy web pages. That does not mean that
one should use them even though they may work.

You are quite right, it does not mean this. But if someone does use it
and it does not cause any harm, if it degrades fine, it is not clear
that one should not use it, depends on the importance of the need. If
the need is not crucial, if the mood is light and one is wearing cool
shades, well... why not be a devil now and then?

The DIV is only an example of a multicol element, to wit:
"There is no specific markup element for multiple columns, CSS is used
to modify a given element and turn it into a multicol element, which
occurs automatically when certain column styles are set on an element.
Exceptions: A table element, any replaced block-level element, or
inline-block elements cannot be made into a multicol element."

The DIV is not an example of a multicol element, there are no kosher
examples. This is what needs to be understood to understand the
temperature of the cool of the Netscape element.
 
G

Gus Richter

Gus Richter said:
One idea of the benefit is that *potentially* the multicol element is
smart and semantic, and surely, compared with that dumb taxi, the DIV,
has a cool flavour.

I suspect that you mean the html<multicol> element (describing it as
smart, semantic and having a cool flavour) and comparing it to the html
<DIV> element (describing it as a dumb taxi) [for being a CSS morphed
multicol element].

You are a detective, Gus! You interested in joining me in applying for
jobs in the Homicide Unit of the Baltimore Police? We would work with
John Munch, Meldrick Lewis, Al Giardello, Tim Bayliss, Frank
Pembleton, Kay Howard, Mike Kellerman, Stuart Gharty, Paul Falsone,
Terri Stivers, Megan Russert, Beau Felton, Stanley 'Big Man' Bolander.
Now that I guarantee would be cool.

Clear some of this nonsense from your memory banks to make room for the
multicol element as described in the specifications and as I have
outlined in this thread, with an example. All the meat is in this
thread. Don't add further nonsense to your memory banks such as the html
No one is suggesting that it is cool to suggest anything.

I suggest that your are indeed suggesting it after having chewed on your
ill composed sentence (probably in a hurry to watch your Hawaii 5-0 or
whatever) at the top of this article.
You are quite right, it does not mean this. But if someone does use it
and it does not cause any harm, if it degrades fine, it is not clear
that one should not use it, depends on the importance of the need. If
the need is not crucial, if the mood is light and one is wearing cool
shades, well... why not be a devil now and then?

You are promoting garbage instead of a supported and de facto
recommended method. Shame on you for turning to the dark side.
The DIV is not an example of a multicol element, there are no kosher
examples. This is what needs to be understood to understand the
temperature of the cool of the Netscape element.

The div *is* an example of a multicol element in my example of the
multicol element! What you don't understand is what I quoted above! In
my example I used a div (automatically morphed into a multicol element
when certain column styles are set on the div) although I could have
used another element instead. You need to understand the multicol
element, so I suggest that you get up to par on the subject by reading:
"CSS Multi-column Layout Module": <http://www.w3.org/TR/css3-multicol/>
That is what is needed to understand and only that is what is cool.
 
D

dorayme

Gus Richter said:
....

I suggest that your are indeed suggesting it

....

You are promoting garbage instead of a supported and de facto
recommended method. Shame on you for turning to the dark side.

I am not recommending that anyone use it and I feel no shame for
trying and failing to indicate to you a certain playfulness that I
detect in JK's pointing out that it works in some modern browsers and
that it is cool.
The div *is* an example of a multicol element

You and others, including the writers of some CSS webpages like

<http://www.w3.org/TR/css3-multicol/>,

are welcome to talk this way. Seems a loose sense to me. A DIV, in
this loose sense, is an example of a floated element, as is a LI
element, as are many elements. The DIV is just a container element and
can be styled in many different ways.

If you or others want to want to say an element is *modified* whenever
it is styled, that is fine by me, but I prefer to think of elements as
having default browser styles that can be overidden and added to by
authors and that they have a measure of independence from styling
(especially author styling). I see the *multicol css* as being css, as
styling and to do with properties and values, perhaps more at home for
the CSS usenet group than the authoring ones.

In

<http://dev.w3.org/html5/html4-differences/#new-elements>

I see no new element in '3.1 New Elements' called <multicol> and if I
did see it, I would happily talk like you about a multicol element but
then it would be towards a real dedicated and semantic element.

Perhaps there is an argument that we are witnessing something halfway
between elementalism and styling and that I guess is interesting.
Perhaps someone knows if a modern multicol *element* was ever
considered for HTML 5?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top