Revision of Twine macro: << replace >>, << insert >> and << continue >> from Sat, 05/04/2013 - 23:50

Similar to my <<timedreplace>> macro, this macro creates an internal link that, when clicked, vanishes and is replaced with whatever is between the << replace >> and << endreplace >> tags. This could be useful if (just for starters) you want to have a passage that can be modified by clicking specific details inside it.

* You can also use <<insert>>, which is identical but does not remove the link text, instead merely changing it to a bare <span> (as with Jonah's <<choice>> macro.)
* You can use <<continue>> to make all subsequent text appear when it's clicked. It does not need an <<endcontinue>> at the end! Quite useful when you just need the reader to click to continue the passage.

Copy the code in here:

By default, the text instantly appears with no transition. You can give the replaced text a fade-in transition using this CSS:

.replacement.replacement-in {
	opacity: 0;
.replacement {
	transition: 1s;
	-webkit-transition: 1s;
(Feel free to customise this CSS to make your own transition style.)

Usage examples:
You see <<replace "a half-eaten cake">>a plate of crumbs<<endreplace>>
I find it <<insert "repugnant">>that he's made such comments<<endinsert>>.
You go outside. <<continue "Next.">>The sun blinds you momentarily.<<continue "Next.">>Has it been so long?

A short example program.
Hot hint: if you've got a lot of text, it's good to just put a single << display >> inside a << replace >>, and put the text in a separate passage.

Some notes:
* Code inside << replace >> tags is only executed when you click the link. You may notice that the "mailbox" link in the example program produces different text if you click the "front door" link first.
* New: If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by <<set >> or <<print>> macros inside a <<replace>> tag will be forgotten if you use the Back or Forward browser buttons. This means that if you put long-term variable changes that affect future passages inside one, you should disable the Back button.
* For those writing CSS: the <a> tag of the link has the class names "internalLink" and "replaceLink". It is immediately followed with a <div> tag with a class name of "replacement" and the style "display:none". Clicking the link removes the link, changes the span's display style to "inline", and toggles the "replacement-in" class, causing the CSS transition.

For a more powerful version of this macro, see <<revision>>.

Version history:
* 26-4-2013: Added << continue >> variant.
* 5-4-2013: Added << insert >> variant, scrolling.
* 7-3-2013: Added CSS hooks.
* 28-1-2013: Initial.
Feel free to report any bugs to @webbedspace.

TwineMacro-ReplaceTest.html186.33 KB
TwineMacros-Replace-1.3.0.txt3.41 KB