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:

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 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.

< 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 < gives a &lt; in-text and > 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:

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 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:

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.

Chapter Text

It looks like there’s an HTML5 way to hide “spoiler” text (and/or add hidden or hide-able text) without making a CSS stylesheet that works on AO3 after all! Yay!

Expand and collapse text using HTML5 without a CSS stylesheet (that also works on mobile!)

To explain: you write whatever text you want in the normal paragraph tag-pairs (within <p> </p> pairs) and then use the <details> tag(-pair) to demarcate and surround an expand-collapse section of text that you want to show vs. hide.

You then write what you want to always have seen in your “fic” posting by the <summary> tag pair, and you note what should be hidden until the arrow to the left is clicked on/touched by the normal paragraph <p></p> tag pair.

Touching the arrow at the left of the ‘summary’ tag-pair text will expand (on first click/press) or collapse (on second click/press) the “hidden” text in all tags following the <details> tag but prior to the ending </details> tag (except for what is written within the ‘summary’ tag-pair, which will always be shown).

The (basic) code:

<p>
</p>
<details>
  <summary>Summary</summary>
  <p>Detailed content goes here...</p>
</details>

looks like:

Below are further examples of this method, with multiple types shown – e.g., paragraph ‘p’, preformatted text ‘pre’, and what happens when multiple paragraph ‘p’ tag sections are used within the same ‘details’ tag pair before and after the ‘summary tag-pair.

The single-collapse / single-expand code:

<p>
</p>
<details>
  <summary>Summary</summary>
  <p>Detailed content goes here...</p>
</details>
<details>
  <summary>Summary2</summary>
  <p>Detailed content goes here...2</p>
</details>
<details>
  <summary>Summary2pre</summary>
  <pre>Detailed content goes here...2pre</pre>
</details>
<details>
  <p>blah3a blah3a blah3a</p>
  <summary>Summary3</summary>
  <p>blah3b blah3b blah3b</p>
  <p>Detailed content goes here...</p>
  <p>blah3c blah3c blah3c</p>
</details>

looks like:

Detailed content goes here...2pre

The double-expand / double-collapse code:

<p>
</p>
<details>
  <summary>Summary</summary>
  <p>Detailed content goes here...</p>
  <details>
    <summary>Summary2pre</summary>
    <pre>Detailed content goes here...2pre</pre>
  </details>
  <details>
    <p>blah3a blah3a blah3a</p>
    <summary>Summary3</summary>
    <p>blah3b blah3b blah3b</p>
    <p>Detailed content goes here...</p>
    <p>blah3c blah3c blah3c</p>
  </details>
</details>

looks like:

Detailed content goes here...2pre

Some code for an example usage of single-collapse (in-line spoilers) would be:

<p>Prior text of your fic goes here! Such as, Fiddleford said: “<i>Yroo Xrksvi Girzmtov!</i>”</p>
<details>
  <summary>(Code translation can be viewed by clicking the arrow to the left)</summary>
  <p><i>Yroo Xrksvi Girzmtov!</i> -- Bill Cipher Triangle!</p>
</details>
<p>More text of your fic!!</p>
<details>
  <summary>((Spoiler! If you want to read a portion of the fic that is written in third-person omniscient view, click the arrow to the left. Otherwise, continue on please, dear reader!))</summary>
  <p>Oh no, you are reading a 4th wall break here, or something similar. Oops! Maybe you should click that arrow again to close this up, clearly this was a HORRIBLE mistake that you shall never repeat again!!</p>
</details>
<p>Yet more fic text!</p>
<p>Yes, maybe there’s</p>
<p>a</p>
<p>lot</p>
<p>more</p>
<p>of</p>
<p>it!</p>
<details>
  <summary>(Another spoiler, you say! --Don’t mind if I do!)</summary>
  <pre>Ah. The Robotic Voice Of God Now Compels You! ...Or maybe that’s just your stomach talking. One or the other. Try flipping a coin, maybe? Or just go drink some water, you’ll feel better! Probably.</pre>
</details>
<p>More fic here, yada yada.</p>
<p>And then some.</p>
<details>
  <p>Note that this text before the summary tag-pair still shows up as hidden/collapsed text, since it’s inside the ‘details’ tag.</p>
  <summary>(Trigger warning: blood. Please don’t expand this text out if you don’t like the sight of blood!)</summary>
  <p>BLOOD FOR THE BLOOD GOD.</p>
  <p>BLOOD FOR THE BLOOD GOD.</p>
  <p><b>BLOOD FOR THE BLOOD GOD.</b></p>
  <p>...Yeahhhh, that’s probably enough of <i>that</i> meme! :)</p>
