Work Text:
Do you have multiple languages in your fic and you want to include a translation? What about a weird word or acronym that could use a definition? And do you want these additional details shown right where the reader currently is in the fic, without having to jump down to the author’s notes at the bottom?
Welp, this workskin is for you then. Here’s what it looks like:
It’s unfortunate that I can’t use Lorem Ipsum [What’s Lorem Ipsum?] for this, but it wouldn’t exactly make sense for a translation tool tip. So typing things out it is.
Schatz [Treasure] is a word I used a lot, so I’ll use that as my example. You can also use it mid-line, like so: schatz [treasure]. That was a big element that I wanted to solve with this workskin.
When a reader has this workskin disabled, the translation will appear beside the original word, like so: Schatz [Treasure].
Functionally, if the reader is using a screen reader or TTS [Text-to-Speech] software, whether it reads the translation will be based on the accessibility tool’s protocol for handling brackets. My old TTS software would ignore brackets and parentheses, so that could potentially be an issue.
First, here’s the Workskin CSS Code:
#workskin .original {
position: relative;
display: inline-block;
border-bottom: 1px dotted currentcolor;
}#workskin .translation {
position: absolute;
display: inline-block;
visibility: hidden;
background-color: #595959;
color: #ffffff;
padding: 5px 6px;
border-radius: 6px;
bottom: 100%;
left: 0%;
margin-left: 10%;
z-index: 1;
max-width: 500px;
width: max-content;
}#workskin .original:hover .translation {
visibility: visible;
}#workskin .original:active .translation {
visibility: visible;
}
If you need help creating the workskin and then applying it to your fic, this step by step guide is very thorough and informative!
Now here’s my explanation of each block of CSS:
The first block of code stylizes the original text that needs to be translated, primarily by adding the dotted line as an underline. This lets readers know a tooltip is available.
The second block of code is what creates the tool tip itself, i.e. that little gray bar that contains the translation/description. The tooltip will always be gray with white text, for accessibility purposes.
The third block of code is for desktop users, and makes the tooltip visible when they hover over the text with their mouse. Moving the mouse away will remove the tooltip until they hover over the word again.
The fourth block of code is for mobile users, and makes the tooltip visible when they click on the original text. The tooltip will remain visible until they click on another clickable element, such as a new translatable word.
Now that you have your workskin, here is the HTML code you will use in your fic itself:
<span class="original">YOUR ORIGINAL WORD HERE<span class="translation"> [YOUR TRANSLATION HERE]</span></span>
One important element to note is that within the translation span, I’ve added a space before the translation. This is for readers who have disabled the workskin, as otherwise, the words would look like this: Schatz[Treasure]. It still works, but it looks wrong, and I’ll be honest, I have no idea how that might be read by a screen reader or TTS.
That space should be put within the translation span if you don’t want a random space to follow your original text [translation].