# Welcome to Twine ## Kenneth Sherwood ### Feb 2015 Demo This is a simple set of hypertext pages created, linked, and published using the browser-based tool <a href="http://twinery.org/2/#stories">Twine</a> (2.0). This tool allows for the easy creation of linked pages and can be a very fluid writing environment. One of its greatest virtues is the affordance of a visualization that allows for the author to see the network of pages being created. You have two approaches to [[Create Pages]]. Note that version 1 of Twine was very popular, and some online resources may refer to that version. Version 2 seems much more user friendly to me, but it is sufficiently new that some of the support resources have not been updated! [[Twine 2 caveats]]. ### When you have learned how to create a basic page, you may want to think about: * [[The Map]] * [[Style and Customization]] * [[Additional Resources]] ## Create Pages When you are editing a text block, one way to create a new page is to simply create a hot-link by enclosing a word or phrase within double square brackets. **Method 01** Typing : `[[Page 02 ]]` would create a new page called 'Page 02' **Method 02** Click on the // + Passage // link at the bottom of your editing screen. It's green. The first method is preferable to create links on the fly, while writing. Or if you want to spin off several empty spaces for further writing. The second method is preferable if you want to create a page but aren't sure where to link it from yet. Remember that if you don't link a page (i.e. if it's kept an orphan), then readers won't be able to access it when you publish. It will effectively be invisible. ### A Note on Linking Once `Page 02` has been created, you can write a link to it (`[[Page 02]]`) from any other pages. So long as there is no typo and you don't change the name of the page, all the links will function. So, for instance, in this site, it might be a good idea for me to conclude pages: [[home]] The appearance of Twine pages is governed by a built in stylesheet. You don't want to build a new one from scratch; it's very complicated. But you can customize the appearance of the html elements by adding select CSS code. Remember that Twine hypertexts are mostly about form. If you're really focussed on the visual, this is the wrong tool. However, some simple changes can make your hypertext more individual and more expressive. * <a href="http://www.w3schools.com/css/">Review some CSS here</a> * The [[customized style codes]] for this twine page.Not all HTML will work in Twine. However, here are a few things you might want to do which are simply easier to accomplish by pasting it the necessary HTML. ### Link to an external page Code to paste: `<a href="http://www.google.com"> Link to Google</a>` Effect: <a href="http://www.google.com"> Link to Google</a> ### Include an image Code to paste: ` <img src="http://www.iup.edu/uploadedImages/Units/E/English/Personnel/ken-classroom-web.jpg" />` <img src="http://www.iup.edu/uploadedImages/Units/E/English/Personnel/ken-classroom-web.jpg" /> Note that for this to function properly the image but be online, and so must your computer! You can host images on your IUP website if you like. ## Twine One and Twine Two Twine 2 is a dramatic rewrite of the basic Twine codebase. I find it *much* easier to use. However, it does mean that some of the reference resources are outdated. If you google Twine help and the advice doesn't work, it might not be you. ## Archive Twine 2 is so easy, you might forget you are using a program. Remember to *archive* often, so that you can open it or recover from mistakes. Note too that you *must use the archive* if you want to reopen files on a different browser.This is just a sample. Return to [[Create Pages]] This is just a sample Return to [[Create Pages]]` /* base font for all body passages */ tw-passage { font-family: 'Sigmar One', cursive; font-size: 22px; } /* style for headings. Fonts may work differently depending on what's installed on the computer */ h2 { margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: 'Ultra', sans-serif; font-size: 42px; line-height: 42px; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; } h3 { font-size: 20px; line-height: 40px; font-family: 'Sigmar One', cursive; color: gray; } `In this example there might be a good deal of text. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. At the end, you would click to advance. [[linear pages02]]In this example, we have something to read. We process and digest. We process and digest. We process and digest. And then we must choose: [[decision tree page02a]] or [[decision tree page 02b]]An internally woven page may have lots of [[links-->wove01]]. Some of [[them|wove02]] will be in the [[middle|wove03]] of sentences. In this style, the results of clicking on a link can be less <a href="http://www.thesaurus.com/browse/predictable">predictable</a> for the <a href="http://www.oceansbridge.com/paintings/artists/r/renoir-new-collection/big/The_Reader_(aka_Young_Woman_Reading_a_Book)__1875-1876.jpg">reader</a>. [[Links->wove05]] How you write such links and what expectations you generate are up to you. There are creative and rhetorical consequences to link styles. I want to go [[home]].This is Sherwood's idiosyncratic list, just to suggest different styles. There are endless variations. You might want to incorporate more than one or shift, smartly, between them. * [[linear pages]] <img src="linear.jpg" width="200"> * [[decision tree pages]] <img src="tree.jpg" width="200"> * [[internally woven pages]] <img src="weave.jpg" width="200"> In this example there might be a good deal of text. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. This is page 2 At the end, you would click to advance. [[linear pages03]]In this example there might be a good deal of text. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. This is page 3 At the end, you would click to advance. [[linear pages04]]In this example there might be a good deal of text. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. It would go on and on. This is page 4 Notice that there are not choices or divergences. And now that we have chosen decision page 02a. We can think about that. And now we have another choice [[Decision tree 03a]] or [[Decision tree 03b]]And now that we have chosen decision page 02b. We can think about that. And now we have another choice [[Decision tree 03d]] or [[Decision tree 03e]]Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.03 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 [[wove05]] 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 0303 [[wove04]]0303 0303 [[wove01]] 0303 0303 0303 0303 03 ### The Map Twine makes it easy for you to visualize the paths, connections, interconnections, and even orphaned pages in your web. Use the map and think about the reader experience. Where do you want to enable or constrain choice? Here are a few ways of thinking about what I like to call [[weaving styles]]. ### Style and Customization Since Twine outputs web pages, you can use some CSS styles to customize the look. You can learn more about how to apply a custom [[CSS Stylesheet]] to twine. While it is designed to be simple, Twine also allows you to incorporate some elements of [[HTML code]] directly. ## Additional Resources * <a href="http://twinery.org/wiki/twine2:guide">The Twine 2 Getting Started guide</a> * <a href="http://twine2.neocities.org/">Twine syntax guide.</a> 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too two 02 oh two 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02[[wove02]] 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 [[wove03]] 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too [[wove01]]02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 02 02 02 too 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 05 wove 04 04 04 04 IV 04 04 04 04 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV [[wove02]]04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 0404 04 04 04 IV 04 04 04 [[wove03]]