Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2022-05-29
Updated:
2023-01-04
Words:
4,699
Chapters:
7/?
Kudos:
19
Bookmarks:
16
Hits:
316

Tutorials and Experiments with Ao3 Coding

Summary:

Every other day I open up a new draft to figure out some formatting thing for a fic and then close it and do not share my discoveries or exploits with anyone. I've decided to just make those (or at least the "successful" ones) public for other people to use.

Notes:

Disclaimer: I am one person, my "tricks" are one person's thing, and this is emphatically not a "style guide." Use your discretion! Cut up and move around and play with my code to your heart's delight! Make something that looks good to you if you're not in love with what I made!

And feel free to share this link around, but all codes can be used with or without credit- I like do not care, this is a resource. This is not in any way "my own codes" or "proprietary" or anything, I did not invent HTML and I have not only 0 interest but also 0 right to demand you put a link in the byline of your fic or something even if you copy-pasted every single piece of code into your fic without changing anything.

I do not like work skins and all of these will work regardless of your work skins. Skins can make your work look better but also then people have to look at it in that skin or the formatting breaks. And I find it difficult to find work skins i like looking at. So these will let you not have to work with that.

Chapter 1: Introduction

Chapter Text

The format of this work is going to be relatively simple. First, the beginning section will have its formatting intact, displaying what the formatting would look like. This will just look like formatted text- aka, like this.

Then there will be a horizontal line, and below that point will be the same section, replicated but without intact formatting, displaying the HTML tags responsible for the formatted section. At the end of the day, it'll look like this- but with more interesting formatting. 


Formatting:

<p><b><big>Introductory Notes</b></big></p>

<p>The format of this work is going to be relatively simple. First, the beginning section will have its formatting intact, displaying what the formatting would look like. This will just look like formatted text- aka, like this. </p>

<p>Then there will be a horizontal line, and below that point will be the same section, replicated but without intact formatting, displaying the HTML tags responsible for the formatted section. At the end of the day, it'll look like this- but with more interesting formatting. </p>


Below that may be sections including examples (ie: showing how it could be used) or user notes (ie: if the code has to be worked with in particularly finnicky ways).

Some quick notes for content purposes: several HTML codes may be replicated in order to display shapes such as quotations, brackets, and similar non-text characters. A quick guide to the ones you're likely to see: 

< (less than) is &lt; 

> (greater than) is &gt; 

  (empty space) is &nbsp; (this can be useful for pre-paragraph indentation without fussing with HTML indents, as in the example below- this is "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" before a string of text
      sample text with "indent"
sample text without "indent"