Howdy, Stranger!

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

Combining 2 or more Twine text Macros

I want a specific word to be red AND flash while using the twine macros (text-color:) and (text-style:). Any ideas, guys?

Comments

  • NOTE: As explained in the Usability and accessibility section of the wikipedia article on the old HTML Blink element, continuous blinking text is generally considered a bad thing when it comes to Accessibility.

    You need to state the name and full version number of the Story Format you are using, as answers can be different for each one. Based on the syntax of your example I will assume you are using Harlowe, I will also assume you are using the default version of v1.2.4

    The following does what you asked using those two macros.
    (set: $warning to (text-color: 'red') + (text-style: 'blink'))
    
    The following should be $warning[red and flashing]
    
    ... although there are 2 main issues with doing it that way.


    1. The animation based CSS generated by that code may not work in all web-browsers.
    <tw-hook style="color: red; animation: fade-in-out 1s steps(1, end) infinite alternate;">red and flashing</tw-hook>
    


    2. You have no (easy) way to control the speed of the blinking.

    The Blink element article I linked to contains an example in the Implementation section of how to archive a similar effect using CSS. The Harlowe equivalent would look something like the following, which needs to be placed in your story's Story Stylesheet area.
    tw-hook[name="warning"] {
    	color: red;
    
    	-webkit-animation: blink 1s step-end infinite;
    	-moz-animation: blink 1s step-end infinite;
    	-o-animation: blink 1s step-end infinite;
    	animation: blink 1s step-end infinite;
    }
    
    @-webkit-keyframes blink {
    	67% { opacity: 0 }
    }
    
    @-moz-keyframes blink {
    	67% { opacity: 0 }
    }
    
    @-o-keyframes blink {
    	67% { opacity: 0 }
    }
    
    @keyframes blink {
    	67% { opacity: 0 }
    }
    
    ... and you would use code like the following in your Passage to invoke it:
    The following should be |warning>[red and flashing]
    
Sign In or Register to comment.