Use case or problem:
- improving context awareness in hierarchically structured document - see higher levels when scrolling through long nested portion of tree structure.
- integrating outline into main pane to utilize small screen space
- faster navigation
- This can be applied to any tree-like structure
- note content with headings/chapters, indented lists
- backlinks and search results grouped by file
- folders in file Explorer
- nested tags
Proposed solution:
Display vertical context (parent blocks) for displayed portion of long hierarchically structured document.
-
It works for example in RemNote.
-
It will be best explained/illustrated if you play with the example:
- Open the link https://www.remnote.io/documentation
- If on large screen, resize browser window height to be low (at most half of document height).
- Start scrolling e.g. by dragging the scrollbar
- While scrolling, watch how top part of the window shows parent blocks (headers and less nested bullets) for displayed content.
-
In contrast with that implementation, I would like it to be smooth instead of sudden appearance / disappearance of blocks. And the content should always be displayed just once, not duplicitly as can be sometimes seen in RemNote.
-
It should be well integrated with folding.
-
Scrolling should stack appropriate parent blocks at the top just like horizontal scrolling in Andy mode stacks panes on the left.
-
Font-size of stacked headers can be reduced to avoid space inefficient stack of huge H1, H2, … H6 headers. When headers are short, they can be stacked inline like breadcrumb, rather than one under each other, to save even more screen space.
-
Clicking on stacked block should scroll to it like clicking on stacked bar does in Andy mode.
-
Automatic stacking also at the bottom (to avoid need for manual folding) for faster navigation within document to be considered later.
From long document …
▾ # title
▾ ## first heading
some text
▾ ## second heading
▸ - root1 …
▾ - root2
▾ - branch1
- b1a
- b1b
▾ - branch2
▾ - branch3
- leaf1
- leaf2
- leaf3
▾ - branch4
- b4a
▾ - c
▾ - c1
- c1a
- c1b
▾ - c2
- c2a
… when scrolling to “leaf2”, in small window we would see …
▾ # title …
… ## second heading …
… - root2 …
....… - branch3 …
… - leaf2
- leaf3
▾ - branch4
- a4a
▾ c
… instead of
- leaf2
- leaf3
▾ - branch4
- b4a
▾ - c
▾ - c1
- c1a
- c1b
▾ - c2
Related feature requests and references:
- complementary, to be compatible with:
- Filtering in file content:
- Suggested folding method can be reused to display filtered content (together with it’s vertical context) in similar way.
- Magic, "One Click," Dynalist search results—Yes!
- Filtering Everywhere!
- Andy mode
- vertical Andy mode
- Typewriter Scrolling:
- Hotkey "jump to previous caret position"
- Filtering in file content:
- other:
- Show hierarchical context (parent block/header) for each backlink (mention)
- Hotkeys for “Fold one more level” and “Unfold one more level”
- Document Spanning
- Ability to zoom in on bullets (clicking on stacked header would “zoom-in” / focus by scrolling to to it, although still showing adjacent items when there is available screen space.)
- https://getbootstrap.com/docs/5.0/components/accordion/ (a bit similar behavior. Maybe useful for during implementation.)
keywords: breadcrumb, expanding, folding, hierarchy, minimap, nesting, outliner, outlining, overview, scroll, slider, stacking, table of contents, TOC