A common question that regularly gets asked about Harlowe is "How do I use Passage Tags to style Individual Passages"
, the following is one possible solution to this question.
note: The following assumes that you are using the version of Harlowe that comes with Twine 2.0.8, it should work on later versions of Harlowe as long as features like the special header
tag and (passage:)'s tags
Although Harlowe allows an Author to access a Passage's Tags via (passage:)'s tags
it currently does nothing with them, except in the case of the special startup / header / footer tags (and the hidden debug-startup / debug-header / debug-footer tags).
The following code takes any Passage Tags you assign to a Passage and adds them as CSS class attributes of the html element of the story, this then allows an Author to use CSS selectors based on those tags/classes to style individual passages.
The following should be added at the start of your story's header
tagged passage. If you don't already have one then first create a new Passage (it's name is not important but I name mine Header
for convenience) and then add the special header
tag to the new passage.
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
You can now use CSS like the following to style individual passages.
note: the following assumes I have given one passage in a story a desert
tag and another passage a forest
I have attached a copy of an story archive which contains examples of the above code in action. You can use Twine 2's Import From File
option to import it.