</details>
<p>Following fic stuff goes here.</p>

which looks like:

Prior text of your fic goes here! Such as, Fiddleford said: “Yroo Xrksvi Girzmtov!”

More text of your fic!!

Yet more fic text!

Yes, maybe there’s

a

lot

more

of

it!

Ah. The Robotic Voice Of God Now Compels You! ...Or maybe that’s just your stomach talking. One or the other. Try flipping a coin, maybe? Or just go drink some water, you’ll feel better! Probably.

More fic here, yada yada.

And then some.

Following fic stuff goes here.

Some code for an example usage of double-collapse (spoilers for summaries vs. actual text) would be:

<p>Prior stuff in your fic goes here.</p>
<details>
  <summary>((Warning: smutty stuff ahoy! Click the arrow to the left if you want to read either a short G-rated summary of it, or the actual smutty fic stuff. Otherwise, just carry on down below.))</summary>
  <p>((You are at a crossroads, dear reader –- which path do you choose?))</p>
  <details>
    <summary>((Just give me the basic G-rated summary of what happens here, please.))</summary>
    <p>Character A and Character B make sweet love in their bed together that night. During their ‘naughty’ talk, Character A brought up their love of the scent of fresh pine and coffee that they could smell in their lover’s hair, even after their shower. Character B was in a haze at the time and didn’t think much of it, until the next morning when they woke up together and Character B realized that, hold on a sec, Character A is <i>allergic</i> to coffee beans, aren’t they? –A verbal altercation ensues shortly thereafter, and Character A is kicked out of the cabin in only their boots.</pre>
  </details>
  <details>
    <summary>((Oh, give me the whole thing! I love-LOVE-<b>*LOVE*</b> that steamy stuff!!))</summary>
    <p>...Uh, wow. You didn’t actually expect me to write a whole bunch of smut for an AO3 example text, did you?</p>
    <p>(I mean, maybe somebody else would, but I’m not so inclined to do so for a simple HTML example, myself.)</p>
    <p>--Sorry. Hope this doesn’t count as too much of a tease! ;)</p>
  </details>
</details>
<p>Following fic stuff goes here.</p>

which looks like:

Prior stuff in your fic goes here.

Following fic stuff goes here.

To be clear, I’m not sure what happens in downloads of people’s fics when this ‘hidden text’ expandable/collapsible text option is used, in pdf or otherwise. I might test this out in the future? But for now, I just wanted something that seems to work out on both desktop and mobile browsers/apps for all folks. Just remember that this does require HTML5 support for your program or app.

See these pages for more info:
https://stackoverflow.com/questions/52491453/is-it-possible-to-collapse-a-text-using-html-only -- collapsible text inside html that AO3 supports! (yay for HTML5!! :)
https://stackoverflow.com/questions/53678620/expand-text-in-line -- page that gives the reference CSS for the details and summary tags that's built into general HTML5 (apparently)
https://stackoverflow.com/questions/57846345/use-details-and-summary-tags-as-collapsible-inline-elements -- additional stuff that can be done via CSS, included for anyone who might want to mess around with the AO3 themes...
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip -- requires CSS, but this was what I was originally trying to do to enable "spoilers" by tapping the text on one's phone (having the "spoiler" text show up in a bubble one touched, touch the text again to have it go away, etc.)
https://www.scaler.com/topics/html-tooltip/ -- same as the above (requiring CSS), but shows how to show the bubbles on any side you might want it to, not just overhead
https://stackoverflow.com/questions/7503183/what-is-the-easiest-way-to-create-an-html-mouseover-tool-tip -- shows title text when press and hold the icon image, when on one's phone (not quite what going for, since it's via the right-click "save-as" sort of dialogue)

Additional pages for things I found that don’t seem to work properly on AO3, currently (I could be wrong, though?):
https://www.w3schools.com/tags/tag_select.asp -- note: label select, dropdown tags do not work in AO3 html editor
https://www.w3schools.com/howto/howto_js_collapsible.asp -- button tag/type doesn't work in AO3 html editor