Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe - How to change type-styles with variable and if statements?

Hi there, just started with Harlowe Twine2 but am having some difficulty changing the text-style of passages when a variable reaches a certain value.

I want to make it so that when the player has a certain number of drinks, the passage text is blurry. I tried using both blurry and blurrier, but only blurrier works.
Here is what I have in my passage:

(if: $drinkcount is 5)[(text-style: "blurrier")[
So many options to choose from. Which do you choose? ]](else:)[ So many options to choose from. Which do you choose?]

Since it's an if statement, it's only showing up when $drinkcount is at 5. Is there an easier way to do this?


  • If you want to change the text of all passages viewed while $drinkcount is 5 then you could use a technique similar that in the Basic Harlowe Passage Tag Based Styling thread, that being using a class on the html element to indicate when the players is drunk/sober and using CSS to style the passage text.

    1. Change the header tagged passage in the linked thead's example to the following:
    (if: $drinkcount is 5)[<script>$('html').addClass('drunk');</script>]}
    note: Using a header tagged passage requires the $drinkcount variable to be changed on the passage before the ones you want to see blurry. If you want to be able to see the passage in which the $drinkcount variable is changed as blurry then you will need to use a footer tagged passage instead.

    2. Change the CSS in the linked thead's example to the following, it is the same styling produced by the (text-style: "blurrier") macro:
    html.drunk tw-passage {
    	text-shadow: rgb(0, 0, 0) 0em 0em 0.2em;
    	-webkit-user-select: none;
    	color: transparent;
    3. If you don't want to use a header/footer tagged passage then you could use the code from point 1 with an (if:) macro whenever you change the value of $drinkcount like so:
    (set: $drinkcount to it + 1)
    (if: $drinkcount is 5)[<script>$('html').addClass('drunk');</script>]
    (set: $drinkcount to it - 1)
    (if: $drinkcount < 5)[<script>$('html').removeClass('drunk');</script>]
    ... you still need the CSS in point 2.
Sign In or Register to comment.