Hidden links (visible as text but with no attributes) in Chapbook

Authoring Twine
1

How can we render only certain links without any attributes (cursor: none, text-decoration: none, color : inherit…) so exactly like the rest of the text in Chapbook but still real links ?
Something like this :

This <a style="text-decoration: none; color: black; cursor: none;" href="https://intfiction.org/">LINK</a> is not visible as a link but works
2

note: There is a Twine specific category within the Authoring section of the Categories dropdown of the New Issue page.

There are two basic ways to create a (Passage Transitioning) link in Chapbook…

Markup based link: [[Link text|Target Passage]].

Insert based link {link to: 'Target Passage', label: 'Link text'}.

…and if you use your web-browser’s Web Developer Tools to Inspect the HTML element generated by each of the above two methods you will see it looks something like the following…

<a href="javascript:void(0)" data-cb-go="Target Passage">Link text</a>

…and if you look at what CSS is being used to style the above element you will see the following CSS rule…

#page a {
	-webkit-text-decoration-color: hsla(0, 73.83966244725738%, 53.529411764705884%, 1);
	background-color: inherit;
	color: hsla(210, 10.81081081081081%, 14.50980392156863%, 1);
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-decoration: underline;
	text-decoration-color: hsla(0, 73.83966244725738%, 53.529411764705884%, 1);
	text-transform: inherit;
}

There are two basic methods you can use to target the <a> element that is being used to represent a ‘link’:
1: Wrap the ‘link’ within an identified HTML element, like a classed <span>…

<span class="hidden-link">[[Link text|Target Passage]]</span>

<span class="hidden-link">{link to: 'Target Passage', label: 'Link text'}</span>

…so that a predicable HTML structure like the following is generated…

<span class="hidden-link">
	<a href="javascript:void(0)" data-cb-go="Target Passage">Link text</a>
</span>

…and then use a CSS selector based on that structure to target the <a> element you want to ‘hide’…

#page .hidden-link a {
	text-decoration: none;
	color: black;
	cursor: none;
}

2: Craft your own custom insert, using the code of the {link} insert as a guide, that generates an <a> element that includes the styling properties you want.

notes:

  1. If you the 2nd of the above methods then I suggest assigning a CSS class to generated <a> element and use a CSS rule to style it, instead of applying that CSS directly using a style attribute.
  2. Forcing an end-user to hunt for a ‘link’ can cause frustration.
  3. If you are ‘hiding’ the link so that only a selected set of individuals know about it, then consider that the ‘hidden’ link is very easy to discover by anyone that knows how to inspect the HTML elements of the current page, and that there is nothing stopping anyone that knows about the existence of the ‘hidden’ link from telling others… (there are web-sites specifically setup for this behaviour).
3

Thank you very much for your help @Greyelf.

Your answer is very interesting because it allows me to understand not only how to solve this problem, but also other problems.

And yes, it may be a bad idea to make hidden links. Your point is absolutely correct. But the main thing is that it teaches me how to make chapbook work.