Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 1 of Clover Zero's AO3 HTML & CSS
Collections:
A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs, Ao3 Skins
Stats:
Published:
2020-05-24
Completed:
2021-05-09
Words:
1,228
Chapters:
3/3
Comments:
17
Kudos:
89
Bookmarks:
85
Hits:
5,549

Dialog [Work Skin]

Summary:

Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.

Notes:

PLEASE TURN ON "SHOW CREATOR'S STYLE", otherwise it won't work.

Base work skin credit goes to gadaursan. Thank you so much for making it, such a simple, yet genius idea to use tables! I only edited a few things to suit my own preferences and needs.

Although title is "Fire Emblem", it can be used for any fandoms, of course. I simply kept the original title of the work skin.
Update 1 September 2022: Decided to change the title.

(See the end of the work for more notes and other works inspired by this one.)

Chapter 1: (Faulty) Version 1

Chapter Text

UPDATE 31 MAY 2020

Although this example looks nice, it actually has faults I just belatedly realized. These faults are listed below and are fixed in version 2 (see chapter 2).

EXAMPLE
(Excerpt from the example in "Fire Emblem Support Scripting")

Takumi

I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.
Elise

I don't know what you're wishing for, but I'm sure you will get what you want someday.
Takumi

… F-Forget all the nonsense I just said.
  (Takumi quickly leaves, and shuts the door behind him.)
Elise

… Why should I...?

MY EDITS

  • Adjusted the images, it can now become smaller in smaller screens.
  • Added a text box/speech bubble on the dialogues. It looks like a chat template now, but less like chat messaging app (for me, at least).

DOWNSIDES/PROBLEMS

Initial problems:

  • The icons become way too small in smaller screens, but this in turns make room for more text. I still don't know how to fix this yet. (FIXED IN VERSION 2)
  • In desktop/bigger screens, the speech bubble is LONG, even when the sentences are short. I still haven't found a way for the speech bubble to follow the text's length and fixing the width to something else will create another problem I have no idea how to solve yet. (FIXED)
  • The tail of the speech bubble is clearly not a border, unlike the rest of the speech bubble itself. It's hard to make the border works, so this is all I can do for now. To mitigate the weirdness, you can just put a background color in the speech bubble. (FIXED IN VERSION 3)

31 May 2020 findings:

I found these problems when I was finally editing my fanfic using this skin. I apologize for being late to realize their existence. I'm really, really sorry. To put it simply, I found that the second column (henceforth called dialogues) squish on the icons, thus making two problems if the requirements are met:

  • Icons are too large if the dialogues are short.
  • Icons are too small if the dialogues are too long.

It's better if you see it for yourself.

For the first problem, let's delete the longest dialogue by deleting the second sentence:

Takumi

I've waited. For a long time, perhaps much like you.
Elise

I don't know what you're wishing for, but I'm sure you will get what you want someday.

See how the icons are suddenly enlarged? That's because, to put it simply, the long text is what keeps the icons at bay, squishing it to be smaller. If the text are way longer (second problem), the icons will shrink to an ugly degree even in desktop:

Takumi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, felis porttitor ullamcorper vestibulum, neque nunc faucibus odio, vel viverra leo nisi vitae mauris. Nam mattis est vitae tellus interdum faucibus nec vel metus. Nullam a ante suscipit, pellentesque leo id, rhoncus nunc. Fusce at sapien consectetur nunc sodales mattis pulvinar eu quam.

Why didn't the example show this problem? Because it got the sweet, perfect length for the longest dialogue, I'd say. If that makes sense. I hope it makes sense.

To mitigate these problems, I have to find a way to stop the dialogue on squishing the icons somehow OR put a fixed width on the icons (like the original script). However, I'm greedy. I want a certain kind of responsiveness from the icons.

Thankfully, I managed to fix these problems. Onto chapter 2!

Chapter 2: Version 2

Chapter Text

UPDATE 9 MAY 2021

Wishlist are fulfilled in version 3 (see chapter 3).

NEW FEATURES

  • Fixed the problem of squished icons.

