Actions

Work Header

Quick and Dirty HTML Reference for AO3

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.