Idea: Would it be possible to change the ratio between the edit and preview?

#1

Whilst editing tiddlers sometimes we want the preview open but the automatic 50/50 is not always our friend, code may wrap and/or the preview may wrap. There are cases where it is one or the other that is wrapping, and if it were possible to drag the line between tween the edit panel and preview panel it would be convenient to help make it fit.

1 Like
#2

Can resize: horizontal be worked into the Grid Container css to accomplish?
div.tc-tiddler-preview.tc-tiddler-editor

#3

You can do it just using wikitext. You need to understand the usage of grid-template-columns

#4

Sorry, I can’t work out a solution from the volumes of information at the above links.

Typo fixed in can not or can’t do this myself. :frowning_face:

#5

https://imgur.com/rfbpxKz

#6

I came here to see if anyone had ever suggested making the editor preview pane split the editor area vertically instead of horizontally? The above and the referenced git issues suggests the idea is more about varying the preview width but it seems that improving preview is the objective. What I am wondering is if the preview pane could be positioned above or below the edit area?

Is a vertical arrangement possible or is the horizontal arrangement of the editor and preview panes too embedded in code? How difficult would making preview position a user option be? Horizontal seems to be the more typical arrangement, even here in Talk. And TiddlyWiki has always had the preview pane positioned to the right as far back as I can recall. I’m just wondering if that design decision had ever been reconsidered. Searching through the archives I don’t see that ever being suggested.

Pros of a Preview Pane above/below the edit area:

  • Allows the user to preview the full - main column, story river - width of what tiddler rendering will look like; resulting in better adherence to the UI principle of least astonishment. The traditional horizontal split means the normal story river is necessarily going to be rendered differently than what the preview shows while the tiddler is being edited.

  • Contents would no longer wrap differently; or at least differences would only be due to CSS or TiddlyWiki generated alignments

  • Tiddler contents that are inevitably squeezed by the side by side preview - e.g., table column contents, the genesis of this notion - would render more like what their story river presentation would be like.

  • Having a scrollbar on each would allow users to align the contents should they get out of sync - sort of like the way Talk’s editor works. Whether the two can be more easily kept in sync programmatically I leave as an exercise. That the current default implementation gives neither a scrollbar has always seemed to me to be a deficiency.

Cons:

  • A vertical split would lose the left/right alignment aspect of the current preview pane: e.g. the attempt to make un-edited and preview align so they present the same content. Personally, as tiddler contents get more complex, with tables for example, I find the misalignment that results difficult to navigate anyway.

  • This would be a big change from the way TW5 has always presented edit previews.

Just tossing that out there.

#7

Yes, It has being part of a number of discussions in the past.

  • Allowing us to edit with alternative previews visible above would resemble many existing wiki out there, like wikipedia/wikimedia implementations and help people less familiar with mark-up/down rather than WYSIWYG.
  • There may even be some solutions out there.

Not only can it be, somehow in a couple of wikis of mine it is doing it without me intending it to do so, and I am having trouble reversing it. Recently I believe there was some changes to introduce a more flexible layout.

Another approach I have, that is in progress, is making the existing previews or additional ones both available in the view and edit templates above or below the body. I will share more on review of my own notes/work, I have touched this idea so many times I have notes everywhere :frowning_face:

To find a quick fix

Currently the horizontal layout editor to left of preview is achieved by them adding up to less than 100% of the width. If you increase the width of the preview it falls below.

  • I am keen to see something similar to the “sidebar resizer” to change the ratio between the two edit and preview
    • But we could also change it from horizontal to vertical with a right hand drag on both, and a method to swap the order.

A somewhat related discussion for the codemirror 6 plugin is happening here Plugin: Another way to preview tiddler on edit