empty.html should start with "fluid-fixed" layout

232 views
Skip to first unread message

PMario

unread,
Feb 12, 2021, 12:08:16 PM2/12/21
to TiddlyWiki
Hi folks,

I did just create a PR, that sets the default layout of empty.html to: fluid-fixed


Please vote +1 if you think it should be merged!

have fun!
mario

coda coder

unread,
Feb 12, 2021, 12:29:52 PM2/12/21
to TiddlyWiki
Hi Mario, can you please explain, why? And If one disagrees, how does one express dissent?

p.s. your "backlink" on github is broken.

TiddlyTweeter

unread,
Feb 13, 2021, 4:44:11 AM2/13/21
to TiddlyWiki
coda coder wrote:
... And If one disagrees, how does one express dissent?

The GitHub has "downvote" for that  :-).

So far it has 8 "upvotes", which is significant enough to get attention there.

My sense is that PMario's PR is, basically, a good idea.

TT, x

 

Soren Bjornstad

unread,
Feb 13, 2021, 12:37:35 PM2/13/21
to TiddlyWiki
Maybe this is a good thread to piggyback on, as I've been having trouble with the fixed-fluid and fluid-fixed dichotomy lately. I have a different proposal. I don't have enough experience with either CSS or TiddlyWiki internals to know how difficult it would be to implement, but it doesn't seem crazy complicated to me.

Here's the fundamental problem I see with the existing layout: there is a range of widths that are desirable for the story river. Up until a point, it should be as wide as possible while leaving enough room for the sidebar because you can fit more content on the screen that way. But eventually, making the story river wider makes it harder to read because the lines get unpleasantly long (see for example here on readable line widths). I think the desirable point for TW, at least for me, is often substantially wider than for, e.g., a novel, since there's also the side-by-side preview to consider, as well as tables, images, etc. Nevertheless, there's definitely a point where additional width makes the wiki less usable.

The fluid-fixed mode is thus problematic because the story river will continue growing without bound as your monitor size increases, to the point where lines are unreadably long. It would be better to leave extra space to the right of the sidebar on large monitors. Fixed-fluid mode solves this problem, but if you set the story river width to a value that leaves enough space for the sidebar on a small monitor, the story river will be exactly the same size on a large monitor, wasting a ton of space, while if you set it to a value that looks good on a large monitor, the sidebar will be permanently exiled to the top of the screen on a small monitor. Essentially, whichever mode you choose, your wiki will look bad on a monitor of a significantly different size.

I think a new mode should be offered, perhaps entirely replacing the existing modes and certainly becoming the default, which has two width breakpoints rather than the existing one:
  • Zone 1, used when viewport width is below minimum side-by-side width:
    • Sidebar above content; both sidebar and content take up full viewport width (as presently).
  • Zone 2, used when viewport width is above minimum side-by-side width but below maximum story river width + fixed sidebar width:
    • Sidebar to right of content; sidebar consumes a configurable fixed width, and story river consumes all remaining available space (as in fluid-fixed presently).
  • Zone 3, used when viewport width exceeds maximum story river width + fixed sidebar width:
    • Sidebar to right of content; story river consumes a configurable maximum width, and sidebar consumes all remaining available space (as in fixed-fluid presently).
This would allow each wiki to select sidebar and story river widths that make sense for their content, while retaining a sane display on all screens.

Odin

unread,
Feb 13, 2021, 1:48:07 PM2/13/21
to TiddlyWiki
The fluid-fixed mode is thus problematic because the story river will continue growing without bound as your monitor size increases, to the point where lines are unreadably long.

I often add the following CSS to my wikis because of this problem. It makes the tiddler centre within the story river and adds a max-width to tiddlers that is more pleasant to read.

div.tc-tiddler-frame { margin-left: auto; margin-right: auto; max-width: 1000px; }

Op zaterdag 13 februari 2021 om 18:37:35 UTC+1 schreef Soren Bjornstad:

Jeremy Ruston

