An AO3 work skin 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.

Live example here.

Current version: Version 3

Features

• Responsive, looks good on all devices.
• Text box/speech bubble, colored and not.
• Character's name.
• Character's icon.

Planned Features

• Thought bubbles.
• Background images.
• Automation in Google Sheets.
• A version where the character and speech bubble are on the left and right, alternating.
• A version where it can be used in other websites, such as Dreamwidth. This is most likely far better to be used with automation. It may also use Bootstrap depending on the website that supports it (such as Toyhouse).

How to Use

1. Create a new work skin. You can read the basics here and/or here.
2. Copy and paste this CSS code in CSS section.
3. The code contains everything you might want, including some customization options. You can edit it as you wish.
4. Submit the work skin. Please note that the prefix #workskin will be automatically added.
5. Open or create the AO3 work you want. Find "Select Work Skin" and find in the work skin you just created.
6. Copy and paste this HTML code in your work (HTML mode).
7. Edit it and add things appropiately. I think it's pretty straightforward. To make this process easier, you can try things out in AO3 Workskin Sandbox.
8. Please note that AO3 tends to screw the formatting. AO3 also removes the comments. You can use external applications to edit and preview it first.
9. For more explanations and customization tips, read here.

Inspiration

• gadaursan's Fire Emblem Support Scripting work skin as the base.