A way to create 2 columns within a single tiddler?

1

A lot of the tiddlers i create basically amount to long lists with many headers followed by single-word or single-sentence bullet-lists. I’m using TW for writing and world building so its stuff like character profiles, tables-of-contents, and organizational hierarchy lists.

When viewing these on a large monitor, i can’t help but feel that a huge portion of my screen-space is wasted, as i’m really just looking at a small amount of the tiddler that runs down the left side, if that makes sense?

As i see it there are 2 main ways this could be tackled and they are all far beyond my capabilities:

  1. A tiddler-type or field that “folds” a tiddler once it reaches a set height, OR simply folds any tiddler in half, even if short. This maximizes simplicity but might result in poor formatting at times.

  2. A macro that inserts a “fold” into a tiddler. This maximizes flexibility in formatting, where the more automatic solution might cut off an entry at an undesirable point, this solution would allow you to choose an ideal point to fold at.

These solutions could be enhanced with a few other considerations in mind (though i think they suit option 2 better, and so I favor option 2):

  1. The ability to set a start and end for the folds, so that wider parts of the content could remain unfolded, while thinner parts of the content could be folded.

  2. The ability to set an amount of folds, so that especially thin/long sections can be folded 3 or more times

Thanks for taking a look, I’d be very interested if a solution already exists, or if someone who would also benefit might like to implement one.

2

Section editor would be useful in this scenario. Take a look at this

3

This is an interesting solution to other problems, and it does hypothetically help the same situation, but I’d really like the ability to have vertical columns so I can keep the entire character profile in view on one screen.

4

https://kookma.github.io/TW-Shiraz/#demo%2Ftiddler-in-multi-columns

How about this ?

5

In addition to Mohammad’s link, see

  • Columns - lets you present content inside a tiddler split up into columns. The content flows to equal out the colums heights and the view is responsive to tiddler width e.g as affected by device width.
  • Columns within a tiddler CSS and documentation on how to do this.
6

Oh awesome! These look like 2 variations on pretty much exactly what i was hoping for! I knew someone had to have had the same idea before, its a pretty common way to format text.

Thanks a ton!

7

Shiraz has this feature! Look at
https://kookma.github.io/TW-Shiraz/#Tutorial%20Multicolumn:[[Tutorial%20Multicolumn]]

I think @arunnbabu81 also has developed a viewtoolbar button for Shiraz to switch between on/two/three and four columns layout.

8

Here is that code shared by @Brian_Radspinner

9

I’m always stunned just how many solutions are available in tiddlywiki, often for slight variations on the same problem. And beyond that, you can show up with a question and so many helpful people show up right away!

Thanks!

10

The answers so far are about setting column-count. You can also fix the column-width to a fixed amount and let that dictate the number of columns that show:

@@column-width:15em;

Your content

@@

or any other way you apply block-level CSS

11

Small nudge (in case novice tries and isn’t sure why): You would need a semi-colon at the end of the css declaration:

@@column-width:15em;

Thanks for the tip, @Scott_Sauyet — I didn’t know this one!

12

Oops, yes, thanks. Updated.

13

This novice needed that XD, thanks!

14

I’m also a novice without computing skills but the following solutions works for me. For two columns inside a tiddler I use flexbox/flexgrid:

Create a tiddler and add this tag; $:/tags/Stylesheet
In the content of this tiddler add the following:

.row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
margin-top: 0em;
/*   margin-right: -15px;
   margin-left: -15px;*/
}

.col,
.col-c {
  width: 100%;
  position: relative;
  padding-right: 2px;
  padding-left: 2px;
padding-top: 12px;
}

@media (min-width: 780px) {
.col {flex: 1 1 0; max-width: 100%;}
.col-c {flex: 1 1 0; max-width: 100%;padding-left: 0px;padding-right: 16px;}
}

.col   > :first-child,
.col-c   > :first-child {
  margin-top: 0;}

Now create another tiddler and add this content:


<!----><div class="row"><div class="col-c">

!!!Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<!---- ----></div><div class="col-c">

!!!Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<!------------></div>
</div>

EDIT: code-block formatting added by Springer

15

Interesting! I’ve already implemented buttons for a few of the other solutions, but this one does allow me to assign where the columns being and end, so i may well come back to it if i find that I’m really missing that functionality

17

I’m guessing that this is just due to a formatting issue here in the forum. I think something like this is what was intended:

<div class="row">
<div class="col">

!!!Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="col">

!!!Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>

(or an equivalent non-HTML version.)

TwoCol.json (1.5 KB)

@pedruchini:
To format like the above just wrap your lines of code between two lines of three backticks:

```

<!-- your code here -->

```

You can also add types such as “css”, “html”, “js”, “python”, etc, like this:

```css
div {background: green;}
```

which would show like this:

div {background: green;}

More detail is at Posting code or preformatted text - Using Discourse - Discourse Meta.

18

Right. I’ve edited the post by pedruchini to show the code blocks. :slight_smile:

19

Thank you for the code-block formatting.

20

For more information an more variants (for example columns with different width), see Mohammad’s [Shiraz 2.9.7 — create stylish contents in Tiddlywiki]