#multiple languages

Work Skins:

The very first thing you should do is prepare your Work Skin. There's a very helpful article on AO3 that describes how to make a work skin here. Please use the instructions there to make a Work Skin; I named mine "Workskin for Mando" because this doesn't really matter.

In your Work Skin, you'll want to put (or add) the following CSS:

#workskin .chapter { overflow-x: hidden !important; } #workskin .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } #workskin .tooltip .tooltiptext { visibility: hidden; width: max-content; max-width: 300px; margin-left: -50%; background-color: #ffffff; color: #000000; text-align: center; padding: 5px 10px; border-radius: 5px; position: absolute; z-index: 99999; bottom: 100%; left: 50%; overflow-wrap: break-word; box-shadow: 1px 1px 2px 0px #c8c8c8; } #workskin .tooltip:hover .tooltiptext { visibility: visible; }

Save it. You're done with that for now.

I read several tutorials and used my own vague knowledge of CSS to make this Work Skin, listed below are the ones that I found particularly useful:

Making a variable-width tooltip for mobile and desktop (This gave me 95% of the CSS above)

Desktop/mobile-friendly short tooltips work skin

How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)

Please go check those out if my specific brand of hovertext doesn't appeal to you, or if you want to know more about why any of the above CSS does what it does!

Writing the Fic:

This method works best, as I said, if you write your translations into the work as you go, or put them in as you edit. Again, for the purposes of this tutorial, I will be using:

$text ((translation))

Here is a paragraph with some examples:

He lunged with both blades forward, a reckless attack, easily blocked, and watched as the $jetii’kad ((lightsaber)) locked against first his main knife and then the new, stolen one, and then abruptly screamed out as the plasma extinguished.

Jango couldn’t follow the advantage immediately because… cortosis? Cortosis? The $jetii ((Jedi)) had fought someone equipped to battle him, someone from the $aliit ((family)) of Jango’s $buir ((parent)), and won, and stolen their knife, and…

The $Jetii ((Jedi)) had discarded the useless hilt of his $kad’au ((Lightsaber)) and launched himself at Jango, shouting his name.

Of course you can pick anything you like for yours, as long as it's not something that will show up anywhere else in the fic so you don't get false positives when we replace it later.

It's a weird habit to get into, but trust me when I say that you're going to save time overall.

Processing the Fic:

Get an HTML version of your fic:

In order to get the CSS for the hovertext embedded you'll likely want to convert your fic into HTML first. This is largely because I don't trust WYSIWIG editors generally, but also partly because the AO3 Rich Text editor introduces uncertainty when saving the CSS and I've seen it choke on it and mess things up.

This is complicated, however. If you don't like complicated, there's good news: you probably don't need to do this. You likely can do most of my method with your current word processor of choice! Feel free to scroll straight down to Now Find + Replace for the details!

Methods I have tried in the past to extract HTML from rich text include the Google Docs AO3 plugin, as well as just pasting my rich text to the AO3 Rich Text editor and clicking the tab to switch to HTML.

Now, however, I write in Markdown: I use a variety of editors to write, and I'm OS agnostic and use multiple devices daily, so Markdown works best for me. Therefore I convert my Markdown file in Obsidian using the Copy as HTML plugin.

Ellipsus’s “Export to AO3” feature will also convert to HTML, but I have not personally used it.

Now Find + Replace:

For this method to work, you'll break apart the CSS into the before, between, and after bits. So you'd do three Find and Replaces total:

$ replaced by <span class="tooltip"> (( replaced by <span class="tooltiptext">( )) replaced by ) </span> </span>

Just use the Find and Replace feature on your word processor of choice (this can even be regular windows Notepad, it doesn’t matter), and replace each chunk of your special symbols with the corresponding CSS as listed above.

If your Find + Replace tells you how many times something is being replaced, keep an eye on that to make sure you are getting all the code snippets fully embedded. I personally often forget the second close paren and have to do a bit of search and rescue in longer works.

Posting:

Copy the contents of <body> (or just all of the HTML if your HTML conversion method didn't give you a <body>) and paste it into the HTML tab of the AO3 editor.

Make sure to select your work skin! This option is in the "Associations" section of the posting form, right beneath "Choose a language".

Preview. Check for weirdness. Hover your pointer over the translations. Feel glee. Post.

Conclusion:

Before I designed this method it took me about 10 minutes per 1k words to hovertext my Mando'a. I hated it. It made me not want to write fic with translations ever again. Now I just frontload the time (but not by much as I was already putting the translations in-line for complicated sentences/concepts), and it takes me a few minutes max to get it done.