Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 1 of "No Fandom" -- AO3 and HTML editing guide(s)
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks
Stats:
Published:
2013-09-03
Updated:
2015-01-26
Words:
1,769
Chapters:
3/4
Comments:
42
Kudos:
223
Bookmarks:
251
Hits:
19,264

Quick and Dirty HTML Reference for AO3

Summary:

Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.

Chapter Text

Begin test.

Testing preformatting
stuff   like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than    one space:)

Also note that "pre" does NOT have to go within a set of <p></p> (it seems to get removed).

and then trying to test <a thing> here <and here> as well.

<p>and then trying to test <a thing> here <and here> as well.</p>

and then trying to test <a thing> here <and here> as well.
<pre>and then trying to test &lt;a thing&gt; here &60;and here&#62; as well.</pre>

&lt; OR &#60; is a < (and #60 gets converted to lt)
&gt; OR &#62; is a > (and #62 gets converted to gt)
& is a &amp;

Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.

<p align="center">
  <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg"></a>
  <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>

does this:

Photobucket

See these pages for more info:
Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119
Sliding Doors -- http://archiveofourown.org/works/149319?style=disable
Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92
HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp
HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp
HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp

Done with test.

Chapter 2

Summary:

Rewritten version of the "first chapter" of my brief notes on editing under AO3. Ignore this if you're subscribed to my fanfic.

Chapter Text

Begin test with a <hr /> :


That short line is absolutely pitiful, though, and AO3 doesn't seem to support "width" arguments for hr at all. *frown*

Sooooooooo...

Long line via strikeout or delete.

The code:

<p>
<strike>-----------------------------------------------------------------------------------------</strike>
<del>-----------------------------------------------------------------------------------------</del>
</p>

looks like:

----------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------

...which is marginally better, at least.

We can center it, too:

<p align=center>
<strike>-----------------------------------------------------------------------------------------</strike>
<del>-----------------------------------------------------------------------------------------</del>
</p>

looks like:

----------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------

And to go full-width for the default AO3 template, we do:

<p align=center>
<strike>-------------------------------------------------------------------------------------------------------------------------</strike>
<del>-------------------------------------------------------------------------------------------------------------------------</del>
</p>

which looks like:

------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------

Long line via headings h3 and h6.

We can also cheat via some of the heading types (a.k.a. heading h3 and h6).

The code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

looks like:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Note that there is no h7 or h8 defined in AO3.

Take advantage of this via:

<h3> </h3>
<h6> </h6>

which looks like:

Much cleaner, no? :)

Some table HTML that doesn't work on AO3 but would work elsewhere.

AO3 doesn't do background color in tables, but if it did, you could use the following html to get a thin black rectangular block across the entire screen:

<table style="width:100%" bgcolor=#000000>
  <tr>
    <td></td>
  </tr>
</table>

You can try out this (or any other) html code here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table.

And now another three <hr /> 's to separate things out! :)




Preformatting (pre) blocks and inline "code".

The code:

<p>
  <code>
<pre>Testing preformatting
stuff   like
this. is within a "pre" (&lt;pre&gt;&lt;/pre&gt;)
and does not need &lt;br/&gt; stuff in there to go down a line
or to keep spacing more than    one space:)</pre>
  </code>
</p>

looks like:

Testing preformatting
stuff   like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than    one space:)

The code:

<pre>Testing preformatting
stuff   like
this. is within a "pre" (&lt;pre&gt;&lt;/pre&gt;)
and does not need &lt;br/&gt; stuff in there to go down a line
or to keep spacing more than    one space:)</pre>

<p>Also note that <code>pre</code> does NOT have to go within a set of &lt;p&gt;&lt;/p&gt; like <code>code</code> does (it seems to get removed).</p>

looks like:

Testing preformatting
stuff   like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than    one space:)

Also note that pre does NOT have to go within a set of <p></p> like code does (it seems to get removed).

Testing &lt; and &gt;

You may be wondering by this point why, exactly, I'm using these "&lt;" and "&gt;" things. Well, they show those special characters < and > explicitly in the text (and they're "special" in that they're used to start and end html tags ...which means that trying to write them directly in your HTML when you want to show them as symbols in your text will cause formatting problems, no? :) --Here, explicitly, is an example of how you do it.

The code:

<p>and then trying to test &lt;a thing&gt; here &lt;and here&gt; as well.</p>

looks like:

and then trying to test <a thing> here <and here> as well.

The code:

