I don’t really know why I never thought of this ages ago.
It is really simple with CSS to have a fixed Bible text (or any text) that remains visible while you scroll through the long commentary below it.
See here for instructions and an example.
5 Likes
That’s very nice; thanks for sharing!
CSS has gotten quite powerful over the years. And this isn’t even one of the more recent goodies
One possibly extension (using a technique not available in Firefox until fairly recently) would be to highlight sections of the passage in question when hovering over the related commentary.
That is, we can wrap certain sections with an identifier:
<span section="s1">"Settle matters quickly with your adversary who is taking you to court.</span>
<span section="s2"> Do it while you are still together on the way, or your adversary may hand you
over to the judge, and the judge may hand you over to the officer, and you may be thrown into
prison.</span> <span section="s3">Truly I tell you, you will not get out until you have paid the last
penny.</span>"
Then we can wrap portions of the commentary text with references to those sections:
<span class="for-s1">Lorem ipsum dolor sit amet. Qui galisum fugiat aut accusantium... </span>
<span class="for-s2">Aut magnam alias est perspiciatis libero aut rerum voluptatem et...</span>
<span class="for-s3">Lorem ipsum dolor sit amet. Qui galisum fugiat aut accusantium... </span>>
And with CSS like the following, we can hover over the commentary sections and see the related parts of the passage highlighted:
.tc-tiddler-body:has(.for-s1:hover) [section="s1"],
.tc-tiddler-body:has(.for-s2:hover) [section="s2"],
.tc-tiddler-body:has(.for-s3:hover) [section="s3"],
.tc-tiddler-body:has(.for-s4:hover) [section="s4"],
.tc-tiddler-body:has(.for-s5:hover) [section="s5"] {background: <<colour alert-background>>;}
If we wanted the hovering relationship to be more obvious, we could also highlight the parts being hovered with the same or a different color:
for-s1, .for-s2, .for-s3, for-s4, .for-s5 {&:hover {background: #efe;}}
(Note that the red in these videos is a compression artifact; it doesn’t happen that I can see.)
Sticky Bible text for commentaries with hover links.json (4.9 KB)
We might also use different colors for different sections, or add other visible changes on hover. CSS has gotten fun!
3 Likes
Very cool, Scott!
One issue with my sticky text idea is that it occupies precious vertical real estate. If it is more than 2 or 3 lines of text, it blocks too much of the story river and the space for the ‘commentary’ text gets too narrow at the bottom. So I think that instead of sticky text I should use my side column tab (see it at Documenting TW — a non-linear personal web notebook)
[edit: that unfortunately kills your very nice highlighting feature.]