Actions

Work Header

How to Make Invisible Text (That Can Be Highlighted)

Work Text:

Highlight the following for spoilers:


HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:

/* Invisible text. Color affects color of text, background is color of background. */
#workskin .invisible {
  background: #FFFFFF;
  color: #FFFFFF;
}

/* Invisible text when highlighted. Color affects color of text, background is color of background. */
#workskin .invisible::selection {
  background: #FFFFFF;
  color: #000000;
}
/* Invisible text when highlighted for Firefox. Color affects color of text, background is color of background. */
#workskin .invisible::-moz-selection {
  background: #FFFFFF;
  color: #000000;
}
/* Invisible text when highlighted for Opera. Color affects color of text, background is color of background. */
#workskin .invisible::-o-selection {
  background: #FFFFFF;
  color: #000000;
}
/* Invisible text when highlighted for Safari. Color affects color of text, background is color of background. */
#workskin .invisible::-webkit-selection {
  background: #FFFFFF;
  color: #000000;
}

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the invisible text. Now to implement it.

Go to your the work you want the invisible text, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", find where you want invisible to be located, and paste the following code:

Text before the invisible text:<span class="invisible"> Invisible text here</span>

If you want an entire paragraph hidden, you could use <p class="invisible">Invisible paragraph here.</p> instead.

NOTES

Like mentioned before, I have yet to find a way for this to work on mobile. So if you're using this in the middle of your work, I would recommend putting something at the top (say the notes at the beginning) suggesting that mobile users hit "Hide Creator's Style" before reading. Or, if you are familiar with anchor links (used in the Linked Footnotes tutorial), you can even create a link for a mobile user to click to see the message. For example, if we used the beginning example but added a mobile link:

Highlight the following for spoilers: [ click if on mobile ]

Then the coding would be something like:

<a name="mobile1" id="mobile1"></a>Highlight the following for spoilers: <sup>[ <a href="http://archiveofourown.org/works/[AO3WORKIDHERE]?style=disable#mobile1" title="click to see message on mobile">click if on mobile</a> ]</sup><span class="invisible">You're awesome and I hope you have an amazing day. :D</span>

Make sure you change the AO3 work ID to the number that corresponds with your work. Like this work's ID is "5046274", so the full URL is "http://archiveofourown.org/works/5046274?style=disable#mobile1". Of course, once the style is hidden, it will remain hidden for any other instances where you might have invisible text.

Another caveat is that not everyone views AO3 in the default black-text-on-white-background. So on dark themes, your invisible text will look something like this:

So while it will still be invisible until a cursor is dragged over it, it will be an obvious white box.

You might have noticed I also changed the color of the text and background when the invisible words are highlighted. I thought it was a cool effect, like the words were showing up as you highlighted, but you can change the color or get rid of it altogether if you choose.