Display vertical context in long scrollable document (RemNote-like auto-folding mode)

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:

    1. Open the link https://www.remnote.io/documentation
    2. If on large screen, resize browser window height to be low (at most half of document height).
    3. Start scrolling e.g. by dragging the scrollbar
    4. 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:

keywords: breadcrumb, expanding, folding, hierarchy, minimap, nesting, outliner, outlining, overview, scroll, slider, stacking, table of contents, TOC

6 Likes

Requested also in following post (within unrelated thread):

I also have this idea, but at present Obsian’s support for the outline is not friendly enough, I think it can first in the backlink page now.