EXAMPLE
(Excerpt from my fanfic, just because it's easier.

SilverAsh

My friend, what are your plans for today?
Dr. Hana

Sleeping after work as always, of course. Why did you ask?
SilverAsh

Did you forget? Today is a month after Valentine's Day.
Dr. Hana

Oh...White Day, huh? I completely forgot about it.

I had to edit the codes for this to work within the faulty skin and thankfully it seems to work. Try resizing your browser if you're on desktop, the icons shrink, but not too small. Looks far better, isn't it?

WHAT ABOUT THE PROBLEMS?

From the example above, it's clear that the icons don't get bigger with short dialogues. Let's see if the dialogue is long:

SilverAsh

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, felis porttitor ullamcorper vestibulum, neque nunc faucibus odio, vel viverra leo nisi vitae mauris. Nam mattis est vitae tellus interdum faucibus nec vel metus. Nullam a ante suscipit, pellentesque leo id, rhoncus nunc. Fusce at sapien consectetur nunc sodales mattis pulvinar eu quam.

The icon doesn't shrink at all! It works!

MY EDITS

Yesterday, I actually tried things and found out that it's case by case basis, which means it's really dependent on how short or long the dialogue is in the fanfic, and one must set limitations for it to work. But of course, that is far from ideal as a skin - as a template to be used in various works. I didn't give up and tried things again today...and voila, here is it! The skin is almost perfect now.

I honestly have no idea how and why adding certain codes work (which I listed in my document), but whatever, as long as it works now! (Laughs)

Hopefully there's no more hidden problems. I tested it with various dialogues this time.

DOWNSIDES

  • (Still) The tail of the speech bubble is clearly not a border, unlike the rest of the speech bubble itself. It's hard to make the border works, so this is all I can do for now. To mitigate the weirdness, you can just put a background color in the speech bubble. (FIXED IN VERSION 3)
  • The description (stage direction) looks a bit awkward, especially on smaller screens. For now, the way to mitigate this is to close the table, put a p (paragraph) below it, then start another table instead of making it as td (table data). (FIXED)

MY WISHLIST

  • Fix the downsides above (especially speech bubble). (FIXED IN VERSION 3)
  • Make it possible to add character's name above or below the icon but with everything looks good somehow. (ADDED IN VERSION 3)

Chapter 3: Version 3

Notes:

After almost a year, I suddenly and finally got a divine revelation on how to add a character's name! It was actually a super simple solution, why didn't I think of it before? Above speech bubble is better than below/above icon...that said, it should be possible to move it to the data containing icon.

I'm sorry it took me this long - I suppose I was so tired and wanted to be free of it last year, so I didn't think much about it.
While I was at it, I also fulfilled my wish of making a bordered (?) tail. I don't know what else to call it, so let's just use that term.

Chapter Text

NEW FEATURES

  • Character's name above speech bubble.
  • Padding for description to make it look cleaner when inserted in-between two speech bubbles.
  • Bordered (?) tail is finally here!! Now it looks like a proper speech bubble. The downside of this however, the background color of the bubble (or dialogue) can't be transparent, as the triangle making the tail is colored to make it look like a flawless, bordered tail.
  • More in-depth explanation about the codes in notes (scroll down to Usage).

EXAMPLE

NAME

Hana

This is default speech bubble.
NAME

Hana

This is default speech bubble, fully colored. Looks lineless!
NAME

Hana

Of course, the border color is fully customizeable!
NAME

Hana

This can be done, too!
(And here comes new version of speech bubble!! Also, look at how this part got updated!)
NAME

Hana

This is a speech bubble with bordered (?) tail. It's not transparent, but white.
NAME

Hana

If you use Reversi site skin or any other site skins, you may see this clearly. If you can't see it, click here.
NAME

Hana

Of course, the color is also fully customizeable!
(Unfortunately, there is no way to make the background transparent like default for this version.)

Notes:

Please visit this page for the codes.

Feel free to ask me questions or give me suggestions through comments.

Series this work belongs to: