Work Text:
So, you want to learn how to make a workskin for interactive fiction?
Well, here's one place you can start!
(And here's another that inspired me to make this tutorial, in case you don't like how this one's formatted. I referenced this code to achieve this style of story.)
This tutorial will assume you know the very basics of how to use HTML and CSS on AO3. If not, I highly recommend this resource, as well as w3schools.com for HTML reference, and this resource on how to create workskins and CSS on AO3.
Got all that?
Cool! I'll continue on with the tutorial then.
To create a workskin like the one I have for this tutorial, you'll need the following setup:
#workskin .text-container {
display: none;
}
#workskin a:target ~ .text-container {
display: block;
}
#workskin .par {
margin-bottom: 18px;
display: inline-block;
}
And that's about it, unless you want to get fancy with it. For the purposes of this tutorial/chapter, I'll stick with the smallest amount of code for this to work.
Learn about what "text-container" does
Learn about "display: none;", "display: block;" and "display: inline-block;"
Learn about what "a:target" does
Learn about what "~" does
<div>
<a id="link1" name="link1" rel="nofollow"></a>
<span class="text-container"><span class="par">Your text goes here.</span><br>
<span class="par">Your second paragraph goes here. Any text you'd like to share?</span><br>
<span class="par"><a href="#link2" rel="nofollow">And the link text goes here</a></span>
</span>
</div>
Copy paste this section of code, over and over, until you have enough for your fic! Make sure to reference the structure of the "par" paragraphs, and replace the bolded text.
Some questions for troubleshooting, that I ran into when creating my last piece of interactive fiction:
Where do I put the hashtags?
Why does AO3 need both "id" and "name"?
Why are my links not working?
The css in your workskin,
#workskin .text-container { display: none; }
communicates with the html in your fic,
<span class="text-container"> </span>
to hide the rest of your fic until a link is clicked. Since they both have the class "text-container" attached to them, they communicate with each other. Without this declaired, your fic wouldn't work as intended.
Further reading
Go back
To keep it simple, when the display property is set to "block", it will show your text. When set to "none", it will hide it. The "inline-block" text will appear inside your text container, as long as you haven't forgotten to close your span tag!
Further reading
Go back
As w3schools puts it, "An URL with an #, followed by an anchor name, links to a specific element within the document. The element being linked to is the target element."
See the url on your device right now? It has a hashtag, followed by the name "target". That's what this quote is referring to!
Therefore, "a:target ~ .text-container { display: block; }" is taking the anchor link you've clicked on, and showing the class for the related id and/or name.
Further reading
Go back
Honestly, this one's difficult to explain in words, so I'll link a visual example here. In this example, after the div tag is closed, each p tag is highlighted with yellow.
For this tutorial, we're taking the anchor link, and seeing if a "text-container" comes after it. If it's written like that, then it will show up, due to "display: block;".
Go back
Hashtags for href, none for name and id!
Go back
I'm honestly not sure why this is the case, but it's the most foolproof to have both in my experience.
Go back
Make sure you have the right type of quotes! "", NOT “”.
If that doesn't help, try looking through the other troubleshooting guides regarding hashtags as well as id and name attributes.
Go back
Your text goes here.
Your second paragraph goes here... hey wait, we've been here before.
Congrats on finding the easter egg!
Let's go back.