Section Names using ID for internal Links

[S. S.]

It's best experienced - and the tiddler says it better than pasting it here.

Please drag the attached tiddler into https://tiddlywiki.com/ and import.
In the side bar, Click the the Recent tab, and open the tiddler.

Click the links at the top and within the tiddler, and then please read it right to the very end to understand what is being shown.

Thanks.

EDIT: Please use the updated tiddler attached in my next post instead of this one. Both work fine, but the updated tiddler corrects the explanation.

[BurningTreeC]

 

It's best experienced - and the tiddler says it better than pasting it here.

Please drag the attached tiddler into https://tiddlywiki.com/ and import.
In the side bar, Click the the Recent tab, and open the tiddler.

NIIIIIIICE! thank you S.S.! 

[BurningTreeC]

Instantly made two macros using your method

one transcludes a tiddler and gives it an id starting with #, then the title of the tiddler where it's transcluded, then the title of the transcluded tiddler

the other one creates a link to that transcluded tiddler within the same tiddler

\define transclude-inneranchor(tiddler:"",field:"text",mode:"block")

<span id={{{ [[$(storyTiddler)$]addsuffix<__tiddler__>encodeuricomponent[]addprefix[#]] }}}>

<$transclude tiddler=<<__tiddler__>> field=<<__field__>> mode=<<__mode__>>/>

</span>

\end

\define transclude-innerlink(tiddler:"")

<a href={{{ [[$(storyTiddler)$]addsuffix<__tiddler__>encodeuricomponent[]addprefix[##]] }}}>link to inner-transcluded $tiddler$</a>

\end

I guess it won't work that well if the same tiddler is transcluded more than once within the same storyTiddler using the transclude-inneranchor, but I hardly do that

It will also fail a bit if used outside of story tiddlers

but ... good enough for many things! thanks again,

btc

[oxydum]

You could also make a macro like this:

\define intlink(id:"", link:"TTT", next:"", previous:"", top:"")
!!! <a id="#$id$"> ''$link$''</a><small>
  <a href="##$next$">Next</a>
<$reveal type="nomatch" stateTitle="$previous$" text="">
<a href="##$previous$">Previous</a>
</$reveal>
<a href="##$top$">Top</a>
</small>
<style>
body {
  counter-reset: section;
}
h3::before {
  counter-increment: section;
  content: counter(section) ".";
}
</style>
\end

Usage:

<<intlink  id:"s002" link:"Funny Quotes" next:"s003" previous:"s001" top:"s000">>

[Jeremy Ruston]

Hi SS

Well done, this is pretty interesting.

As a sidebar, I’ve thought about enabling anchors before, thinking that we’d need a new mechanism to enable us to suppress the usual navigation behaviour when the location hash changes (the bit after the # of the URL). You’ve actually found a bug in the processing of the location hash that disrupts that processing if the URL contains a second hash.

The problem is here where we split the location hash out of the full URL using .split(“#”):

https://github.com/Jermolene/TiddlyWiki5/blob/master/boot/boot.js#L270

By splitting on the # character we actually throw away anything after a 2nd # character. So, when the URL contains two hashes, TW5 only sees up to and excluding the 2nd one…

That’s why changing the URL to a value that starts with # doesn’t trigger a navigation (i.e. an overall double hash, as you have them).

Another way to see the bug is to navigate to https://tiddlywiki.com/#foo#bar instead of navigating to a (missing) tiddler called “foo#bar” it just sees the tiddler title “foo”).

It’s an interesting question what to do now: this is definitely a bug, and it prevents navigating correctly to tiddlers whose titles contain # characters. But equally, as noted above, I’ve been wanting to introduce a mechanism not unlike this just to permit the anchor stuff you’re experimenting with.

Best wishes

Jeremy.

On 1 Mar 2019, at 12:27, S. S. <sachde...@gmail.com> wrote:

It's best experienced - and the tiddler says it better than pasting it here.

Please drag the attached tiddler into https://tiddlywiki.com/ and import.
In the side bar, Click the the Recent tab, and open the tiddler.

Click the links at the top and within the tiddler, and then please read it right to the very end to understand what is being shown.

Thanks.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/52893c8d-3aa6-4318-923c-ca15237e7bf6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
<Section Names using ID for internal Links.tid>

[TonyM]

S S

Great work furthering this. The desire for in tiddler anchors is an old one. A lot of new users coming from html and related areas quickly ask us for this. 

Perhaps in part because of the way a lot of open tiddlers can be displayed in the story or people build large tiddlers until they learn to "divide (into tiddlers) and conquer"

There was some powerful features in TiddlyWiki classic for sections including the ability to transclude only a section, hidden sections and more which would be ideal, but I understand we are somewhat limited in this regard now.

However being able to simply use anchors in a page is a barrier both to design and possible adoption by some users, not to mention the ability to import sizeable content into a tiddler and have a practical access method.

It would be nice to see your work extended to provide automatic index and footnotes that will jump to the anchor. I believe the technology is there once you "solve this",

Really Great work

Tony

[S. S.]

I was quite surprised when it worked. It was very unexpected!

The tiddler attached in my first post works perfectly, but the explanation used a single # in a few places where it should have been a double ##.

Attaching an updated corrected tiddler.

[S. S.]

BTC, this might be a little trivial, but seeing your macros made me inspired to try it out. It was fun to do and didn't take long since your examples had already done the hard parts!

Puts a link at the very top of all tiddlers to take you to the bottom, and vice versa.

Tiddler
title: Top of Tiddler Template
tags: $:/tags/ViewTemplate
list-before: $:/core/ui/ViewTemplate/title

\define inneranchor(place:"top")
<span id={{{ [[$(storyTiddler)$]addprefix[$place$-of-tiddler-]encodeuricomponent[]addprefix[#]] }}}></span>
\end

\define inner-link(place:"top" name:"Top")
<a href={{{ [[$(storyTiddler)$]addprefix[$place$-of-tiddler-]encodeuricomponent[]addprefix[##]] }}}>$name$</a>
\end

<<inneranchor>>
<<inner-link bottom Bottom>>

Tiddler
title: Bottom of Tiddler Template
tag: $:/tags/ViewTemplate
list-after: $:/core/ui/ViewTemplate/body

\define inneranchor(place:"top")
<span id={{{ [[$(storyTiddler)$]addprefix[$place$-of-tiddler-]encodeuricomponent[]addprefix[#]] }}}></span>
\end

\define inner-link(place:"top" name:"Top")
<a href={{{ [[$(storyTiddler)$]addprefix[$place$-of-tiddler-]encodeuricomponent[]addprefix[##]] }}}>$name$</a>
\end

<<inneranchor bottom>>
<<inner-link>>

If you prefer dragging it into tiddlywiki.com - attaching the two .json files.

[Jeremy Ruston]

By the way, I made a GitHub issue to discuss handling the underlying bug:

https://github.com/Jermolene/TiddlyWiki5/issues/3811

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/57b988a5-b91f-416a-96ae-cc090dcdbb16%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

<Top and Bottom of Tiddler Template.json>

[Mohammad]

Hi S.S.,

 This is really amazing! Thank you for this discovery!

One question: Having this feature and the Viewtemplates you provided to easily navigate to top/bottom of tiddlers:

Is it possible to use this feature for navigating from sidebar top and have the clicked title (tiddler) at the top of screen (window)?

--Mohammad

[S. S.]

In response to the Github Issue noted below, I have made a FIRST DRAFT of : Internal Links using HTML

Attaching a reference copy here as well. Comments would be greatly appreciated.

Thanks

[PMario]

Hi,

The biggest problem, I see, with this mechanism is, that anchor IDs must be unique. If you open a new tiddler and insert this: {{Section Names using ID for internal Links}} you'll have a problem.

The whole anchoring thing is in an undefined state now. So if the user clicks a link it may jump to an anchor of a different tiddler.

That's not a big deal for the example used here, but if the whole content is dynamically created, it will create confused users.

The second thing is, that a <ctrl>-click on a Next or Prev link opens a new tab, which isn't the standard behaviour for TW internal links. .. It should open the tiddler without navigating to the new tiddler.

just some thoughts.

-mario

[Thomas Elmiger]

Hi, is this tested on Android?

On my phone, navigating to https://00ss.github.io/documentation/tiddlywiki.html#Internal%20Links%20using%20HTML

and clicking the ID links does rarely lead to the right position in the document. (It did once, I think, but not reproduceable.)

Android 9, Chrome/Opera

All the best,
Thomas

[S. S.]

Thanks for the feedback Thomas.

My primary interest when writing the tiddler was getting a draft copy of the documentation out. I did not do much testing, something that definitely needs to be done. I don't have easy access to many browsers or O/Ss. Still, I purposely crafted the 6 links at the bottom of the tiddler differently, to see which might not work.

On Windows 10, the links all work well on Firefox 65.0 (64 bit). On Edge 17.17134 & SeaMonkey 2.49.4 the links with URI encoded targets (ex %20) don't work.
On Android 6.01, Firefox Beta 66.0 all links work well. On Chrome 72.0 all links work well, but if the screen is zoomed in, the scroll falls short of the top, but this same effect takes place even when clicking normal links to tiddlers.

Regards

[S. S.]

Hi Mario,

Thanks for the feedback. I had forgotten to test the CTRL click on the links. I will mention that as a side effect.

What is interesting in doing this is that it brings to light an issue not talked about before.
Many have been asking for internal links within a tiddler, but we can see that it can lead to awkward situations when that tiddler is transcluded!
The way I worded it is:

If transclusions create multiple instances of the id, navigation will take place to the first instance found that satisfies the above criteria.

Well, just testing out these internal links within a tiddler has provided this Food for thought!
At least for now we do have a (not perfect) way to jump to targets within a very long tiddler.

Cheers

[TonyM]

S S,

One day we may find the ultimate answer, perhaps with unique automatically generated IDs however as long as we place the instructions and caveats around it your method is likely to suite 80% of cases. Using tiddlers and lists and other methods is often sufficient, however in the case of managing large tiddlers, building tiddlers for publishing (especially to HTML) etc... having "A Method" is great.

Actually since the key here may be for the production of html for reading or export perhaps a template that generates the html with automatic anchors may be the way to go.

Regards

Tony

[S. S.]

Tony,

Yes, I believe you are right. Having some method, limited though it may be, may be enough for most all needs. I imagine one only needs in-tiddler links for specific purposes, not for general use everywhere.

Once a few dozen tiddlers are open, one is often beyond the normal use pattern of TiddlyWiki.
I guess one could say, if you'd like to use in-tiddler links for scrolling to a target, don't create situations where id targets within a "tiddler-transcluded-multiple-times" needs to be accessed - because it likely won't work the way you want it to.

Meanwhile I have updated the documentation tiddler to include Mario's ctrl+click observation, and changed some phrasings around. It is at the same URL.


updated: Internal Links using HTML

Please do click on the 6 links at the bottom of the tiddler to see if there are any unexpected results on different browsers.
The first and second links on that list should always work. The problematic ones may be next 3.

The original draft copy is still there renamed to: Internal Links using HTML - Draft 1

Edit fixed the link that copied and pasted incorrectly

[S. S.]

I guess this might be ready for submitting to tiddywiki.com now.

[TonyM]

S S ,

I had a hunch that paid off. If we want the ID to be unique to tiddler use qualify and it seems to work.

This should solve many of the aforementioned problems.

Eg in TOC

<a href=<<qualify ##h1>> >Link to My Heading</a>

In Text

<h1 id=<<qualify #h1>> > My Heading</h1>

Also the following works to help users nest headings

<a href=<<qualify ##h1.1>> >Link to My Heading 1.1</a>

<h1 id=<<qualify #h1.1>> > My Heading h1.1</h1>

Notes:

• There is not current tiddler in the sidebar so this may not work there but a hardcoded number could be used
• As ID's can be defined in CSS (Am I correct?) perhaps we can use the new wikitext in CSS features to automatically generate ID's that qualify them automatically.

I am confident there is more to be discovered.

Regards

Tony

On Friday, March 1, 2019 at 11:27:11 PM UTC+11, S. S. wrote:

[S. S.]

Tony, this is a really great solution you have reached. Wonderful insight and connecting the dots to use a <<qualify>> macro!

I tested it with this, and transcluded it multiple times. As you said, it works! Navigates to the correct link of the correct tiddler.

<h1 id=<<qualify #Heading-h1>> > <<qualify #Heading-h1>></h1><br><br><br><br><br><br><br><br><br><br>
<h2 id=<<qualify #Heading-h2>> > <<qualify #Heading-h2>></h2><br><br><br><br><br><br><br><br><br><br>
<a href=<<qualify ##Heading-h1>> >Link to My Heading h1</a><br><br>
<a href=<<qualify ##Heading-h2>> >Link to My Heading h2</a>

Now I will have to do some rewriting on the Github Pull request #3836
Regards.

[S. S.]

I believe the Documentation for this 🐛 (bug) transformed into a feature is just about ready.

But that is not for me alone to decide - it's for all here who read the docs to see if it's explained clearly and properly.

Any comments/additions/corrections/criticisms would be appreciated, specially suggestions for making it shorter (something I have trouble achieving).

The tiddler has been renamed to: Anchor Links using HTML

Regards.

[Watt]

Hi S. S.

I looked at your docs and was convinced I could make them shorter. Now after several hours I realise how bleedin difficult it is to write concise, comprehensible docs. I salute your achievement!

I've attached my attempt but it's not much of an improvement as regards brevity or comprehensibilitytion. I've also messed around with all your headings so, not only is it nearly the same length, it will also cost you some time re-doing the anchor links. I won't be offended if you decline the 'assistance'.

Thanks for the anchor link addition to TW anyway, it's a useful feature.

Rgds.

[S. S.]

Thanks so much Watt!

There are quite a few changes that I really like, specially putting the links to the sections right at the top, breaking the procedure into Step 1 & 2, and the language changes that are nice and friendlier.

Appreciate the time you spent getting things in order. I will rework it again using these good ideas.

Cheers!

[Suzanne McHale]

Does this mean that if an anchor link is desired, a heading is written as <h1 id="#heading-01"> My Heading</h1> rather than using Wikitext to define a heading: ! My Heading?

 

[TonyM]

Suzanne

That is one way to do it, but any html tag that can accept the I'd parameter will work. The anchor could be in <table> for example. The link will jump to the line with the I'd in it. So it could jump to something before your
!heading

Regards
Tony

[S. S.]

Suzanne,

As of now, a way of making the anchor and the anchor link is not available in WikiText. So what you wrote is correct if you want the anchor to be your heading.
For now, we have to use HTML.
As Tony pointed out, any HTML tag (element) can hold the id attribute. So it could also be any of these and of course many more:

<p id="#heading-01" />

! My Heading 01

<a id="#heading-02"></a>

! My Heading 02

<section id="#heading-03">

! My Heading 03
More text
</section>

Regards.

[TonyM]

S S and Suzanne,

I do recommend my suggested use of the Qualify macro if there is a chance you want to do this in more than one tiddler. This will most likely be my default use.

Regards

Tony

[S. S.]

With sincere apologies to Watt who took a lot of time and thought to rewrite the  Documentation tiddler, I just could not get around to including his suggestions, and this led to a few weeks delay. Unfortunately I submitted the original version for inclusion in the upcoming 5.1.20 release as I could not muster up the concentration to rewrite it again.

The final submission can be previewed here:  Anchor Links using HTML

On Tuesday, March 12, 2019 at 1:44:01 AM UTC+7, Watt wrote:

[Mark S.]

404 Error.

[Justin H.]

For others who might find this thread, and wish to read the documentation on anchor links, the official tiddler can be found here: Anchor Links using HTML