Work Text:
Nobody can tell ya
There’s only one song worth singin’
They may try and sell ya
‘Cause it hangs them up to see someone like you
But you’ve gotta make your own kind of music
Sing your own special song
Make your own kind of music
Even if nobody else sings along
[ ♪ Make Your Own Kind of Music
Cass Elliot ]
This is a test/sample work — full code at the end.
For testing and sampling, I chose two iconic scenes from different scripts. The first is the ending of the Pilot episode of LOST and the second is the ending of Grey’s Anatomy season 1 finale.
Tip: check out how it looks with the Creator’s Style off!
Screenplay #1:
LOST
"Pilot"
Written by
J.J. Abrams & Damon Lindelof
CONTINUED:
And Shannon's face FALLS as she listens, something registering... and whatever it is, it scares the LIVING SHIT OUT OF HER.
CHARLIE
What? What is it?
The voice gets fainter and fainter. Shannon brings the walkie to her ear, she's calm now, almost as if she's CHANNELING the speaker. And yeah -- it's fucking SPOOKY...
SHANNON
"Please help... I'm alone now... on the island alone. Someone please come... the others, they're dead. It killed them.
(then)
It killed them all."
And with that, complete and utter SILENCE. The battery is dead. Just the wind. Then Shannon lowers the transceiver.
We suddenly find SAYID. His lips stop moving. His eyes drop from the heavens. And he looks even more frightened than the rest of them.
SAYID
Sixteen years.
SAWYER
(snapping out of it)
What?
SAYID
Sixteen years. Five months. And nine days. That's the count.
CHARLIE
The count? What--?
BOONE
You wanna give us a minute here, man? 'Cause this is --
SAYID (CONT'D)
The message. The iterations. It's a distress call. A mayday. A plea for help. And if the counter's right, it's been playing... over and over for sixteen years.
And we let that doozy sink in for a moment before --
BOONE
Someone else was stranded here?
KATE
Maybe someone came for them...
SAWYER
If someone came, why's it still playing?
Beat. Another beat. And another. Taking in all six of them. All equally freaked... no longer so sure they were lucky to survive. Finally --
CHARLIE
Guys -- where are we?
CUT TO BLACK.
THE END
Adapted from: LOST 1x01 - Pilot.
Screenplay #2:
GREY'S ANATOMY
"Who's Zooming' Who?"
Written by
Gabrielle Stanton & Harry Werksman Jr.
CONTINUED:
INT. HOSPITAL LOBBY - NIGHT
Meredith is feeling unburdened and content with her life as she approaches Derek who's waiting for her.
DEREK
Long day.
MEREDITH
Yeah.
DEREK
Somewhere out there, is a steak with your name on it. And maybe a bottle of wine.
MEREDITH
This is why I keep you around.
DEREK
Also we need to talk.
MEREDITH
Wine first, talk later.
DEREK
You trying to get me drunk? Take advantage of me?
(beat)
Okay.
MEREDITH
I think I'm going to like this whole new "rules" thing.
Derek stands and gathers his belongings, then helps straighten the collar on Meredith's coat.
DEREK
Me too.
Derek looks across the lobby. Walking toward them is Derek's secret. He turns back to Meredith.
DEREK (CONT'D)
Meredith, I am so sorry.
A fabulously fabulous woman. Tall, beautiful, Prada clad, Manolo shod.
She's a cross between Catherine Zeta Jones and Catherine Deneuve. Derek stands there. Frozen.
DEREK
Addison.
ADDISON
You haven't returned any of my calls.
Addison looks at Meredith. Extends her hand.
ADDISON (CONT'D)
Hi. I'm Addison Shepherd.
MEREDITH
Shepherd?
Being so fabulous, Addison instantly reads the situation.
ADDISON
And you must be the woman who's screwing my husband.
Meredith's world implodes.
SMASH TO BLACK.
END OF SHOW
Adapted from: Grey’s Anatomy 1x09 - Who’s Zooming Who?.
How-To & Recommendations:
The HTML code itself is self-explanatory.
| WORK SKIN: | <div class="screenplay"> |
| MAIN TITLE: | <p class="maintitle"> |
| TOP TITLE: | <p class="toptitle"> |
| CREDITS: | <p class="credits"> |
| HEADER: | <p class="header"> |
| DESCRIPTION: | <p class="description"> |
| CHARACTER: | <p class="character"> |
| PARENTH: | <p class="parenth"> |
| DIALOGUE: | <p class="dialogue"> |
| TRANSITION: | <p class="transition"> |
| ENDING: | <p class="ending"> |
After replacing each <p> with the correct corresponding category above, I recommend entering the Rich Text Editor and editing the alignment and style.
This helps the work keep the basic formatting/readability even when the Creator’s Style is turned off. Otherwise, everything appears left-aligned and there is no visual indication of which category each line is supposed to be.
| WORK SKIN: | — |
| MAIN TITLE: | CENTER + BIG + BOLD + UNDERLINE |
| TOP TITLE: | BOLD |
| CREDITS: | CENTER |
| HEADER: | LEFT + BOLD |
| DESCRIPTION: | JUSTIFY |
| CHARACTER: | CENTER + BOLD |
| PARENTH: | CENTER |
| DIALOGUE: | JUSTIFY |
| TRANSITION: | RIGHT + BOLD |
| ENDING: | CENTER + BOLD + UNDERLINE |
This way, the text is easy to follow regardless of the Work Skin/Creator’s Style.
Full Work Skin CSS:
For reference:
#workskin div.screenplay {
margin-right: 10%;
margin-left: 10%;
font-family: courier, consolas, monospace;
text-align: justify;
}
#workskin .maintitle {
margin-bottom: 0;
text-align: center;
font-weight: bold;
font-size: larger;
text-decoration: underline;
}
#workskin .toptile {
margin-bottom: 0;
text-align: center;
font-weight: bold;
}
#workskin .credits {
margin-bottom: 0;
text-align: center;
}
#workskin .header {
margin-bottom: 0;
text-align: justify;
font-weight: bold;
}
#workskin .description {
margin-bottom: 0;
text-align: justify;
}
#workskin .character {
margin-bottom: 0;
text-align: center;
font-weight: bold;
}
#workskin .parenth {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
#workskin .dialogue {
margin-left: 15%;
margin-right: 15%;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
}
#workskin .transition {
margin-bottom: 0;
text-align: right;
font-weight: bold;
}
#workskin .ending {
margin-bottom: 0;
text-align: center;
font-weight: bold;
text-decoration: underline;
}
#workskin hr.third {
width: 33%;
margin: auto;
}
#workskin hr.half {
width: 50%;
margin: auto;
}
#workskin hr.full {
width: auto;
margin: auto;
}
See script/screenplay work skin for the original code — all credits to Ninjabunny99.
My current code is considerably different from the original, mostly due to personal preferences. I have some experience with CSS now, but I still went through countless trial-and-error attempts to edit it to my liking.
My version is meant to represent a screenplay, not be 100% faithful to their format. They have several rules and specific formatting that I don’t particularly like (at least in the AO3 context), so I edited everything 1) to fit my style and 2) so the text can still be readable without the Work Skin.
If you’re looking for a faithful screenplay format/look, I recommend using the original code.