How to use Enchant macro with links

Question

Twine 2.1.3

Harlowe 2.0.1

I want to use the enchant macro to make some links green, others blue, specifically in the Footer passage. I think this should be possible based on the Harlowe manual which says:

(enchant: ?ghost, (text-style:'outline'))

The built-in hook names, ?Page, ?Passage, ?Sidebar and ?Link, can be targeted by this macro, and can be styled on a per-passage basis this way.

In the Footer passage I have:

(enchant: ?Link, (color: '#006633') )

(I have tried variations like text-style, text-color, link-color, etc.) When I run the Footer passage by itself, or other passages that have footers, "I get the error I can't run the macro 'enchant' because it doesn't exist.►" 

Shouldn't this macro style all the links? What am I doing wrong?

 

I have tried reading through several questions & answers, both here and on the old forum, but I'm still not understanding.

Thanks all.

Answer 1

First a little background:

1. The (enchant:) macro wraps its target within a tw-enchantment element which has the supplied Changer applied to it. As an example the following TwineScript:

(enchant: ?Link, (colour: '#006633'))
[[Next->Next Passage]]

... generates HTML elements like the following:

<tw-expression type="macro" name="link-goto">
	<tw-enchantment style="color: rgb(0, 102, 51);">
		<tw-link tabindex="0" passage-name="Next Passage" data-raw="">Next</tw-link>
	</tw-enchantment>
</tw-expression>

... so the styling is applied to the parent element of the actual tw-link element it is trying to effect.

2. The default CSS based colour of the different types of links are applied directly to the tw-link element and the .enchantment-link CSS class which make up the HTML representation of the link.

tw-link, .enchantment-link {
	color: #4169E1;
}

 

So to modify the CSS color of links effected by an (enchant:) macro you need to change the default CSS color of the related tw-link element and the .enchantment-link CSS class so that it inherits the colour of its parent element. This can be done by placing CSS like the following within your story's Story Stylesheet area.

tw-enchantment > tw-link, tw-enchantment > .enchantment-link {
	color: inherit;
}

 

Comments

Thanks, greyelf. I was hoping this was something that could be fixed by CSS rather than passage by passage. 

Here's my current link-related CSS:

tw-link {
color: #0000cc;
font-weight: normal;
text-decoration: underline; 
}

.enchantment-link {
color: #006633;
font-weight: normal;
text-decoration: underline;
}

(It's basically the same for visited, hover, active, but you get the idea.) And here is my footer div CSS:

.footer {
	font-family: Times;
	font-size: 12px;
	text-align: right;
}

ETA: Mind you, I can change the text color using the footer div, and I can change the (external) link color, but not the color of twine links. That's what brought me to use enchant in the first place

 

I put your suggested CSS in the style sheet, but it didn't seem to have any effect. Should I be doing something specifically to/within the footer div instead?

---

Okay, I found a big part of the problem. I was sure I was using Harlowe 2.0.1, but when I checked, I was actually in Harlowe 1.2.4, where the "enchant" macro doesn't exist. That explains the error I was getting.

Changing to 2.0.1 fixes some of the problem, but breaks other stuff...so now I have to go back to the drawing board.

---

The four built-in ways to create links in Harlowe produce slightly different HTML output depending on which series of (1.x or 2.x) use are using, this can effect the CSS required to style them. So assuming your TwineScript looks something like the following:

''Internal Link Types:''

[[1. Markup based->Second]]

(link-goto: "2. Link-goto macro based", "Second")

(link: "3. Link macro with goto macor based")[(go-to: "Second")]

|link>[4. Named hook with click macro and goto macro based]\
(click: ?link)[(go-to: "Second")]

 

The 1.x series generates HTML elements like the following for the above links:

<tw-expression type="macro" name="link-goto">
	<tw-link tabindex="0" passage-name="Second" data-raw="">1. Markup based</tw-link>
</tw-expression>

<tw-expression type="macro" name="link-goto">
	<tw-link tabindex="0" passage-name="Second" data-raw="">2. Link-goto macro based</tw-link>
</tw-expression>

<tw-expression type="macro" name="link"></tw-expression>
<tw-hook>
	<tw-link tabindex="0" data-raw="">3. Link macro with goto macor based</tw-link>
</tw-hook>

<tw-enchantment class="link enchantment-link" tabindex="0">
	<tw-hook name="link">4. Named hook with click macro and goto macro based</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click" class="false"></tw-expression>
<tw-hook></tw-hook>

... as you can see types 1 & 2 produce exactly the same elements and are tw-link based, types 3 & 4 are both tw-hook based but their structures are different, and only type 4 uses the enchantment-link CSS class.

The 2.x series generates HTML elements like the following for the above links:

<tw-expression type="macro" name="link-goto">
	<tw-enchantment tabindex="0" class="link enchantment-link">
		<tw-link tabindex="0" passage-name="Second" data-raw="">1. Markup based</tw-link>
	</tw-enchantment>
</tw-expression>

<tw-expression type="macro" name="link-goto">
	<tw-enchantment tabindex="0" class="link enchantment-link">
		<tw-link tabindex="0" passage-name="Second" data-raw="">2. Link-goto macro based</tw-link>
	</tw-enchantment>
</tw-expression>

<tw-expression type="macro" name="link"></tw-expression>
<tw-hook>
	<tw-enchantment tabindex="0" class="link enchantment-link">
		<tw-link tabindex="0" data-raw="">3. Link macro with goto macor based</tw-link>
	</tw-enchantment>
</tw-hook>

<tw-enchantment tabindex="0" class="link enchantment-link">
	<tw-hook name="link">4. Named hook with click macro and goto macro based</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click"></tw-expression>
<tw-hook></tw-hook>

... the first thing you will notice is that the structures of the 1,2 & 3 types has changed to now include a tw-enchantment element like that used in the type 4 links, so now all four link types may be effected by CSS targeting the enchantment-link CSS class.
The structure of the type 4 link is currently the same in both series of Harlowe.

You may need to take the relevant HTML structures into consideration when designing the CSS for your story.