unread,
Feb 13, 2021, 2:09:19 PM2/13/21
to TiddlyWiki Group
Hi Soren,

That sounds like exactly the right solution, I like it.

Best wishes

Jeremy

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/aa99b74d-fa46-47dc-b351-321c469011cdn%40googlegroups.com.

si

unread,
Feb 14, 2021, 9:09:23 AM2/14/21
to TiddlyWiki
@Soren @Jeremy I often zoom out when using TW in the browser so I also experience the problem Soren describes. I just wanted to add my vote to his alternative proposal.

Mohammad Rahmani

unread,
Feb 14, 2021, 9:22:12 AM2/14/21
to tiddl...@googlegroups.com



Best wishes
Mohammad


On Sun, Feb 14, 2021 at 5:39 PM si <matthew...@gmail.com> wrote:
@Soren @Jeremy I often zoom out when using TW in the browser so I also experience the problem Soren describes. I just wanted to add my vote to his alternative proposal.

Hi Si,
 Is this related to text or other objects? Do you like to have a pair of buttons to increase/decrease/reset the font size?
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

si

unread,
Feb 14, 2021, 9:28:23 AM2/14/21
to TiddlyWiki
@Mohammad - No I mean literally just using the zoom in the browser (i.e. "ctrl + -"). I use it when I just need to fit more content on the screen. But if you zoom-out to say 70-80%, with fluid-fixed the sidebar becomes too small for my use, and with fixed-fluid it takes up most of the screen (at least on my monitor).

Mohammad Rahmani

unread,
Feb 14, 2021, 9:32:51 AM2/14/21
to tiddl...@googlegroups.com



Best wishes
Mohammad


On Sun, Feb 14, 2021 at 5:58 PM si <matthew...@gmail.com> wrote:
@Mohammad - No I mean literally just using the zoom in the browser (i.e. "ctrl + -"). I use it when I just need to fit more content on the screen. But if you zoom-out to say 70-80%, with fluid-fixed the sidebar becomes too small for my use, and with fixed-fluid it takes up most of the screen (at least on my monitor).

Okay, I got it! Yes Soren proposal is the one you like!

Best wishes

PMario

unread,
May 18, 2021, 5:27:50 PM5/18/21
to TiddlyWiki
Hi Soren,

You are right. There should be a 3rd option. eg: Centred-Fixed ...
I'll create a PR, that will let us do the following things.

TLDR - Hello there - centred - 1000px tiddler width and 130% browser zoom
All parameters are still configurable from the Control Panel.

tw-06.gif


===========================================================================
More details:

This is how my browser looks with 100% zoom level and empty - default settings.

Fixed Story - Fluid Sidebar

tw-01.gif

Fluid Story - Fixed Sidebar

tw-02.gif

NEW - Centred Story - Fixed Sidebar
Also not ideal, because it only uses ~700px width

tw-03.gif

Better with 1000px - and 100% browser zoom. Tiddler width and Sidebar width can be adjusted by user
Elements, that don't make sense to be changed, are disabled.

tw-04.gif

I typically use 120% - 140% browser zoom, which IMO has good readability and uses some space.
This is 1000px tiddler width - no sidebar - 120% zoom level

tw-05.gif

What do you folks think?

The CSS changes are relatively straight forward and should be backwards compatible,
since no base values have been changed for the existing modes.

-mario

Soren Bjornstad

unread,
May 18, 2021, 6:53:25 PM5/18/21
to TiddlyWiki
Yep, this looks like about what I was imagining (and is similar to what I did manually in Grok TiddlyWiki).

TW Tones

unread,
May 18, 2021, 8:24:02 PM5/18/21
to TiddlyWiki
Folks,

I created the attached side bar width Page control button to help in this.

Also I have a book mark I click that installed a variety of settings on a Wiki. Fluid side bar is part of that.
I have not worked out if I can set the zoom level that way as well.

I would also think the ability to add content to a left sidebar with another would be nice, I am sure it needs very few bytes.

Tones

sideBar-width.json
Reply all
Reply to author
Forward
0 new messages