How to display a tiddler in multi-columns style ?

[julien23]

Some of my tiddlers are just large, large ... so large lists
(ForEachTiddlerPlugin) moreover aimed to be printed

Is there a way to display a tiddler in multi-columns style ?

do it for the trees :-)

[julien23]

translated from tthe french forum :

<<
to do something in the genre, a trick I use css:
I create classes that correspond to the number of columns in the
tiddler style:
. Col2 (width: 50%; float: left)
. Col3 (width: 33%; float: left)
....
. clear (clear: both)
Then, in the tiddlers concerned, I put my content into columns:
Col2 (((text column 1))) (((text Col2 column 2)))
or
Col3 (((text in column 1))) (((Col3 text in column 2))) (((Col3 text
in column 3)))

It is better not forget to add after
(((clear)))

The solution is not perfect because it requires paging itself: it does
not itself the distribution in columns with the number of item. And
this may cause you problems in the use of forEachTiddler ...
That said, perhaps with a modern browser there are ways useful CSS3
property (such as described here: http://www.css3.info/preview/multi-column-layout/)
I n I never tried. You tell us ;-)

Sylvain >>

[Måns]

Hi Julien

Check out Erics http://www.TiddlyTools.com/#SetTiddlerColumns

Regards Måns Mårtensson

[julien23]

Thank you for your answer

SetTiddlerColumns displays the whole layout in several columns.

I'd like to display the content of a tiddler in several columns... I
mean inside tiddlers...

I could use also {{invisibletable{| | |}}} but same as syvain's tip,
it does not distribute itself the number of item in columns...


On Nov 7, 12:22 pm, Måns <humam...@gmail.com> wrote:
> Hi Julien
>
> Check out Ericshttp://www.TiddlyTools.com/#SetTiddlerColumns

[julien23]

http://twhelp.tiddlyspot.com/#[[Multiple%20Columns%20in%20TW]]

[Måns]

Hi Julien

Check out Makieas TWs here http://www.makiaea.org/
http://www.makiaea.org/maki.html

If you insert text in a tiddler it is automatically split into two
columns.
If you tag a tiddler with "singlecolumn" - it's rendered as a single
column.


Regards Måns Mårtensson

[Tobias Beer]

Hi Måns,

Would you as well know how it actually works? That would be
interesting to know.
Is this just some proprietary firefox... -moz-column-width? Too bad.



Tobias.

[Eric Shulman]

> Would you as well know how it actually works? That would be
> interesting to know.
> Is this just some proprietary firefox... -moz-column-width? Too bad.

http://www.TiddlyTools.com/#StyleSheetShortcuts

look for definitions of
.twocolumns {...}
.threecolumns {...}
.fourcolumns {...}

Usage in tiddler content:

{{threecolumns{
... content goes here ...
}}}

Note that this CSS uses -moz-column-count and other '-moz' specific
attributes, so it doesn't work for all browsers.

-e

[Måns]

Hi

I found this in the StyleSheet:
.viewer {-moz-column-width:30em; -webkit-column-width:30em; -moz-
column-gap:2em; -webkit-column-gap:2em; padding-top: 0em;}
div[tags~="singlecolumn"] .viewer, div[tags~="systemConfig"] .viewer,
div[tags~="recipe"] .viewer, div[tags~="slow recipe"] .viewer, div
[tags~="lyrics"] .viewer {-moz-column-count:1; -webkit-column-count:1;
column-count:1; padding-top:0em;}

And - to my surprise it worked well in Google Chrome (maybe it's the -
webkit-column-gap: )

It doesn't work in IE..

regards Måns Mårtensson

[Tobias Beer]

Can anyone explain the origins, application, how-to's of this syntax?

div[tags~="someTag"] {style:property;}


Tobias.

[PMario]

Hello Tobias,

If a Tiddler ist tagged with eg: "firstChar" the style properties are
applied to this tiddler. Put the following code into your StyleSheet.
Make a newTiddler. Tag it "firstChar" and Enter 3 lines of text .
Details see. [1]

