A Simple Trick for Fic Writers
Hey, if you're a fic writer and a character speaks in a different language, you don't just have to add the translation in the notes. Use the following HTML coding to add 'text on hover' to the word(s). If the reader is on a computer they can hover over the text to see the translation.
<div title="This is the text in the box!">This is the text that shows in your fic!</div>
Here are some examples from a fic on my AO3.
This coding here <div title="a fool, idiot (lit. emptyhead)">Eyn utreekov</div> will show this on hover.
This next example shows that you can add a lot of text. The formatting is the same as above.
PS: When doing this, there may be spacing issues, but you can edit the text through AO3's html or rich text editor. From there you can add italics (like I did), bold, etc, and fix any weird spacing issues. Just be careful not to delete the coding that you worked so hard on 😂
Please please please do both!!! As it says, hovertext only works if you’re reading the fic online. For those of us who have to (or want to) download to read offline, this method doesn’t work—providing necessary translations in the chapter endnotes is important. I’m also uncertain how this works with accessibility software, so keep that in mind too.
This is a wonderful point that I did not include in my initial post.
Here's an addition of how to add a footer that brings you to the end notes and then has another link to bring you back to the spot that you were reading (this works when downloaded as a PDF or EPUB).
This goes in the work HTML; <a href="#definition1" name="definition"><sup>1</sup></a>
This goes in the Author Endnote (or wherever you want it really); <a name="definition1"></a>1. Translation text here <a href="#definition">Back</a>
It will look like this on AO3. And when you press the superscript, you will be taken to the endnotes. At the endnotes, there will be a link that takes you back to the exact place of the superscript.
Above is an example from a guide I made yesterday after the engagement on this post and reblogs such as the one I'm responding to. It goes into alternative HTML and some other basics.
Guide Here: https://archiveofourown.org/works/46679146
AO3 also has some HTML stuff in their FAQ: https://archiveofourown.org/faq/formatting-content-on-ao3-with-html?language_id=en
Also, in regards to accessibility. Screen readers will only read what is present on the screen, so the hover over text will not be read. I'd highly recommend using footers or just making sure to have your definitions in your author notes or story in alternative ways.
Footers are also more mobile/tablet friendly since they do not have cursors to hover with. But footers can be tapped and used :D
Honestly using a combination of all of these can be useful. Or you can just keep it simple. I love the aspect of customization and creating unique reading experiences. This is something that AO3 truly does allow for, which is awesome!
