Hover Notes or âFloating Boxesâin Ao3
This is a fun option if you use, for example, phrases in other languages in your story. I often do, and this is a nice way to give translations without having to scroll to the end of the text, or putting them in the starting notes where people have to keep checking back â or where they spoiler the story!
HOWEVER. The drawback is that the floating boxes only work when a âmouseâ is âhoveredâ over the marked text. They do NOT show up on tablet or phone screens, so youâll still need to put a list of translations in the notes for readers using those devices.
Letâs have an example.Â
âQuâest ce que tu veux?â
Now if you speak French, you might know that means âWhat do you want?â
But not all of your readers will know that. So, you offer them a translation. And since the boxes donât appear unless you hover directly above them, I usually add a Beginning Note to the chapter that reads something like this;
âHover over italicised foreign language text for translations! (Mobile and tablet users please see the Ending Notes)â
In HTML mode in Ao3, (if you try this in Rich Text mode you will get a horrible mess so donât) the line with this example would appear as:
<p>â<em>Quâest ce que tu veux?</em>â</p>
To add the floating box with the translation, you would select the words to be translated (that is, Quâest ce que tu veux?) and paste in the following HTML.
<span title=âWhat do you want?â>Quâest ce que tu veux?</span>
The whole line will now read:
<p>â<em> <span title=âWhat do you want?â>Quâest ce que tu veux?</span> </em>â</p>
Review your work, hover over the part that requires translating, and you should see the following:
I tend to set up a Word doc with all the <span> lines I want to use created in it, and then when the time comes, just copy/paste them into Ao3. Saves lots of time!
