How I Added "instant Translation" To The Non-english Text On My Fic: A Very Easy 3 Step Guide

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".

How I Added "instant Translation" To The Non-english Text On My Fic: A Very Easy 3 Step Guide

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:

paragraph in foreing language paragraph in english

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 and ends with . These tags indicate where a paragraph begins and ends.

Our goal is to modify that first 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 to . 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 tag, ending with like this:

insert here the whole text of the paragraph in the foreign language

For the translated text, wrap it inside a tag, also ending with . This will replace the original text when hovered over or clicked:

insert here the whole text of the paragraph in english

And don't forget to end the whole thing again with

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 and end with . 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.

Writing Prompt #3042

"Why don't you give up?"

"Oh, I gave up years ago! You should've seen me before!"

360 notes View Post

emil-416

3 weeks ago

I need to remember this ( TДT)

hi, i love your prompts!!

can you do prompts/suggestions for revealing a character’s tragic backstory to the other characters? mostly with like hurt/comfort or angst. please n thanks!

How to Reveal a Tragic Backstory

check out these sources:

The Backstory Drip: Helping Writers Become Authors

When Do You Reveal a Backstory of a Character?: Writing Stack Exchange

Writing Character Backstory That Feels Real: Now Novel

1. Establish Context Before the Reveal

Before revealing a tragic backstory, it's crucial to lay the groundwork. Give the audience some clues or hints about the character’s pain or past struggles without fully explaining it. This builds curiosity and tension, making the eventual reveal more satisfying.

Example: Throughout the story, you might show the character having nightmares, flinching at certain triggers, or displaying a particular behavior (like pushing others away) that hints at something painful in their past.

2. Choose the Right Moment

A tragic backstory should be revealed at a moment that feels natural and emotionally charged. Don’t force it into the plot. Often, it works best when the character is vulnerable, perhaps during a quiet moment, when they feel safe enough to let their guard down, or during a crisis when the emotional dam breaks.

Example: The character might reveal their past during a moment of intense emotional vulnerability, like when they think they’re about to lose someone else they care about, or when they are experiencing a setback that mirrors their past trauma.

3. Keep It Uncomfortable

A tragic backstory is rarely easy to talk about, and the discomfort surrounding the reveal can be just as important as the backstory itself. Let the character struggle with the words or try to push the conversation away, only to be coaxed into speaking. This makes the moment feel more authentic and raw.

Example: The character might start the conversation with, "It’s not important" or "I don’t want to talk about it," before finally giving in to the other character’s gentle probing or a shift in the situation that forces them to face the truth.

4. Show, Don’t Just Tell

Instead of simply stating the tragic event, show how it affects the character through their actions, memories, or how they interact with others. This deepens the emotional impact, allowing readers to experience the pain with the character rather than just being told what happened.

Example: Rather than saying, "He lost his entire family in the fire," you could show how the character avoids talking about their family, has flashbacks when they see something related to fire, or even flinches at certain words associated with their trauma.

5. Use Symbolism

The tragic backstory can be tied to something physical, symbolic, or thematic in the narrative. A certain object, place, or even weather can be used to evoke memories of the past, creating a deeper emotional connection.

Example: If the character lost someone they loved in a car accident, perhaps they always have trouble getting into cars, or they wear a piece of jewelry that reminds them of the person. When this item or memory is triggered, the character opens up about the event.

6. Layer the Reveal

Sometimes, a tragic backstory is revealed in pieces over time. A character might not reveal everything all at once, but bits and pieces come out as the story progresses. This gradual reveal can allow you to build emotional complexity and deepen the audience’s understanding of the character.

Example: The character might first mention a loss in passing, then later reveal more details about the circumstances surrounding that loss. In a climactic moment, they might confess the full extent of their pain, perhaps adding a new layer of guilt or unresolved anger.

7. Avoid Making It “Too Perfect”

Tragedy isn’t always a neat, tidy narrative. It’s often messy, complicated, and filled with unresolved feelings. Don’t try to make the tragic backstory feel like it was meant to be "healed" or resolved easily. Characters are shaped by tragedy, and the wounds might never fully heal.

Example: The character might express regret or resentment, even years later. They might struggle with feelings of guilt, or they might have difficulty trusting others due to their past experiences.

8. Don’t Overload the Backstory

While tragic backstories are emotionally powerful, too many details can overwhelm the reader or distract from the present story. Instead, focus on the most crucial parts of the past that shaped the character’s current behavior, rather than telling every painful moment.

Example: Rather than describing an entire traumatic event in detail, focus on how it emotionally affected the character. Perhaps the character doesn’t want to remember, so the backstory is revealed only through emotional reactions to certain triggers or through small, painful details.

9. Use the Backstory as a Motivator

After revealing the tragic backstory, the character’s actions should be influenced by it. Their trauma will affect their decisions, and it’s important to show how it shapes their journey going forward.

Example: The character might reveal that they lost someone to violence, and that’s why they became a protector of others. Or maybe their tragic past has made them emotionally distant, but in the course of the story, they gradually learn to trust and open up.

10. Make the Reveal Matter to the Plot

A tragic backstory shouldn’t just be there to elicit sympathy. It should tie into the character’s motivations, fears, and relationships with other characters. If the backstory doesn’t serve a purpose for the plot, it can feel like unnecessary exposition.

Example: If the character is hesitant to form deep relationships because of their tragic past, this fear will be challenged by their interactions with the other characters. Perhaps their backstory also explains why they’re so skilled in a certain area, giving the plot a practical reason for them to be involved in the current situation.

Writing Prompts Revealing a Tragic Backstory

-> feel free to edit and adjust pronouns as you see fit.

She leaned against the worn table, fingers tracing the edge of a chipped mug, not meeting his eyes. "I didn’t always… I wasn’t always this," she began, her voice thin, strained. He sat across from her, waiting, but not pushing. She swallowed, her chest tightening. "There was a fire, years ago. I was just a kid. My parents—" She stopped, shaking her head, as though the words couldn’t pass her lips without choking her. "I don’t even know how I made it out."

She reached out to touch his shoulder, a gesture of comfort, but he recoiled as if her hand was burning him. His eyes widened, panic flashing across his face. "Don’t," he muttered, backing away, his chest rising and falling with rapid breaths. "Please don’t." She stared, mouth dry, unsure what she had done wrong, but the way his face twisted as if remembering something painful told her everything she needed to know.

They jolted awake, heart pounding, gasping for breath as the remnants of the nightmare clung to them. The other person, already awake, noticed and reached out, pulling them into their arms. "Shh, it’s okay," they whispered softly, but the words barely registered. "I couldn’t save her," they choked out, voice raw. "I promised, but I—" The sob broke free before they could finish, and the other person tightened their hold, pressing their forehead against theirs. "You didn’t fail," they whispered, offering the comfort of their presence. "You're safe now."

They were walking in silence, the soft crunch of gravel beneath their boots the only sound between them. He kept his head down, eyes fixed on the ground, his hands shoved deep in his pockets. Then, without warning, he stopped. "I watched him die," he said, his voice rough, as though the words were hard to spit out. She turned, startled by the suddenness, but he didn’t meet her gaze. "My brother. He bled out before anyone could help." His jaw tightened, eyes distant. "And I couldn’t do a damn thing."

Her laughter echoed in the room, but it faltered when she saw his face. He wasn’t laughing. He was staring, distant, lost in some memory only he could see. "What’s wrong?" she asked, suddenly concerned. His eyes snapped back to her, and he forced a smile that didn’t reach his eyes. "Nothing." He turned away quickly, but not before she saw the tear that had escaped down his cheek. "I just... you made me think of my sister."

238 notes View Post

emil-416

3 weeks ago

City Boy Nightwing Art By Jamal Campbell

city boy Nightwing art by Jamal Campbell

5K notes View Post

emil-416

8 months ago

After laughing at everyone's who's ao3 shuts down (cuz yeah mine doesn't as often as yours), I finally experienced your suffering.

I apologise for making fun of your misery and found myself contemplating my life choices yesterday after loosing my husband....

How the heck do you all survive that kind of thing?? Even ww3 seems easier...

Edit 19/09/2024/19:35: It's down again... I'm sorry! I'm begging on my knees! Just let me continue the fic I started yesterday instead of sleeping!

How to Make Fictional Settings Real (Even If You’re Faking the Whole Thing)

➤ Real Estate Listings (Yes, Seriously)

Looking up local listings in a place similar to your fictional town or city gives you surprising insight—average home styles, neighborhood layouts, what “affordable” means in that region, even local slang in the listings. + Great for, grounding your setting in subtle realism without hitting readers over the head with exposition.

➤ Google Street View (Time to Creep Around Like a Setting Spy)

Drop into a random street in a town that resembles your fictional setting. Walk around virtually. Notice what's boring.Trash cans, streetlights, sidewalk cracks, old ads. + Great for: figuring out what makes a setting feel “normal” instead of movie-set polished.

➤ Local Newspapers or Small Town Reddit Threads

Want voice? Culture? Weird local drama? This is where it lives. What’s in the classifieds? What’s pissing people off at town hall? + Great for: authentic small-town flavor, conflict inspiration, and the kind of gossip that fuels subplot gold.

➤ Fantasy Map Generator Sites (Even for Contemporary Settings!)

Not just for epic quests. Generating a map, even a basic one, can help you stop mentally teleporting your characters between places without any sense of space or distance.+ Great for: figuring out how long it takes to get from the protagonist’s house to that cursed gas station.

➤ Music from or Inspired by the Region/Culture

Even fictional cities deserve a soundtrack. Listen to regional or cultural playlists and let the vibe soak into your setting. What kind of music would be playing in your character’s world? + Great for: writing atmospherically and getting in the right emotional headspace.

➤ Online Menus from Local Diners, Restaurants, or Cafés

You want a setting that tastes real? Look at what people are actually eating. + Great for: writing scenes with meals that aren’t just “some soup” or “generic coffee.” (Also, bonus points for fictionalizing weird specials: “Tuesday Fish Waffle Night” is canon now.)

➤ Yelp Reviews (Especially the One-Star Ones)

Looking for a spark of chaos? One-star Yelp reviews will tell you what your characters complain about and where the best petty drama lives. + Great for: worldbuilding quirks, local tensions, and giving your town character.

➤ Real Estate “Before/After” Renovation Blogs

You’ll find the bones of houses, historical details, and how people preserve or erase the past. + Great for: backstory-laced settings, haunted houses, or any structure that’s more than just a place, it’s a story.

➤ Old Travel Books or Tourism Brochures

Especially the outdated ones. What used to be considered “the pride of the town”? What’s still standing? What was erased? + Great for: layering a setting with history, especially for second-generation characters or stories rooted in change.

1K notes View Post

emil-416

1 month ago

reblog if you’re okay with people writing fanfics of your fanfics and/or fanfics inspired by your fanfics

17K notes View Post