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 <a thing> here &60;and here> as well.</pre>
< OR < is a < (and #60 gets converted to lt)
> OR > is a > (and #62 gets converted to gt)
& is a &
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¤t=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:
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" (<pre></pre>) and does not need <br/> 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" (<pre></pre>) and does not need <br/> 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 <p></p> 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 < and >
You may be wondering by this point why, exactly, I'm using these "<" and ">" 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 <a thing> here <and here> 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 <a thing> here &60;and here> 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.
<
OR <
gives a < in-text (and the #60
part gets converted to lt
by AO3 once the document's HTML text has been saved).>
OR >
gives a > in-text (and the #62
part gets converted to gt
by AO3 once the document's HTML text has been saved).&
gives a & in-text (thus &lt;
gives a < in-text and &gt;
gives a > 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¤t=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:
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 "spoiler"... 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 "spoiler"... 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>
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:
test text hidden
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.