Horizontal split

[jtagcat]

Right now, Joplin provides a vertical split of markdown and output. Especially on vertical monitors, it would be nice to see horizontal splits instead.

GitHub Etiquette

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[mdeguzis]

Any update on this issue? Found this from https://discourse.joplinapp.org/t/horizontal-split-option-for-editing-layout/414/7

[jtagcat]

No update.

~Developers are often motivated by donations. There are no guarantees. Donations, by name, are not bounties. Though, if there are many people donating, mentioning a particular issue, it's likely to be noteworthy.~

---

To the idea pot: if there's not enough room to reasonably split vertically, automatically switch (provide user override though).

Hiding the left bar would also be nice, to go along with the auto-hide. Edit: that is by now possible

Edit: Added it to my todo, but the ETA can be a day to 3 years at this point.

[NorbertJh]

I would appreciate this feature very much. So much that I'm willing to donate additional 50 Euro after this feature is available. And another 50 Euro if it is configurable whether the Editor is above or below the Viewer.

[jtagcat]

View-Change application layout could work. Splitting the main field in to 3 sections (header, markdown, preview). This might be difficult, since the second markdown field disappears with WYSIWYG.

The only problem with this approach is lack of dynamic change: If you move Joplin from a horizontal monitor to a vertical one, it doesn't automatically switch the layout.

The automatic change could be hacked around with macros. On Windows, AHK or MS PAD. On other platforms, don't know.

[NorbertJh]

Ok, I have splitted the area in to thre sections: But I found no way to add contents to the new section.

[jtagcat]

Yeah, the header-markdown-preview / header-wysiwyg are one element at the moment. If feasible, an implementation would probably be to split them to seperate elements, and allow different layouts based on aspect ratio etc.

[CCRDude]

I'm among those users with a portrait mode screen where split screen does not make sense. So this feature would be great for me as well, just giving a bump here :)

[Daeraxa]

As a workaround you should be able to do this all in CSS. As a very rough proof of concept:

userchrome.css

/* Change the direction of the editor and rendered markdown to vertical*/
.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) {
    flex-direction: column !important;
}

/* Add space at the bottom to prevent confusing scroll */
.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(1) {
    margin-bottom: 10px !important;
}

/* Move border line to top rather than left side and add top padding */
.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
    border-left: none !important;
    border-top: 1px solid rgb(221, 221, 221) !important;
    padding-top: 10px !important;
}

userstyle.css

/* Remove left padding from rendered content as no longer side-by-side */
#joplin-container-content {
    padding-left: 0px !important;
}

[flinthamm]

@Daeraxa One word "WOW!". I've been looking for a solution to this, trawling the Forum, GitHub, Google and then came across this old post (as a last resort) but with your amazing 2 blocks of code update and only a few weeks ago! I added these to the latest Joplin Windows release 2.12.18 and can confirm, this seems to be a brilliant solution, despite the very humble "very rough proof of concept" comment.

Despite understanding in isolation the concepts of CSS and some of the syntax, it is not event remotely a strong card so to see this clock of code, despite your comment I thought it was worth a try and I'm sop glad I did - Thank you.

Hopefully, this quick update might encourage other to try and for this to be rolled into a future release, plug-in or similar.

[jtagcat]

I use both horizontal and vertical monitors, changed it to this:

/* Vertical split when windows has vertical aspect ratio https://github.com/laurent22/joplin/issues/3659 */
@media (aspect-ratio < 1) {
        /* Change the direction of the editor and rendered markdown to vertical */
        .rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) {
                flex-direction: column !important;
        }

        /* Move border line to top rather than left side and add top padding */
        .rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
                        border-left: none !important;
                        border-top: 5px !important;
                        border-top-color: var(--joplin-color) !important;
                        border-top-style: dashed !important;
        }

}

Toggling layout to only editor is broken (flex leaves the other half empty). Instead of display:none, width:1px;max-width:1px; is set (only for viewer, when hiding editor, display:none is used. I don't know a way to query the current element's attribute in CSS, and already spent an hour on this, not going to do JS (if userscript is even a thing). The width:1px should be fixed 'upstream'. It's also quite frustrating that most elements don't have classes.

cc @Daeraxa (or Laurent, not pinging)

[CCRDude]

Absolutely wonderful workaround, thank you so much :)