Where am I? Highlighting the Scope in Roam
One of the more confusing things in outliners is often to find where we are within the outline — in other words, the scope. There are different solutions for this, e.g., RemNote — one of the most interesting competitors of Roam — uses sticky headers.
We could imagine, of course, many different other solutions. E.g., breadcrumbs or simply highlighting the current active depth. Roam unfortunately lacks any of these features which makes it sometimes a little bit confusing to use.
And later, he converted that into a fully-fledged browser extension called Roaman:
At that time, I was also trying to solve this issue and I even created a little script that worked reasonably well. Unfortunately, for some weird reasons, it was quite buggy in Firefox and so I have never released it:
Nevertheless, I plan to recreate it in the second version of my ROAMEXT plugin.
Are there any pure CSS solutions?
If you are familiar with CSS, you probably know that we cannot move up in the DOM tree when using selectors in CSS. If you would like to start with CSS for Roam, check my articles here on Medium. The inability to select parents based on the children is one of the most limiting factors of the current specification of CSS and it was also behind my special JS script for Roam called ROAMEXT. At the first sight, it might therefore seem impossible to use pure CSS to highlight scope in Roam.
One of the ways how to go around this is to simply give different color to each scope and thus facilitate our orientation. This is the approach of Abhay Prasanna (Github):
This is a very nice solution, so let us build on the concept to add interactivity. Luckily, the Twitter user Erod attracted my attention to an interesting CSS pseudo-class:
Very clever! The CSS pseudo-class
:focus-within actually allows us to change the appearance of the parent (or any ancestor) based on the state of a “focusable” child/descendant. This is one of the very few cases in CSS where we can traverse back in DOM. And for our needs, it works perfectly, because a block that we edit, is in fact focused und thus all his ancestors receive the same
However, there is one more pseudo-class, we could use. One that is much more common and is called
:hocver. This one works slightly differently — it registers where our mouse hovers, not where we edit the text. In other words, we may combine both pseudo-classes to give us a slightly different type of information:
:focus-within — where do I work right now
:hover — where does the mouse browse
I will now show the possible use for both these pseudo-classes. But feel free to experiment with them and change
:focus-within to see what you like the most.
Remember, as always, to put all the code into a code-block into a
[[roam/css]] page and make sure that the language of the code-block is “css” (top right corner).
Where do I edit right now
Let’s firstly look at probably the easier one of the two. Where do we edit? For this case, I simply chose the
:focus-within selector and opted for rather a smooth highlighting of the bullets.
The code is surprisingly simple in this case. We just need a horribly long selector that leads us from the whole block (containing the block we edit incl. children) to the bullet. Then we change its color, shape (by modifying its width, height and border-radius):
transition property. It is a very elegant way how to create a simple, smooth transition in pure CSS.
Now we want to also have a smooth transition when we move somewhere else. That can be achieved with a similar code. Just remove
:focus-within from the selector, put all properties to default values and leave the transition.
If you don’t like the change in the shape, simply remove the properties
width, height and border-radius .
Where does my mouse hover
The other option is to track where our mouse hovers over. This is again quite simple. Basically, instead of
:focus-within we can use the
:hover pseudo-class. In this case, we will try to highlight not the bullet points of our blocks but the vertical lines.
The code is pretty straightforward. Again we have defaulted and changed values.
What may seem a little bit odd here, is the use of
box-shadow instead of a simple
border. The reason is that
box-shadow does not change the width of the element that would in result cause the block to slightly move to the right.
Adapting to your style
Now you can, of course, decide to combine or remix this code, e.g., you can simply change the default behaviour of the highlighting from reacting to mouse to reacting to your editing by changing
And of course, we can easily combine it with Abhay’s theme :). Because we use
box-shadow instead of
border , our styles should be compatible without any adjustments.
And that is all for today. You can find the corresponding code on my companion page on Roam.
If you like my work, follow me on Twitter, check the public Roam database Roam-tricks, my personal public collection of my hacks, and yes, you can support me on Patreon or through PayPal. I would really appreciate it and you would help to make future articles happen. And remember: If it looks like a duck, if it writes like a duck, it’s probably me. [[QUACK]]!