[TW5] How to correct fluid width in combination with Zoomin view

[Ton Gerner]

Hi all,

In my guide - about a top menu and toolbars [1] - I describe how to use 'fluid width' (with or without Sidebar) by using the following CSS.

1) Without Sidebar:

/* STORY RIVER & TIDDLER WIDTH = 100% */
.story-river {
     position: absolute;
     width: 100%;
}
.tw-tiddler-frame {
     width: 100%;
}

.sidebar-header {
     display: none;
}

2) With Sidebar:

/* TIDDLER WIDTH & WIDTH OF SIDEBAR */
/* the "width" of the sidebar (x) must be the same as the */
/* value subtracted from the story river width (100% - x) */
.story-river {
     position: absolute;
     width: calc(100% - 26em);
}
.tw-tiddler-frame {
     width: 100%;
}

.sidebar-header {
     float: right;
     width: 26em;
     left: auto;
     padding: 70px 0 0 0;
}

As such the fluid width works perfect in Classic view (Firefox v26, Chrome v31, Opera v18, and Internet Explorer v11).

But in Zoomin view the width of the tiddler becomes wider:

1) Without Sidebar: the width is more than 100% (browser screen width), but everything stays readable.
2) With Sidebar: the tiddler overlaps part of the Sidebar.

The increase in tiddler width in Zoomin view is dependent upon the browser.
Firefox v26: ca. ~100px, independent of the browser screen width.
Chrome v31, Opera v18 and IE v11: ~85px, independent of the browser screen width.

I have no idea how to correct this properly with CSS.

In Theme Tweaks there are Story width (default 770px) and Tiddler width (used for zoomin storyview and default 686px).
Is it a coincidence that 770 - 686 = 84px?

@Jeremy
Has it something to do with the Zoomin implementation?
In the past tiddlers had a 'variable width' in Zoomin view, dependent upon the content.

All can be seen in [1]:
1) Select a 'fluid' style (Sidebar tab Styles)
2) Click 'Toggle width/sidebar' button (triangle top right)
3) Click 'Toggle View' button (rectangle top right)

If somebody knows how to correct this Zoomin behavior properly, please tell me.

Thanks in advance.

Cheers,

Ton

[1] http://tw5toolbar.tiddlyspot.com/

[Jeremy Ruston]

@Jeremy
Has it something to do with the Zoomin implementation?
In the past tiddlers had a 'variable width' in Zoomin view, dependent upon the content.

The zoomin view sets the story container to position: relative, and then positions each tiddler position:absolute within it. That means that the tiddlers will no longer take their width from their container, which was why zoomin tiddlers used to size to their content.

A few months ago I changed things so that tiddlers have an explicit width:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/vanilla/base.tid#L448

Does that help?

Best wishes

Jeremy.

 

All can be seen in [1]:
1) Select a 'fluid' style (Sidebar tab Styles)
2) Click 'Toggle width/sidebar' button (triangle top right)
3) Click 'Toggle View' button (rectangle top right)

If somebody knows how to correct this Zoomin behavior properly, please tell me.

Thanks in advance.

Cheers,

Ton

[1] http://tw5toolbar.tiddlyspot.com/

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Ton Gerner]

Hi Jeremy,

On Wednesday, January 15, 2014 10:52:50 AM UTC+1, Jeremy Ruston wrote:

@Jeremy
Has it something to do with the Zoomin implementation?
In the past tiddlers had a 'variable width' in Zoomin view, dependent upon the content.

The zoomin view sets the story container to position: relative, and then positions each tiddler position:absolute within it. That means that the tiddlers will no longer take their width from their container, which was why zoomin tiddlers used to size to their content.

A few months ago I changed things so that tiddlers have an explicit width:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/vanilla/base.tid#L448

Does that help?

No, it doesn't.
I know you changed to a fixed with after Dave's complaining.

