(Harlowe) Is there a way to create an option that would let readers turn off changes to font style?

Comments

• Khaloodxp

  September 2016 edited September 2016

  simple create an if function, make a button which when pressed on will set a value to a number, then create an if for you font which without the button pressed will remain the same and if you press the button is removed here is a sample example:

  (if: $WG is 0)[(font: "Century Gothic")[hi I like apples]] (else:)[hi I like apples]
  (link:"turn off font")[(set: $WG to 1)(go-to:"example")]
  (link:"turn on font")[(set: $WG to 0)(go-to:"example")] 
  

  this example works perfectly, just replace example with the name of the passage,
  though this isn't a general change and must be pasted to every passage
• greyelf

  September 2016

  You could control if the fancy fonts are on/off by using some Javascript to add/remove a CSS class name to/from the HTML tw-story element. You could then use CSS based on that class name to style the different dialogues.
  
  Harlowe uses a tw-story element to contain the side-bar and current passage text.
  
  1. Adding and Removing the "fancy-fonts" CSS class name.
  
  Add two links like the following somewhere in your story, the first add the CSS class name to the st-story element and the second removes it.

  (link-repeat: "Fancy Fonts")[<script>$('tw-story').addClass('fancy-fonts');</script>]
  (link-repeat: "Normal Fonts")[<script>$('tw-story').removeClass('fancy-fonts');</script>]
  

  
  2. Styling the dialogue, this part of the solution is broken into two smaller parts:
  
  2a. Using markup to distinguish the different characters.
  
  You could use a specific named hook for each character's dialogue like so:

  Some descriptive text.
  
  |computer>[I am a computer]
  |giant>[I am a giant!]
  

  
  2b. Using CSS based on the markup in point 2a to style the dialogue.
  
  The following example just changes the font colours for the overall story as well as the computer and giant dialogue, you could just as easily change the font-family or anything else you wish to. The CSS should be placed within your story's Story Stylesheet area.

  /* Start of Default style information. */
  tw-story {
  }
  
  /* Start of Fanvy Fonts style information. */
  tw-story.fancy-fonts {
  	color: lightgreen;
  }
  /* style for computer */
  tw-story.fancy-fonts tw-hook[name="computer"] {
  	color: orange;
  }
  /* style for giant */
  tw-story.fancy-fonts tw-hook[name="giant"] {
  	color: brown;
  }