Archive of Our Own ^beta

Chapter Text

When you start to write a text you can choose between "Rich Text" and "HTML". The first is like your normal writing program, with the other option, you can control the optics way better. So this guide has some tips on how to use HTML and in later chapters CSS.

My personal favorite:

Text justify (Blocksatz). I need it to write all fanfiction since text simply has to be in this style (university destroyed my aesthetics). You'll only see it if the text is long enough to fill more than one line of this page. Then you'll see that this text neatly aligns with both sides of the page. That's usually used for research papers and books, but I think "dream big" ;) If you don't use this then the text will automatically align to the left side. You can make this with using Skins, too, but these can be deactivated by the readers or might work against their Site Skins, as far as I understood. So I rather use this. Copy and Paste is your friend!
written like this: <p align="justify">Text</p>

This is the code for right-aligned text but who needs this anyway?
written like this: <p align="right">Text</p>

Text in the center (for headlines for example. I like to use it together with a short underline)
written like this: <p align="center">Text</p>

this code opens a paragraph (basically everything starts with this). And it needs to be closed, as well.
written like this: <p>Text</p>

line breaks are very important, too. Usually always usable (within paragraphs for example) since it does not need to be closed.
written like this: <br />

I usually use italic for foreign words or sentences. Or to emphasize certain words. (Btw: <br /> ends the bold or italic-section automatically, so you need it more than once if you have a larger paragraph in italic)
written like this: <em>Text</em> or like that: <i>Text</i>

text in bold
written like this: <strong>Text</strong>

I never thought I needed it, but apparently, that's the case now. So here text that someone tried to delete.
written like this: <strike>Text</strike>

Text in big and in small is possible as well without changing much.
written like this: <big>Text</big>
written like this: <small>Text</small>

this makes a special style of text (otherwise you have to create a Work Skin. That's probably better anyway)
written like this: <tt>Text</tt>

funny thing: if you don't close <tt>, but use it a couple of times the text will get smaller and smaller and that's very funny, like someone vanishing in the background.

This is a test for Work Skins (and it works). It's complicated and simple at the same time. There is a "A Step-by-Step Guide to Work Skins" made by the archive for further information. (And I am happy that links work within using skins, too!)

On how to create links, look at the third chapter. For further explanation about font and Work Skins, look at Chapter 4.

written like this: <p class="textmono">Text</p>
and "textmono" is the name I gave my Work Skin. With this you are able to use different fonts inside your fic, which is quite cool if you are a bit experimental. The problem is that others might see it differently depending on their settings, as far as I understood it. I don't see the same font on the computer and the mobile phone, too. More on this in other chapters.

Achtung: Work Skins and some HTML don't work when the story is downloaded! The reader will not be able to use or see a lot of the features. This first chapter with the Basics works best even if it is downloaded, so in that case "tt" is a good alternative for a different font. In the next chapter with the lines will only the first one be visible after the story is converted as a pdf.

Some interesting thing: If you want glitch text, there is a website that generates the HTML for you. More of this in Part Thirteen of this fic and in Part Fourteen is more about Text generators.
The website: Zalgotextgenerator

It looks like this:

h̵̨̡̟̟͈̟̜̣̣̺̎̽̇͑̏̾͡ę̩̗͍̰͓̬̝̞͗̽͊͑̈̂͘͜l̵͓̦̼͇͇͎̋̀͆̓̓͌͘͢l̴̺̥̥̗͓̘̰̦͌̓̇̓̉͗͗̊ö̸̝̙͈̗͈̻̙̇͊̿̓̑ t̵̠͍̥̬̫̙͖͉̽̃̽͆̎́͜ͅḩ̦̻̲̮̱̌̋̂͋͐̍̒͠ͅę̬̲̣̼͕̟̣͖̓̂̉̓͐̎͞͝r̷̝͇͇̯̣̍͛̈́̉̓̚͜͟ͅė̝͉̰̫̞̖͂͐͆̂̇͐̌

This changes the place of the text, ^{important for footnotes or dates}
written like this: ^Text

This, too._{I just can think of chemical formula where this could be used...} Like H₂O
written like this: _Text

Now I try to make spaces:     that is really strange...
they vanish as code in HTML, but stay in the fic
written like this: &nbsp;

In my experience, I need a lot of them if I want some fancy formatting. So Copy & Paste it is.