Like breadcrumbs were originally used – in ltr, anyway.
I guess in translation, they might be reversed (rtl)? Maybe not necessary…
Like breadcrumbs were originally used – in ltr, anyway.
I guess in translation, they might be reversed (rtl)? Maybe not necessary…
Rough, but approaching what I was thinking of:
Breadcrumbs.json (1.4 KB)
<div class="breadcrumbs">
<a class="crumb" href="#">Filters</a>
<a class="crumb" href="#">Filter Syntax</a>
<a class="crumb" href="#">Filter Expression</a>
<a class="crumb" href="#">Filter Run Prefix</a>
</div>
<style>
div.breadcrumbs a.crumb{
padding: 3px 10px 3px 20px;
margin-left: 15px;
display: inline-block;
height: 30px;
position: relative;
background: #ffe476;
text-decoration: none;
}
div.breadcrumbs a.crumb:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid white;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
div.breadcrumbs a.crumb:before {
content: "";
position: absolute;
right: -15px;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid #ffe476;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
</style>
Not sure I agree here, this is where I care less for the most significant and more for the most specific.
I agree with the issue about the host varying from the folder/file part.
My point is there are “horses for courses” and two ways to arrange them.
Not withstanding this;
To be honest I have done a lot of work on this and have a few topics relating to this in talk.tiddlywiki
Of note is; a tiddler in a tag tree such as TableOfContents already has its parent tag, as that is how it got in the tree in the first place, perhaps at least for tag trees we could list the tags towards the root tiddler after the tags?
I agree with you, it shouldn’t appear as a navigation trail, but I struggle to find a correct wording for what should represent “reader’s position in the learning hierarchy for this matter (i.e. Filters)”.
Any idea ?
This part is already working, Mario’s macro uses the same tag hierarchy as ToC.
See my second proposal above, although I think this proposal won’t work well without a dedicated style for those tag pills (I like @Scott_Sauyet’s proposal for this purpose) to differentiate them from tiddler tags.
Does anyone have an idea on the best way to style tag pills differently, but only for this use case? FYI the code for this example currently uses the <<tag>>
macro.
Fred
That’s a good way to say it. I’m not sure that shortening it would lead to better clarity – the shorter you make it, the more abstract it will become: “active context” ← that’s horrible.
I think that ship has sailed. Breadcrumbs on the web are very rarely used to track your actual progress through a site. We have the Back button for that! But they are one of primary metaphors for expressing your position in a hierarchy. The other, used in either really deep hierarchies or more formal settings, is to show the path through a tree, sometimes with sibling nodes to various ancestors also displayed. We can use the TOC macros for that.
I have a continual frustration with trying to find reference documentation on the main site. This is an almost unavoidable consequence of its non-linearity; it’s hard to pair that with the sort of hierarchical view that reference documentation requires. I’d love if this were to help fix that problem. I’ve been thinking that it would require a separate documentation site to really fix well. And I probably will still work on that at some point, but it might move down the queue if this approach helps ease the pain.
The big problem is that TW demonstrates well that there are often multiple places data belongs, and multiple hierarchies that might include the same content. This makes it challenging as the main site serves so many purposes, and reference documentation is just one of them.
I love that notion!
I think it’s simpler than that. Although we’d need a name to discuss it internally, we don’t need to name it at all publicly, just use it. We don’t have to have the word “breadcrumbs” or “hierarchy” or any such in the UI. People will still understand what is meant.
I absolutely love the double-use of the railroad diagrams for navigation, but that’s only useful in the limited cases where our hierarchy is related to syntax. Breadcrumbs are more general. But, as noted above, they are no panacea; there are multiple possible hierarchies, and we can’t have six different sets of breadcrumbs without getting far too confusing.
This looks great and makes the progression of ideas very clear!
Initially I was thinking making it use tc-muted and not as tags, but-
this would look better I think, and it reminds me of a linux terminal.
It would be nice to see them above or below the tags, and pulling their color from the color of the tiddler they represent.
Those breadcrumbs look great! Those would look good as tabs in the tabs macro too.
However, the vertical text alignment is not centered and too high on Firefox/Linux and they look a bit weird.
Adding line-height: 28px;
to the div.breadcrumbs a.crumb
section makes it look similar on Firefox and Chrome.
I chose 28px vs 30px just because it looks a bit better to my eye when the "p"s, "j"s and "q"s drop below the text baseline.
/Mike
Well, the whole point is to make the visually distinguished from the tab macro!
Sure, as I said very rough. I’m not a graphics person, and once I got them close enough I stopped. I feel the text should also shift a few pixels right. And I have no idea what CSS techniques are being used across the core. I don’t know the correct foreground and background to use (they probably need to be dynamic.) This was just to demo the concept.
you can set that simply enough with the colour macro, for instance color:<<colour foreground>>;
takes care of that.
All things considered though, this is a really well made demo
Thanks. But let’s not forget that my first version was in ASCII.
Here is the typical endless-loop scenario: a
is tagged b
and b
is tagged a
→
But a
is also tagged x
… Which actually happens a lot in the the TW docs. …
x
… does not exist. …
So the “recursion-protection” logic at the moment is:
Explanation of the image below
Does that make sense?
What do you think?
The code is not published yet.
Well … here is a mockup using the tabs macro FWIW:
<style>
div.breadcrumbs [role=switch] {
padding: 3px 10px 3px 20px;
margin-left: 10px;
display: inline-block;
height: 30px;
position: relative;
background: #ffe476 !important;
text-decoration: none;
line-height: 28px;
}
div.breadcrumbs [role=switch]:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid white;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
div.breadcrumbs [role=switch]:before {
content: "";
position: absolute;
right: -15px;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid #ffe476;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
div.breadcrumbs .tc-tab-buttons button{
border-left: none;
border-top: none;
border-right: none;
border-bottom: none;
}
.tc-tab-buttons button.tc-tab-selected{
background: #eeeeee !important;
}
.tc-tab-buttons button.tc-tab-selected:before{
border-left: 15px solid #eeeeee;
}
</style>
<<tabs "[[Filters]] [[Filter Syntax]] [[Filter Expression]] [[Filter Filter Run Prefix]]" class:"breadcrumbs">>
Breadcrumbs Tabs.json (1.3 KB)
The tab selection actions or the template/buttonTemplate parameters might allow manipulation of the tabs filter to build up the breadcrumb trail however you want.
Fodder for thought.
/Mike
Hi Mike,
A very interesting approach. Thx for sharing.
It sounds like it makes some sense. It’s not clear to me if this is meant to be opt-in. Will this only appear if you have a certain tag, or a particular value in some field?
Although I really want something like this for reference documentation, I don’t know that it makes sense on the entire tiddlywiki.com. Even in reference documentation, though, I am afraid of trying to impose a hierarchy on a fundamentally non-hierarchical wiki. In your solution, what happens when there are multiple paths to the TableOfContents?
But there are parts which would really benefit from breadcrumbs. I absolutely love the bit done with the railroad diagrams; but that’s going to applicable only to documentation of syntax.
I don’t know the answer, and I’d love to see how your code might help. But I’m afraid I’m not particularly optimistic.
It’s not intended to be used everywhere.
We do have the table of contents TOC, which clearly is a hierarchy. … Just because TW can be non-linear, it does not mean that there is no structure. It’s the users decision how structured and hierarchical a wiki is. …
I think for the railroad diagrams used to describe the filter syntax, it’s essential to know “where” the info belongs to. I think to understand filters it’s important to know the context. … and breadcrumbs may make that context visible.
One will be chosen. Since tags are sorted alphabetically by default, the first one that has not been visited will be used. That’s it.
There are 3 macros atm.
sort[]
parent
, so it can be used by my TOCp pluginlist
-field to create breadcrumbs … I’m not sure if that is useful, but it may beNo. 2 can also use the tags
field, but it does not sort. So the users are able to define the “path” by defining the tags accordingly.
Right. My greatest concern here is not how others might use such macros, but how we might use them on TW-com in order to improve it as a documentation source. For other places, this could be extremely useful.
But notice that there is a difference in the hierarchy expressed by breadcrumbs and that expressed by a TOC. In a TOC, we are giving an overview of where everything can be found. It doesn’t matter that Features > Drag and Drop
and Features > Importing Tiddlers
both include DragAndDropMechanism
. It simply can be found in both places. Breadcrumbs describe where a particular tiddler resides. If our breadcrumbs show Features > Importing Tiddlers > DragAndDropMechanism
, then we don’t report what might be the more important Features > Drag and Drop > DragAndDropMechanism
. I faced a similar issue in my Wizard Nav Plugin, but I was expecting it to be a rare enough case that I simply accepted the ugliness of two such footers. I don’t think we can do that in a more generic mechanism.
That sounds like the best of all worlds!
The latest version of the docs with the breadcrumbs macros is live now: Start with Filter and Filter Syntax
The macros are developed with the tiddlywiki-com default CSS settings.
The macros are now named. .breadcrumbs and .breadcrumbsField
… Do not miss the -dot- at the beginning
\define .breadcrumbs(start, stop, exclude, label, field, sort)
stop … (required) tiddler title to stop … Needs to be a tiddler, otherwise there is an error message
start … (optional) tiddler title to start with. defaults to currentTiddler
exclude … (optional) tiddler list of titles to be excluded. eg: title [[title with spaces]]
label … (optional) label to be shown in front of the breadcrumbs nav
sort … (optional) defaults to yes
. In TW tags are usually sorted
\define .breadcrumbsField(start, exclude, label, field:"list")
start … (optional) tiddler title which contains the “list” field. defaults to currentTiddler
exclude … (optional) tiddler list of titles to be excluded. eg: title [[title with spaces]]
label … (optional) label to be shown in front of the breadcrumbs nav
field … (optional) defaults to “list”. Field name that contains a title-list that should be shown as breadcrumbs
The “field” verions can be used to create “out of order” breadcrumbs as shown in Filter Operators
see: Can Hirarchical Breadcrumbs Benefit TW Documentation - #21 by pmario
Many existing color palettes do not contain valid settings for the <<colour message-background>>;
which is used for the breadcrumb background.
The railroad-plugin CSS uses those palette values too.
So the railroad-plugin and breadcrumbs macros will need improved palettes to work well with all palettes.
You can use the Palette Manager Edition to globally improve existing palettes. The edition contains the palette-manager-plugin-beta that can be imported into your wiki.
The INTRO for the palette-manager edition can be found at:
have fun!
Mario