<pre>and then trying to test &lt;a thing&gt; here &60;and here&#62; as well.</pre>

looks like:

and then trying to test <a thing> here <and here> as well.


Characters to write in the HTML edit box for things to work correctly.

&lt; OR &#60; gives a < in-text (and the #60 part gets converted to lt by AO3 once the document's HTML text has been saved).
&gt; OR &#62; gives a > in-text (and the #62 part gets converted to gt by AO3 once the document's HTML text has been saved).
&amp; gives a & in-text (thus &amp;lt; gives a &lt; in-text and &amp;gt; gives a &gt; in-text).

Paragraphs, paragraph alignment, embedding an image, breaks

Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.

Embedding images (explicit example).

The code:

<p align="center">
  <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg"></a>
  <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>

does this:

Photobucket

Reference links.

See these pages for more info:
Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119
Sliding Doors -- http://archiveofourown.org/works/149319?style=disable
Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92
Technical Questions FAQ | What HTML can I use on the archive? -- http://archiveofourown.org/faq/technical-questions?language_id=en
Skins and Archive Interface FAQ -- http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en
Show Skin | Archive 2.0 Skin (Default Skin) -- http://archiveofourown.org/skins/873
HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp
HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp
HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp

Done with test. Let's end with a final <hr /> ...


Chapter 3

Summary:

More lunatic "editing under AO3" notes-stuff. Ignore this if you're subscribed to my fanfic.

Chapter Text

In the process of trying to figure out if there's a good way to do "spoiler" text (and/or hidden or hide-able text) without making a CSS stylesheet. Meh.

Roll over mouse with popup text boxes

The code:

<p>
<a title="Here is the text, not a clickable link without an 'href' inside the 'a' tag...">Roll mouse over "link" for popup text</a>
</p>

looks like:

Roll mouse over "link" for popup text

The code:

<p>
Roll mouse over symbol for popup text<a class="help symbol question modal" title="Here is the text, which is clickable (oddly) but doesn't seem to navigate anywhere. Clicking again anywhere gets you out of the greyscreen.">
<span class="symbol question">
<span>?</span></span></a>
</p>

looks like:

Roll mouse over symbol for popup text ?

The code:

<p>Roll mouse over symbol for popup text as before:<br />
Spoiler alert<a class="symbol question" title="Here is the text, not a clickable link without an 'href' inside the 'a' tag...">
<span class="symbol exclamation"><span>!</span></span></a>
</p>

looks like:

Roll mouse over symbol for popup text as before:
Spoiler alert !

Both this code:

<p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p>
<p><span class="symbol exclamation"><span>!</span></span>
<a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called &#34;spoiler&#34;...
So let's show you how a multi-line spoiler is done this time!
Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a>
<span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
</p>

and this code:

<p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p>
<p><span class="symbol exclamation"><span>!</span></span>
<a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called &#34;spoiler&#34;...&#10;So let's show you how a multi-line spoiler is done this time!&#10;Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a>
<span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
</p>

looks like:

Roll mouse over text -- not symbol(s) -- for popup text this time:

! SPOILERS WITHIN! ! <-- Only mouse-over this text if you are dying to know what awaits you!

The code:

<p><span class="symbol exclamation"><span>!</span></span>
<a title="Also note that the title does seem to do auto-wrap-around, when we have super-super-super-super-super-super-super-super long sentences going on, thank goodness.
Here's another example. Or two. Or three. Of sentence stops. Or four! Or five? Or... six. seven. Eight. Notice how the text doesn't do a full-stop until the written line ends :)
We can, however, force
lines down more quickly if 
we want to,
if and when
we
have
run-on
sentences! :)"><b>SPOILERS WITHIN!</b></a>
<span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
</p>

looks like:

! SPOILERS WITHIN! ! <-- Only mouse-over this text if you are dying to know what awaits you!

Attempts to use default CSS options via <span class="">

The code:

<p>
  <span class="white">
<span>test text is not white, sigh</span></span>
</p>

looks like:

test text is not white, sigh

The code:

<p>
  <span class="hidden">
<span>test text hidden</span></span>
</p>

looks like:

From the Sliding Doors example, actual CSS changes to the #workskin:

The code:

/* SPECIAL CASES */

#workskin .spoiler {
   background: #333;
   color: #333;
}

<p>
<span class="spoiler" title="This is a warning that is also a spoiler. Highlight to read.">You just totally spoiled yourself, dude.</span>
</p>

looks like:

You just totally spoiled yourself, dude.

Series this work belongs to: