Baeeee If We're Only Halfway, How Many Tears To I Have To Prepare??? I Already Sold Out My Stock With

leave him alone, he's got the attitude *sparkles*

Maybe a little.... Procrastination doesn't have a cure for my defence! :'[

reblog if you’re a writer who feels guilt whenever they’re not writing and being productive, so I know I’m not the only one lol

Who does that??

Plan and plot are not even part of my vocabulary dear-

“how do you plot / plan your book?” very bold of you to assume i do that.

Reblog if you’re grateful for your commenters <3

omg so freakinng cute!!! You can boop yourself and even receive a notification for it TAT

It's pretty funny :D

The most passive-aggressive message ever

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.

alright google calm down we all know this to be true

Dialogue Masterpost

Dialogue prompts are my favourite kind. So little context, so much creative space to have fun with. So here is a my masterpost full of dialogue prompts.

Romantic Dialogue

Flirting Prompts - Oblivious and flirty

Teasing Prompts

More Teasing Prompts

Romance Dialogue - Bubbly + Reserved

Dramatic/Break-up Dialogue Prompts

More Break-up Dialogue Prompts

One-sided affections dialogue

Unwanted Attention Prompts

Unrequited Love Prompts

Push and pull romantic prompts

Jealousy Prompts

heartbreaking.

First Kiss Prompts

Things said during sex Prompts

Awkward Post-Sex Dialogue

Smutty Dialogue (Masterpost)

One-Liners Dialogue - Romantic, Smutty + Physical (Masterpost)

Romance Dialogue Prompts – Uncomfortable with affection

Grumpy Affectionate Dialogue

Grumpy + Sunshine Dialogue

Inexperienced with romance Prompts

Love Confessions (Masterpost)

Romantic Date Dialogue Prompts

Asking out on a date

Anniversary Dinner Dialogue

Secret Relationship Dialogue

How to write Enemies to Lovers + Dialogue Prompts

Oblivious Enemies to Lovers Prompts

Enemies to Lovers: Apocalypse AU

Exes to lovers dialogue

Friends to lovers Dialogue

Best friends to lovers Dialogue

Childhood friends to enemies to lovers Dialogue

Enemies to friends with benefits Prompts

Enemies to friends Prompts

Fluffy

Fluffy Dialogue Prompts Part I

Fluffy Dialogue Prompts Part II

Fluffy Sentence Starters

One Hundred Compliments

Shy Compliments

Hidden Pregnancy Dialogue

Sleepy Starters

Cooking/Baking Dialogue Prompts

Friends and Family

Silly Drunk Dialogue

Bar Conversation Starters

Rekindling Friendship Dialogue

Not Wanting to Rekindle Friendship Dialogue

Reconnecting Friends Prompts

Supernatural/Crime/Co.

Hero x Villain - Snarky Dialogue

Hero + Villain Dialogue

Angst Villain Dialogue

Supervillain Roommates

Life & Death Prompts + Dialogue

Demons Dialogue

Angel/Demon Dialogue

Angel/Human Dialogue

Human/Ghost Dialogue Prompts

Assassins Banter Dialogue

Showing aliens the human world

FBI mentor and mentee prompts

Heist Prompts

Hurt/Comfort and Angst

Hurt/Comfort Dialogue Prompts

Angsty Dialogue (Masterpost)

AUs

Bodyguard Dialogue Prompts

Patient and Doctor Prompts

Neighbors to Lovers Dialogue

Coffee Shop Prompts

Matchmaking at Work Prompts

Royalty Dialogue

Princess x Loyal Companion

Prince/ss x Commoner

Princess x Guard

Arranged Marriage Dialogue

Royal Arranged Marriage Dialogue Prompts

Royalty Forced Married to Actual Lovers Prompts

Royal x Royal Ball Dancing

Grad Students Prompts

High School Popular Kid + Outcast Dialogue

More

Dialogue Responses Masterlist

Drabble Prompts Masterlist

Three Word Sentences

Four Word Sentences

Five Word Sentences

Six Word Sentences

short & impactful

powerful.

"I can't…"

Reactions to… (Masterpost)

Asking for permission

Random Questions Prompts

If you like my blog and want to support me, you can buy me a coffee or become a member! 🥰