div[tags~="firstChar"].tiddler
.viewer:first-letter {
float: left;
font-size: 300%;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: red;
padding: 3px 3px 0px 3px;
}

div[tags~="firstChar"].tiddler
.viewer:first-line {
background-color: #999999;

}

I like it :)

regards Mario
[1] http://www.tiddlywiki.com/#AnotherExampleStyleSheet

[Amzg]

I noted a reference to "TW help" above, but I think this particular
link is more relevant;

http://twhelp.tiddlyspot.com/#FormattingTiddlers
(tab named TwoColumns)

[Måns]

Wow Mario
> I like it :)
Me too

> [1]http://www.tiddlywiki.com/#AnotherExampleStyleSheet
Great ressource
I've just put:
div[tags~="paper"].tiddler .viewer {
background-image:url('[[crumpled.jpg]]');

into the StyleSheet of a TW with an attached image: crumpled.jpg.

Now I just have to tag a tiddler with "paper" to get a background with
crumpled paper..
Very simple and effective..

Thanks for sharing

Regards Måns Mårtensson

[Måns]

A little extra to make the image background behave reasonably well:

div[tags~="paper"].tiddler .viewer {

border:0px solid #dd8;
padding-left:2.0em;
padding-top:1.0em;
padding-bottom:0.5em;
background-image:url('[[crumpled.jpg]]');
background-repeat:repeat-x repeat-y;
background-attachment:scroll;
background-position:0px;
font-family:"Marker Felt", "Comic Sans MS", "Comic Sans", Sans;
font-size:16px;
line-height:20px;
}

Regards Måns Mårtensson

[PMario]

Hi, Måns
Nice :)

On 25 Nov., 00:11, Måns <humam...@gmail.com> wrote:
> A little extra to make the image background behave reasonably well:
> div[tags~="paper"].tiddler .viewer {

div[tags~="paper"].tiddler {

> background-image:url('[[crumpled.jpg]]');
background-image:url('http://i281.photobucket.com/albums/kk208/
ivanlorenzana/rough-1.jpg');

Try this :)
Mario

[Tobias Beer]

Please note that this doesn't seem to work in ie6. But, I don't know
if that's a missing compatibility feature in the tw code or simply
can't be done in ie6.

Tobias.

[PMario]

Sylvain
I have discovered a simple way, which (i think) was not mentioned
yet.

enter the following CSS into your StyleSheet

/*{{{*/
/*
Malo - CSS Library
Author:Vladimir Carrer
*/

/* CSS Grid */
/* dp = div percent */

.dp20,
.dp25,
.dp33,
.dp50,
.dp100{float:left; display: inline, *margin-left:-0.04em; } /* IE
margin hack */

/*
.dp20{width:20%;}
.dp25{width:25%;}
.dp33{width:33.33%;}
.dp50{width:50%;}
.dp100{width:100%;} */ /* original CSS. no margin possible */

.dp20{width:18%;}
.dp25{width:23%;}
.dp33{width:31.33%;}
.dp50{width:48%;}
.dp100{width:100%;} /* changed it a little bit */

.clear{ clear:both;}

/* top border */
.dp100,.dp50,.dp33,.dp25{ border-top:1px solid #111;}
.dp100,.dp50,.dp33,.dp25{ padding-right: 1%; margin-right:1%;}

/*}}}*/

generate a new tiddler and type:

<<tiddler "tiddler name" "dp50">> <<tiddler "an other tiddler name"
"dp50">>
and view the result. You will need 2 additional tiddlers "tiddler
name" and ...

The original css can be found at [1]

If you work with MPTW [2] as a basis TW file you have to enter the
following code
<div class='tagClear'></div>
as the last line into your "View Template" section in the Theme.
Otherwise it will not work properly

also see dp33 and dp25 have fun. also tested with IE

regards Mario

[1] http://code.google.com/p/malo/
[2] http://mptw.tiddlyspot.com