What I do not understand:
Why is there a 'separate' tiddler width for Zoomin view?
And why is that width 686px, while the story river width is 770px? (just about the difference of 85px in width I see in Chrome, Opera and IE (but not FF).

For me the difference in Classic and Zoomin view is that in Zoomin view only one tiddler is displayed. The rest - the way of displaying - ought to be the same (correct me if I am wrong).
I did have a look into the code of classic.js and zoom.js, see differences (although I don't understand the code):
Classic view does not use absolute position
In Zoomin view I see position absolute and transformOrigin: "50% 50%"

That looks in accordance with what you wrote:

The zoomin view sets the story container to position: relative, and then positions each tiddler position:absolute within it. That means that the tiddlers will no longer take their width from their container, which was why zoomin tiddlers used to size to their content.

But is that still relevant (with a fixed width in Zoomin view) at the moment?

Cheers,

Ton

[Jeremy Ruston]

I know you changed to a fixed with after Dave's complaining.

What I do not understand:
Why is there a 'separate' tiddler width for Zoomin view?

I think it's because for centralised view we need to be able to separately adjust the left and right sides, independently of the width.

 

And why is that width 686px, while the story river width is 770px? (just about the difference of 85px in width I see in Chrome, Opera and IE (but not FF).

I think 686px is the width of the tiddler itself. The story river has padding, hence it's wider at 770px.

 

For me the difference in Classic and Zoomin view is that in Zoomin view only one tiddler is displayed. The rest - the way of displaying - ought to be the same (correct me if I am wrong).

Sadly, that's not right. In Classic view the tiddlers flow in the story river in the usual way. In Zoomin view the tiddlers are position:absolute within the position:relative story river.

 

I did have a look into the code of classic.js and zoom.js, see differences (although I don't understand the code):
Classic view does not use absolute position 

In Zoomin view I see position absolute and transformOrigin: "50% 50%"

That's correct.

 

That looks in accordance with what you wrote:

The zoomin view sets the story container to position: relative, and then positions each tiddler position:absolute within it. That means that the tiddlers will no longer take their width from their container, which was why zoomin tiddlers used to size to their content.

But is that still relevant (with a fixed width in Zoomin view) at the moment?

I'm not sure what you're asking. The highlighted sentence is just saying that because absolute tiddlers don't take their width from the container we have to set the width explicitly.

Best wishes

Jeremy

[Ton Gerner]

Hi Jeremy,

On Wednesday, January 15, 2014 12:10:48 PM UTC+1, Jeremy Ruston wrote:

I know you changed to a fixed with after Dave's complaining.

What I do not understand:
Why is there a 'separate' tiddler width for Zoomin view?

I think it's because for centralised view we need to be able to separately adjust the left and right sides, independently of the width.

I did not thought of that.

 

And why is that width 686px, while the story river width is 770px? (just about the difference of 85px in width I see in Chrome, Opera and IE (but not FF).

I think 686px is the width of the tiddler itself. The story river has padding, hence it's wider at 770px.

 

For me the difference in Classic and Zoomin view is that in Zoomin view only one tiddler is displayed. The rest - the way of displaying - ought to be the same (correct me if I am wrong).

Sadly, that's not right. In Classic view the tiddlers flow in the story river in the usual way. In Zoomin view the tiddlers are position:absolute within the position:relative story river.

Unfortunately.

 

I did have a look into the code of classic.js and zoom.js, see differences (although I don't understand the code):
Classic view does not use absolute position 

In Zoomin view I see position absolute and transformOrigin: "50% 50%"

That's correct.

 

That looks in accordance with what you wrote:

The zoomin view sets the story container to position: relative, and then positions each tiddler position:absolute within it. That means that the tiddlers will no longer take their width from their container, which was why zoomin tiddlers used to size to their content.

But is that still relevant (with a fixed width in Zoomin view) at the moment?

I'm not sure what you're asking. The highlighted sentence is just saying that because absolute tiddlers don't take their width from the container we have to set the width explicitly.

Ah, I just misunderstood.

So, it looks like I have to detect the current view mode and act accordingly with the CSS to be applied.
I need some time to think about that.

Thanks for all explanations.

Cheers,

Ton

[Jeremy Ruston]

Hi Ton

This is an area in which I'd welcome suggestions for improvement, by the way! I don't think what we've got at the moment is quite good enough.

Best wishes

Jeremy

[Andrew Lister]

Can I ask a more basic but related question - what's the reason for having a fixed width of the white area where tiddlers are displayed?  If I expand my browser to cover most of my 15 inch screen, much of the screen is taken up by an unnecessarily wide menu on the right hand side.  Is the idea that wide tiddlers are hard to read?

Ton's $:/Sidebar-fluid-width-style at http://tw5toolbar.tiddlyspot.com is supposed to change this, if I understand correctly, but at the moment isn't working with Zoomin.  Is that the state of things?  I haven't even managed to get it working with Classic, however.  

[Ton Gerner]

Hi Andrew,

On Thursday, January 16, 2014 4:03:14 AM UTC+1, Andrew Lister wrote:

Can I ask a more basic but related question - what's the reason for having a fixed width of the white area where tiddlers are displayed?  If I expand my browser to cover most of my 15 inch screen, much of the screen is taken up by an unnecessarily wide menu on the right hand side.  Is the idea that wide tiddlers are hard to read?

The choice for fixed width was discussed here [1].
You can imagine that readability suffers with fluid width on a wide screen (but can be handy when you use preview all the time!).

 

Ton's $:/Sidebar-fluid-width-style at http://tw5toolbar.tiddlyspot.com is supposed to change this, if I understand correctly, but at the moment isn't working with Zoomin.  Is that the state of things?  I haven't even managed to get it working with Classic, however.  

Let's say: fluid width with Zoomin view is less than optimal ;)

You did not get fluid width working in Classic view.

Can you give more details about what you use as OS and browser and what you tried to get it working?

If you look at [2] with your setup, does it work there?

Cheers,

Ton

[1] https://groups.google.com/d/msg/tiddlywiki/Gv9zZFBN-DQ/c4SxxpNga8AJ
[2] http://tw5toolbar.tiddlyspot.com/

[Jeremy Ruston]

Hi Andrew

To add to Ton's answers, the motivation for having a fixed width layout as the default theme is that nowadays that's one of the key conventions for text-based websites. For example:

https://medium.com/about/9e53ca408c48

http://blog.jakubarnold.cz/light-table-plugin-tutorial

The reason is indeed about readability. There's plenty of sources making the same point:

http://baymard.com/blog/line-length-readability

Anyhow, the point is that TW5 has always shipped with a library of themes, and I'm expecting there to be many more themes created for it as the year rolls by. Users will have lots of flexibility to choose and tweak the theme that works best for them.

Best wishes

Jeremy

On Thu, Jan 16, 2014 at 3:03 AM, Andrew Lister <andrew...@gmail.com> wrote:

Can I ask a more basic but related question - what's the reason for having a fixed width of the white area where tiddlers are displayed?  If I expand my browser to cover most of my 15 inch screen, much of the screen is taken up by an unnecessarily wide menu on the right hand side.  Is the idea that wide tiddlers are hard to read?

Ton's $:/Sidebar-fluid-width-style at http://tw5toolbar.tiddlyspot.com is supposed to change this, if I understand correctly, but at the moment isn't working with Zoomin.  Is that the state of things?  I haven't even managed to get it working with Classic, however.  

[Andrew Lister]

Hi Ton, 

Thanks for the link!  That discussion (and the links in Jeremy's email below) explain the point well.  I'm catching up on tiddlywiki after an absence.

I'm using OS X 10.9.1 and I tried tw5toolbar on both Safari and Firefox.  http://tw5toolbar.tiddlyspot.com/ looks to me like a regular TW5; as I expand or shrink the window the width of the tiddler area stays fixed (unless I make the window really small) but the width of the menu on the right changes. Toggling the fixed / fluid buttons on the right doesn't seem to do anything.

I see the reason for fixed width, but in full screen mode a lot of a real estate is just blank.  Maybe that's ok; maybe I don't need to use full screen.  But I could see a use for a theme that roughly doubled the width of the tiddler area so that preview wasn't so narrow.  (Or a theme that permitted two tiddlers side by side?  That might be useful).

My own interest does not lie in tweaks and modifications, however.  I want to resist the temptation to fiddle with TW; I'm going to try to be an efficient default-user.

[Jeremy Ruston]

Hi Andrew

I see the reason for fixed width, but in full screen mode a lot of a real estate is just blank.  Maybe that's ok; maybe I don't need to use full screen.  But I could see a use for a theme that roughly doubled the width of the tiddler area so that preview wasn't so narrow.

You can alter the width of the story column to make it wider - I believe Ton has the details on his site; basically go to "theme tweaks" in control panel and adjust the last three listed values: Story right, Story width and Tiddler width.

 

(Or a theme that permitted two tiddlers side by side?  That might be useful).

That's also on the cards. An earlier iteration of TW5 had a "sideways" view alongside classic/zoomin that showed the tiddlers in a horizontal row. I'm intending to re-introduce that at some point.

 

My own interest does not lie in tweaks and modifications, however.  I want to resist the temptation to fiddle with TW; I'm going to try to be an efficient default-user.

There's rightly a lot of emphasis on customisation of TiddlyWiki in the forums, and it's a very important characteristic of TiddlyWiki that it is so amenable to customisation. The fact that at the end of the day it's just a web page with JavaScript means that pretty much anything that's possible in a web page can be done within TiddlyWiki.

But, my experience of meeting other TiddlyWiki users is that a lot of them see it as a virtue to be able to use the vanilla product, resisting the urge to get sidetracked by tweaking it too much. I'm very sympathetic to that view, which is why I'm trying so hard to incorporate into TW5 all that we've learned from the popular additions to TWClassic.

For example, the "tagged template tweak" in TWClassic has proved very popular. More than that, we've repeatedly had new users who haven't come across the plugin expressing the desire for that functionality. So when planning TW5 I felt that that represented an important use-case to cover without needing an extension. The mechanism we've ended up with in TW5 is the idea of configuring the ViewTemplate and EditTemplate through tags. I believe it's a much better solution for most users than the tagged template tweak, as it makes it easy to mix and merge with the existing elements of a template.

Best wishes

Jeremy

[Ryan Schram]

Hello all,

I've just started using TW5 as a notebook for academic writing. I think it does really well for project planning. I'm curious to learn more. In thinking about how I'd make use of it, I am interested in finding a way to browse through tiddlers in a horizontal panel view. I found an earlier thread on an unrelated topic in which Jeremy says:

An earlier iteration of TW5 had a "sideways" view alongside classic/zoomin that showed the tiddlers in a horizontal row. I'm intending to re-introduce that at some point.

I thought I'd ask if anything has devloped in this area.

It seems like a great way to read a nonlinear hypertext document like a wiki. Links both lead a reader to related information, but the overall reading layout retains the relationship between the two discrete items. Moreover, as you click through links, and the horizontal sequence extends, you can easily move back and forth along the path you've created, and this allows you to visualize the chain as part of a tree (although the links are not necessarily connecting nodes in parent/child relationships).

Cheers,
ryan