#AO3 coding

[magicbeings]

How I added "instant translation" to the non-english text on my fic: a very easy 3 step guide

Hello!

I recently posted a Wolfstar fanfic called Instance of Happenstance and received a lot of compliments on a small piece of code I used. Both @marigold-hills and @leavesthatarebrown suggested I share how I did it, so here I am, finally explaining it in a Tumblr post!

Before diving into the details, I want to clarify that I didn't write this code myself.

Initially, I tried following this tutorial, but I stumbled upon a better solution in the comments of that post. The code on the tutorial itself does work, but a) it's harder to use and b) it doesn't work as well if you're planing to have multiple paragraphs that you need to show the translation on the same fic.

The solution someone presented on the comments, however, is very simple and easy to use for as many paragraphs as you need, but the explanation there wasn’t too clear, so I decided to expand on it to make it easier for others to implement.

All credit to Ao3 users La_Temperaza (who wrote the orginal post) and Nikkie2571 (who posted this code on the comments).

What Does This Code Do?

This code adds an interactive feature to your fanfic, allowing readers to hover over a specific paragraph (or tap on it if they’re on mobile) to instantly change the text to something else — also set by you.

While this can be used for various purposes, I think it's particularly useful to display instant translations of non-English dialogue/text directly in the story. The code offers a much smoother alternative to the clunky “see end notes for translation” thing—which, let's be honest, can be a pain for readers, especially in long chapters.

For example, in instance of happenstance, Sirius discovers an old journal written entirely in French. I wanted to maintain the sense of mystery and intrigue that would be lost if I simply said the journal was in French, but wrote the text in English.

This solution let me keep the best of both worlds—retaining the authenticity and the immersion of the French, while still making the story easy to follow for the readers.

Now, I know this sounds complicated, but I assure you, it's not!

Down bellow is a quick, 3 steps tutorial on how to do it. I hope this is helpful! (:

(I'm doing this on the computer, if you're doing it on mobile, the layout of the website might be different from my printscreens)

Step 1 - Create The Work Skin

I'm gonna go right to the point here, but if you want to know about Work Skins in detail, I suggest this Ao3 Article.

On your Ao3 Dashboard, click on the fourth link on the sidebar, which is "Skins".

Then, on the page that opens up, click on "My Work Skins"

Then, on the top of the page, select "Create Work Skin"

Now, you'll see the form to create your skin, which looks like this:

Leave the "Type" as "Work Skin". On the Title, you can give any name you want to your skin, but I suggest you choose the same title as your fic or something like "instant translation", so you'll know what it's about later.

You don't have to worry about any of the other fields, except for the CSS one, where you should copy and paste exactly what I'll put bellow:

#workskin .change_on_hover:not(:hover) .on, #workskin .change_on_hover:hover .off { display: none; }

So, now, you'll have something like this...

... and you just have to click "save" on the bottom of the page, and this step is done.

Step 2 - Apply the Skin you created to your fic

For a new work, click on "New Work" as usual. If it's a fic you're already posting, you can add this as well, just click the "Edit" button.

Now, on the form of your fic, on the "Associations" tab, right under the menu where you select the language of your fic, you'll see a "select a work skin" option.

On this field, you should select the workskin you just created on the previous step, searching by the name you gave it on the "Title" field.

Step 3 - Insert the text

The code we're gonna use is this one:

<p class="change_on_hover"> <span class="off"> paragraph in foreing language </span> <span class="on"> paragraph in english </span> </p>

If you have no idea what this means, hold my hand, we're gonna get through it together!

First, copy your fic’s text into the AO3 text box as you normally would. Then, switch the text box to HTML mode so you can see the underlying code.

Now, scroll down until you find the paragraph you want to translate. After pasting, it will likely look something like this:

Note how each paragraph in HTML starts with <p> and ends with </p>. These tags indicate where a paragraph begins and ends.

Our goal is to modify that first <p> tag so it tells the browser, “Hey, this paragraph is different from those other ones. It should change when hovered over or clicked.”

To do this, we’ll change <p> to <p class="change_on_hover">. This marks the paragraph as special—one that should switch text when interacted with.

Now note how instead of having a single paragraph, we need two versions of the text:

In blue, the original (non-English) text, which will be shown by default.

In red, the translated (English) text, which will appear when the reader hovers over or clicks on it.

For the original text, wrap it inside a <span class="off"> tag, ending with </span> like this:

<span class="off"> insert here the whole text of the paragraph in the foreign language </span>

For the translated text, wrap it inside a <span class="on"> tag, also ending with </span>. This will replace the original text when hovered over or clicked:

<span class="off"> insert here the whole text of the paragraph in english </span>

And don't forget to end the whole thing again with </p>

Again, here's how it looks on my fic:

With the paragraphs that come before and after the translated text, just leave them as they are. They should still start with <p> and end with </p>. No changes needed!

You can use this method for as many paragraphs as you want, whether in the same chapter or across different chapters. As long as the Work Skin is active, the effect will work seamlessly throughout your fic.

[amphibianauthor]

Case File 8008135: The Disappearance of Impulse EsVee and Skizz LehMan

Welcome to @that-fall-guy and I's 16k Winter Solstice Fic! We decided to tell an epistolary [collection of documents] fic complete with audio, photos, and a majority of HTML/CSS. (The CSS alone was 3k words) Thank you fallguy for being an amazing co-writer, and thank you @hermitadaymay for hosting a lovely event.

Summary below the cut:

Contents of Case File 8008135 as taken from the Douglas County Sheriff’s Office. Warning: Viewing restricted material without proper credentials and access level is prosecutable under Wis. Law §19.85

OR

Rumors of the existence of ghosts in the Sunny Meadows Mental Institution of Maple, Wi is not as far-fetched as the Douglas County Police Department once believed. Grian, Scar, Gem, Impulse and Skizz would have been more than willing to show the department without all the fanfare of a hunt gone wrong, though.

[Note this is an entirely FICTIONAL case file.]

[flowcodes]

Fake Ao3 App

Originally posted under my main blog: FlowGeeksOut in the community 'Crying ao3 down'

Greetings everyone reading this it has recently come to my attention that there is an app claiming to be affiliated with ao3 along with OTW that is not ans has privacy safety concerns.

For context earlier today ao3 was having issues and the Ao3 News Tumblr blog made a post about it. I being in the Cyring Ao3 Down community went to reblog it there and link people who were having issues to the post in hopes for them to understand what was happening if they were not already aware. That was when I came across the following post from @elijah-j

Obviously the edit was not there before. Anyways I saw this post and became confused and concerned.

In case you were not aware ao3 is part of the nonprofit organization OTW. This is very important for serval reasons. One of most being legal protection for both ao3 and the fan content creators that host their content on ao3. Since ao3 does not run ads and are part of a non profit organization they therefore do not make any money off of the fan works hosted there. This therefore gives a lot of protection to ao3 and the fan creators against civil litigation from the copy right holders of the Fandom you wrote for. Since the biggest argument in those cases is about profits and if ao3 was running ads and gaining profit from fan creators hosting the fan content there and or paying the fan creators to do so it is harder for a court case to be nessary and or winnable.

As a fan creators for has over 100 works hosted on ao3 I feel very safe being able to express my fanworks with all this protection. So imagine my concern when I saw the post shown above. I then asked the poster @elijah-j for clarification see the comments below

As seen in the last screenshot as soon as I was made aware that it was "in the app only" my brain immediately jumped to this being a scam since and let me say this load and clear THERE IS AND HAS NEVER BEEN AN APP FOR A03

I then explained this to @elijah-j as seen in the screenshot below

Yep that last screenshot says there was NOTHING IN THE PRIVACY POLICY

This horrible because in a way they have the right to do whatever the hell they want with any personal data they have collected on you.

I proceed to let @elijah-j that i think they should report said app to the play store and ao3 because this could cause many problems for a lot of people. @elijah-j agreed with me and did so.

So if you are using an app that is using ao3 name you should report it to the app store and ao3 along with deleting your account on the app if possible then the app.

If you used a similar password to any other website you should change the password.

I will find the link again of where to report it to ao3 along with more information about ao3 and the law if you are interested about the importance of ao3 not having ads.

If you have any questions or concerns please feel free to comment them and I will try my best to help you find an answer and or solution or way forward.

And thank you for @elijah-j for letting me post this!

Stay safe

Links

[rynrising44]

I have determined putting footnotes in AO3 chapters is the best way to bring humor and clarity to an otherwise serious situation. For example,

"Stop. Talking to me like that," Brunnhilde growls. "Like I'm a charity project or some garbage. I'm not you, Sweetheart, okay? I don't have a love complex."[1]

[1]: she has a love complex

Will never not be funny to me. More people should do this. I swear, it makes your writing 10xs better.

[benjyyzzz]

Im killing myself if it breaks one more time…. WHY TF IS IT SO HARD TO ADD A GODDAMN PCITURE

[ao3-helper]

Please Help Me! 🙏

So I’ve seen before on Ao3 where it’s written in English but the character speaking changes from English to Spanish/etc. You was able to tap on the foreign language and it would translate to english from something that the author would do. 

I’ve tried looking up ‘Ao3 tap translation’ because that is literally what it is and now I can find it anywhere. I want to do it in my story instead of leaving the translation in the notes. The foreign language would be underlined indicating that you could tap it to translate.

It’s not google translate I can tell you that, I have a iPhone and I don’t even have google app. I could be wrong but I’m pretty sure it exists and I want to know how to do it.

Hi! I'm answering your ask even if you found how to do it so others can find it too.

So, it technically isn't a translation system, more of a hiding system. Which means that you will have to translate the bits you want to be bilingual.

I used it twice. Once for translation, once to hide CW parts within the fic.

This system uses CSS and needs to be put in a special skin that you will use only for one work. Also it's only for each <p> tags (iirc), which can become annoying after a while if you have a lot of lines or several paragraphs.

As a reader: you need to allow work skin/creator's skin in order to have the full experience.

For download: I downloaded the fics I did with this code in it in .epub and .pdf and... It doesn't appear. At all. So I'm still looking for a way, but with my knowledge of how to use all of that, downloading the fic is useless because there will be lines missing.

Here is a guide on how to do it (it's also part of a work skin tutorial series, if ever you want a looksie):

[eleanor-is-fine]

Confirmed link https://archiveofourown.org/collections/A_Guide_to_Coding_and_Fanworks

GUYS. DID YOU KNOW YOU CAN WRITE CHOOSE YOUR OWN ADVENTURE FICS ON AO3

[sak-ao3-tips]

How To Creat A Site Skin (super basic)

Site skins can be tricky and intimidating to tackle, but it is also super fun to personalise your AO3s look. Here's what mine looks like v.s the basic look:

Much nicer isn't it? (maybe it's not to your tastes, but that's ok I'm gonna show you how to make it exactly what you want to see)

This is where you go to start:

You will be brought here, and the first thing you need to do is give your site skin a unique name (a keyboard smash works fine if you can't think of anything right away), you can also give your skin a description if you want. This is my testing skin. Next click the use wizard button:

This is where you can input font/text size/e.c.t. (I just leave the other things alone because I don't really care about them). And for colour you can simply look through the handy list provided, there is no real substitute for trying them out and seeing what suites your needs best. I have included my site skin settings incase you already like what I've got going on:

Once you are happy with the colours, text, and layout of your custom site skin you can click submit (this is basically saving it, you can do this earlier in the process if you want as long as all the required* fields are filled out). Once your skin has been saved it should show up under My Site Skins on your dashboard, simply click use and you're good!!!:

You can edit your skin any time simply using the same steps.

[hannibalsloverboy]

Can anyone point me in the direction of a blog that teaches ao3 coding? Like adding text messages and stuff

[atomic-asher]

In the filter tab of AO3 -- Does anyone know the code to change the color of these white boxes?

Wizard doesn't change them and I haven't been able to find the code online.

[regulusrules]

[readingprofoundbonds]

How does one have preview art when sharing AO3 links?

This has been bothering me for AGES. When recommending fics in Facebook or twitter usually there will be a small box to the left with the AO3 logo like shown:

But in rare occasions like the second fic, Who is the Lamb and Who is the Knife, there is a picture that shows up instead of the standard AO3 logo. How does one do that? Is it a work skin? What work skin is it? Do you just upload? I've asked some authors who have it in their fics and they don't know either. I've asked discord and no one. I just might not know the correct people but XD anyway... anyone?

[flowcodes]

I posted this originally on the comminuted crying ao3 is down under flowgeeksout and it thought it would be a good idea to post here.

Just thought I would make this post since people like the person below me have trouble with ao3 loading but it is not down. Here are some ways to try to fix the problem.

1. Delete your search history on the browser. Sometimes it is just being dramatic.

2. If that does not work check to see if you have any other apps open in the background and close them

3. If this also does not work then try shutting all the tabs on the browser that you are using

4. Check on different tab and see if your browser is working on the other website if not then it could be an internet/wifi/data problem.

5. If it is a internet/wifi/data problem first if you have your wifi on try turning it off to be sure your phone is not being dramatic. Try the verse if you are using data.

6. If all of the above fails try using a different browser.

7 A. If that fails. Try by A. Making sure everything is off meaning apps and websites and powering off the device then power it back on

7 B. Make sure your device is on the latest update version

8. If all fails then sorry it might be time to look for a new device to read your fic on whether switching to another device you own and check if it works there if it does then it is the original devices issue and you may in fact need a new one.

I hope this is helpful!

[manicpixieyandere]

Why Censorship Is Bad

An Essay On The Dangers Of Censorship

Hello everyone. We keep seeing a lot of takes online (mainly Twitter and TikTok) talking about how there needs to be censorship on taboo subjects. We wanted to share some reasons why that may not be as great an idea as you may think.

The taboo subjects now adays are usually sexual in nature. Kinks, incest, loli/shota, etc, a lot of people want to ban. A talking point we've heard a few times is that if people see this stuff in fiction then they'll start to like it and change the way their brain is wired. This is THE EXACT talking points conservatives had when videos games first came out, calling them violent and the cause of school shootings. More importantly for this essay, this is what happened as well when movies first came out.

When movies first came out there was an outcry from the public to have more moral films. In fear of both loosing an audience and being censored by the government (as movies were too new to be protected by law) film studios adopted The Hays Code, self censorship basically. The Hays Code censored the stuff people wanted gone sure, extreme violence, sex, excessive use of drugs, but that's not where the censorship stopped.

Amongst things banned in The Hays Code were queer people / relationships, and interracial relationships. When you open the floodgates to censorship, who decides what's moral and what's not? This is exactly what would happen again. You say no sex, the law may hear no queers. And lately, they'd sure love that opportunity!

So what do we do instead? It's completely fair if you're triggered by certain subjects in media or just plain old don't want to see them. That's fine. What people can do to help is properly tag stuff. For example the tag system in AO3 is there for a reason, USE IT. If you see someone online making something you don't like, block them, but don't harass them. You have a right to block them, just as they have a right to create. Trigger warnings have become a bit more common place beyond fanfiction too. They're in some books, shows, and video games now.

Censorship is a slippery slope, one that in our current day we really don't need. Don't let the government have more tools to erase you.

[riacte]

Unconventional format / mixed media / meta / epistolary fic ideas:

Script format but the characters slowly break fourth wall until they grow self aware and scream to leave but the script confines them.

Mock up notes of an author's fic outline only for a "fan favourite" / "author's darling" character to gain sentience and influence the story. The character changes the outline to suit their own agenda, and their changes are marked with a different colour whereas black text means it's the author's will. Maybe another character using another colour gains sentience. The different colours fight for dominance. Mom says it's my turn with the keyboard hey what the fuck man excuse me I'm literally trying to save my family can you guys let go and let me write your character arcs in peace OH FUCK OFF

Recipe fic. The story is told via those unnecessarily long backstories on a recipe blog in which you learn about someone's grandma or a breakup or literally anything. Bonus points if the actual recipe deals with worldbuilding (what ingredients are available? What utensils are used? How to serve this meal? Woohoo Dungeon Meshi) or in-cheek recipes (eg. "Recipe for making up with your estranged mother - Step 1: Mix patience, nostalgia, and filial piety and let it marinate for ten years. Step 2: Throw that shit into the trash because you're better than that")

Travel fic. A character is lost and trying to find their way somewhere. GPS directions, googling "x place to x place", tickets and dates, train station maps, leaflets. It gets weirder and weirder. You never get closer to your destination. You're walking around in circles. It's always 10 meters away. Where are you going and where have you been?

Receipts. Try to infer what a character is doing judging from the weird things they buy together. Also yipppee inflation tracker. On the other side, maybe it can be about a cashier/ shop owner getting to know their customers and what they order.

Written from the pov of an non-native English speaker, all the English words are italicized whereas their native tongue are the only words not italicized. Inspired by Kupu rere kē by Alice Te Punga Somerville. This is because I got salty about people from Ao3 Reddit saying they won't read a fic in all italics.

Murder mystery / "Among Us" style impersonation fic strictly using the chatfic format. Characters and readers will have to figure out which character has been killed and replaced from the way they text and use emojis. This is also because I got salty about Ao3 Reddit being a wee bit pretentious about emoji usage in fics. Maybe emojis can be important plot devices! Some people prefer to sign off messages with a heart emoji of their signature colour, so won't it be weird if they use another coloured heart? How about someone using lapslock suddenly using proper capitalisation and full stops? Can you tell if someone's phone has been stolen? What if someone's mother is pretending to text like their child? Why is someone suddenly only using UwU speak? Is it a bit, or have they been replaced?

Innocuous second person POV until the last line where it's suddenly revealed to be first person POV all along and the "I" has been stalking and narrating "you".

Other fun bits / Easter eggs / secrets to hide:

Decoding within the text itself. Maybe we get given instructions to find a word in x chapter on page y on the nth line. And when we as readers collect all the words, they form a sentence that spells out an important fact which the characters are oblivious to. Or maybe the in-universe characters find a book with the same title as the irl fic with a bookmark in it, and if you go to where the bookmark is stuck irl, you'll find the murderer plainly stated. The rest of the fic is about the readers having hard confirmation of who the murderer is while characters don't know.

A phrase is subtly repeated throughout the text of the fic and is spelled out with the letter that begins a sentence. It gives off the effect that the narrator is screaming and crying into the void (to the readers in the fourth wall) while trying to avoid detection. Bonus points if the same word is repeated for pages and pages to the point the lack of sentence variation feels weird and clunky.

Morse code!! I love morse code! Using onomatopoeia to convey the dots and dashes! The sound of rain pattering on the tin rooftop— drop, drop, drop. A low whistle of a train rumbling in the distance. He slowly sharpens his knife, creating a shiiing sound. A lengthy, high pitched squeal from his kettle. A dog barks. A sharp knock. His heart thumps. Dot dot dot, dash dash dash, dot dot dot. SOS. Maybe a character's death scene spells out the name of their mysterious murderer. Maybe a character is reminiscing their deceased loved one and the scene spells out what the deceased person would've wanted to tell them— "LIVE ON" or "I LOVE YOU" or something.

[magicaltimelady44]

so like. if anyone else, like me, still has the occasional fanfic they follow on fanfiction.net, and hasn't been getting the update emails for the longest time and was wondering if ti meant the site is on its last legs

no

no they've done something stupid as fuck

you have to opt back in to getting the emails/notifications of new chapters every six months, because they automatically assume you don't want to know when the fics you followed for the updates have updated