fact file: formatting fan fiction

How to add formatting to your Fan Fiction

If you want to make your fan fics colourful and easier to read, see below for step-by-step instructions on how to do it.

I have provided example basic work skins at the bottom of this article. I will provide simple step-by-step instructions on how to customise and apply them.

If you want something more complicated, I will provide some of that too.

In the instructions below, I’m going to work on my existing fics, but you can apply work skins to both new fics and existing fics. I’ll explain the (tiny) difference.

Background

When we put so much heart and soul into writing a good fanfic there is nothing more frustrating than losing all the formatting when you upload the finished article to AO3. No matter how well you write the story in Word, Google Docs or other editors, indents can disappear or be applied randomly throughout as soon as the AO3 editor gets hold of the text.

To make fics look pretty and easier to read, AO3 provides the ability to add “Work Skins” to your work.. Yet, this requires an understanding of CSS and html. Great if you are a developer, not so easy to understand if your background is less technical. Since the AO3 help files are not particularly easy to read either, this puts Work Skins beyond the scope of many writers…

…or does it?

Applying a Work Skin to your work is actually reasonably easy. All you need is a basic version of a Work Skin and some decent instructions.

Hopefully, this article will explain how to add AO3 work skin formatting to your work in a sensible way.

Terminology

AO3: Work Skin versus Site Skin?

When you select ‘skins’ on AO3, you will see two types: “site skins” and “work skins”. What is the difference?

Site Skin

A “site skin” changes the way your AO3 dashboard looks for you – and only you!

If you are interested in changing the way your own dashboard and screen looks, follow the instructions here to customise a Site Skin.

Work Skin

If you want to make your fic easier for everyone to read, you need a Work Skin.

A “work skin” changes the way your fics look for every reader. The reader can turn off your work skin, but the default is for your work to appear with the formatting you set.

This article covers how to format a workskin.

What exactly is a Work Skin?

At its simplest, a work skin is a file containing some extra formatting codes which wrap around your text. They could be codes to indent the first word of each paragraph, surround the whole text with a box, or transform the page using colours.

Or a combination of all three – and more!

Once you have put the skin in place on your fics, you can make changes centrally without needing to go into each chapter or each fic to tweak the style. You can also have multiple skins and give each fic its own ‘look’.

You may see AO3 reference “public work skins”. These work skins are ones which have been approved and are visible to everyone to use.

Unfortunately, AO3 has stopped allowing people to create official public skins, so they are few and far between. In general, the public work skins which do exist relate to specific fandoms. In many cases, they have not been particularly well written – and their creators do not annotate them to explain exactly what the code is doing.

This article will aim to give you some work skins that you can understand and change to suit your own tastes!

Formatting Your Stories

Step One: Write the Fic!

Of course you need to write the fic, but I’m including this step so you know how to prepare the fic for the skin.

Write

Skins can be applied to fics regardless of the word processing app you used. Write the story the way you feel comfortable, but do not worry too much about indentation and layout. AO3 will most likely strip your text of that type of formatting when you upload it.

DO include bold and italics, however, and if you need breaks in the text, use something like 00000000 to highlight where you want to put a dividing line at a later stage. Similarly, if you plan to add an image to the story, leave a clear marker.

Save

Make sure you save the fic in your word processing app. You do not want to lose your hard work while you change the AO3 background colour etc.

Upload

When it comes to uploading the text of the fic, I find the easiest way is to open the document, select all the text, then copy and paste into the AO3 text box. More on that later.

Step Two: Create a Work Skin

Don’t panic! We are going to create a simple work skin. So long as you can copy and paste, you’ve got this!

Create a New Work Skin

Go to your AO3 Dashboard and look at the left hand side of the screen.

From the top right, select **Create Work Skin**

Put “ABCTEST” in the Title field to name the new Work Skin, where ABC is your name.

Add the Code

Using the instructions below, we are going to copy and paste my code into your CSS box to create a basic workskin.

When you do, leave a line between each group of code so that it looks a bit like this.

In the following instructions, the text you need to highlight, copy and paste is coloured YELLOW.

The GREEN text explains the code’s function. You don’t need to copy this into the box, but if you do, the CSS box will ignore it and delete it.

Pay attention to symbols such as “#”, “{” and “;”. Missing these out will stop the CSS box from understanding your code. The /* and */ symbols around the green text tells the CSS box that it can ignore that text.

/* This code draws a basic box around your story text. It gives it a solid border of 1 pixel width. The font size is 110% of the default font (this is what 1.1em means). The font is set to Verdana, cursive and sans-serif. If you don’t know a lot about fonts, this is a nice clear font – recommended for clarity – and without any twiddly bits (serifs).*/

#workskin .PageBox1 {

border: 1px solid;

font-size: 1.1em;

font-family: “Verdana”, cursive, sans-serif;

}

/* This code colours the paper on which your fic is displayed. Most of the time on AO3, you see this as white with no differentiation from the surrounding screen. Adding this code will help you separate it out and add formatting so that it is easy to read. This code also deals with the spacing (“padding”) around the edges and indents the first line of each paragraph. I have called this paperCream2 because the paper colour is cream. In this instance, I have chosen to make it a graduated cream colour rather than solid cream. It has a gradient of three shades of cream. */

#workskin .paperCream2 {

position: relative;

margin: none;

background: linear-gradient(#F7EEE1, #F0E0C9, #F7EEE1);

padding: 5% 5% 5% 5%;

text-indent: 6%;

}

/* If I wanted the paper to be pale yellow, the coding might look like this. #FAF5A2 is a pale yellow colour*/

#workskin .paperYellow {

position: relative;

margin: none;

background: #FAF5A2;

padding: 5% 5% 5% 5%;

text-indent: 6%;

}

/* You will notice the colours I’ve mentioned are in hexadecimal. This is a combination of letters and numbers that refer to a universal colour shade. We will talk about this later. You will also notice that the padding value is given in percentages. This is to ensure the display works as well on a phone as it does on a desktop.*/

Here is my version of the CSS box. Yours should look similar.

Now click the Submit button on the bottom right of the screen. You should get a confirmation message and your code should look like this:

Congratulations! You’ve just created your first Work Skin!

Step Three: Telling your fic to use the skin

This is BY FAR the easiest step of the whole process!

If this is an existing fic:

Go to your fic and click on the main Edit button at the top of the screen.

Scroll down to the Associations box

Under ‘Select work skin’, pick ABCTEST (Your new workskin) from the drop down menu.

Scroll to the bottom of the screen and click “Post”

If this is a new fic:

You should go through the stages of posting your new work as usual, including filling out the ‘Post New Work screen’, but follow the step above for the Associations box. (That is the tiny difference between existing and new fics which I mentioned at the start!).

Step Four: Applying Specific Formatting from the skin.

You have created a work skin and told the fic to look at that information when applying formatting. The work skin can contain multiple definitions for the same thing, however, so you now need to specify which definitions to use.

For example, we defined two colours of paper – one graduated cream and one yellow. We need to say which one we want applied to this exact fic.

You will need to do this step for EVERY individual chapter of the fic. Although frustrating, this also means that you can format each chapter differently if you so wish.

Below is the first page of my fic. Currently, it is unformatted and displayed on the standard white screen. I want it to look like it is printed on cream paper. I will need to add a frame around it, re-align the text and choose the graduated cream version of the paper.

Here is how I will do it:

You will already be familiar with this box when you post new chapters.

It’s time to check you are happy with the existing formatting.

Click on the Rich Text button on the right hand side.

The text is much easier to read with the Rich Text version of the box. You can see formatting such as BOLD and ITALICS.

Check the basic formatting is correct

Take this opportunity to go through the text and check this formatting is correct. Don’t worry too much about indents, but do make sure you are happy with the paragraphs.

Add any section lines

If you added “0000000” when writing the fic as a reminder to insert a section line, go through your text and replace the place marker (eg 000000) with a line using the option on the toolbar. (Later, we will use this stage to add pictures).

Switch back to the HTML Screen

When you are happy with the basic formatting, click the HTML button to switch to the HTML edit screen.

Get the order and layout right

It’s important to note that the order of the codelines you are about to insert is critical. If you place formatting instructions in the middle of your text, it won’t apply to text which comes before it.

Inserting code mid-chapter

Here a set of code has been put in the middle of the story rather than at the beginning of the chapter.

Here is the result. The page formatting begins at the point where the code was inserted rather than at the beginning of the chapter.

Inserting the code at the beginning

Here the same code to format the paper comes **before** the Story starts. But you will notice that there is still extra code before it. This is because I’ve chosen to format the chapter headings differently to the body of the chapter text.

Here all the formatting is listed at the top of the chapter, before the main body of the text.

Add the extra code

Check you are at the top of your fic’s Chapter Text box and click in front of the very first letter or character that you have pasted into the box.

Press Enter to move all the text down by one line.

Now you need to type or paste in the following exactly as shown:

These should now appear as the first lines in the text box.

Scroll to the very bottom of the Chapter text box and type:

</div>

Why “</div>”?

/*The div class lines at the top are telling the AO3 system to go to the work skin and look for the instructions “letterBox” and the instructions “paperCream2”.

Then AO3 will apply those instructions to everything in the text box UNTIL it sees the instructions </div>, and then </div>. Think of div class and </div> as two sides of a pair of book ends, with your story in the middle. */

/* Once you are happy with what you have added, you can test your code.*/

Click on Preview at the bottom right of the screen.