Screenplay Component

Link to article: Screenplay Component.

@import url('https://scp-wiki.wdfiles.com/component:screenplay/code/1');

max-width: 70%; margin-left: auto; margin-right: auto;

max-width: 70%; margin-left: auto; margin-right: auto;

max-width: 70%; margin-left: auto; margin-right: auto;

max-width: 70%; margin-left: auto; margin-right: auto;

max-width: 70%; margin-left: auto; margin-right: auto;

max-width: 70%; margin-left: auto; margin-right: auto;

```
font-size: 1.5em; font-weight: 600;
```

(none)

```
blockquote
```
```
blockquote
```
```
code
```
```
blockquote
```
```
code
```
```
script
```
```
script
```
```
blockquote
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
blockquote
```
```
code
```
```
blockquote
```
```
script
```
```
code
```
```
script
```

[[iftags +component]]
[[>]]
[[module Rate]]
[[/>]]

[[=]]
+ What is This?
[[/=]]

[[div class="blockquote"]]
Have you ever wanted to make it big in the movies biz, kid? What about theatre? Maybe you're more of a video game dialogue nerd -- no matter what, if you want to match a script or screenplay format, this is the component for you!

This is the Screenplay component by [[*user Queerious]], designed to dynamically resize to different aspect ratios. It is also built to make it faster and easier to write within the script format on the wiki, and within the sandbox itself!

The component, when included, will only provide the code and formatting, to add flexibility. To use this component, do the following steps:
[[/div]]
-----

[[=]]
++ **__Step 1 - The Code__**
[[/=]]
[[div class="blockquote"]]
At the top of your page, you will need to include the following line of code:

[[div class="code"]]
@@[[include :scp-wiki:component:screenplay]]@@
[[/div]]

The above line only needs to be included **once** at the top of your article.
[[/div]]

-----
[[=]]
++ **__Step 2 - The Script__**
[[/=]]
[[div class="blockquote"]]
Once you have the code included, you can create a script anywhere on the page! To do so, start with declaring your script div:

[[div class="code"]]
@@[[div class="script"]]@@
@@ @@
@@[[/div]]@@
[[/div]]

[[div class="script"]]
You should get something like this!
[[/div]]

Once you have set up, then you can write the script! You can use any formatting, images or otherwise that you would like; **however** this component has a number of style overrides to make the writing process easier. The next section contains a reference document for all major script elements, how to write for the component, and an example.
[[/div]]

-----
[[=]]
++ **__Script Syntax__**
[[/=]]
[[div class="blockquote"]]
This component is designed to support writing within the script or screenplay format within the wikidot editor, by automating script stylings, and prioritizing speed for writing, rather than needing to constantly declare divs or spans.

The next section will cover each of the basic script elements:
[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Scene Heading
[[/=]]

A scene heading is the element at the top of a script, identifying the scene. For example:

[[div class="script"]]
+++ int. site - day
[[/div]]

**To write a scene heading**, put '+++' before the line. For example:
[[div class="code"]]
@@+++ int. site - day@@
[[/div]]

**Note:** The formatting automatically capitalizes these words, so you don't need to worry about that.
[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Character Name
[[/=]]

A character name is used throughout the script format, defining the speaker for a piece of dialogue. For example:
[[div class="script"]]
+ queerious
[[/div]]

**To write a Character Name**, put '+' before the line. For example:
[[div class="code"]]
@@+ queerious@@
[[/div]]

**Note:** The formatting automatically capitalizes these words, so you don't need to worry about that.
[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Parenthetical Text
[[/=]]

Parenthetical text is used in the script format for character tone, or other indicators. These parentheticals are __always__ located immediately after a character name. For example:
[[div class="script"]]
+ queerious
+ (Sarcastically)
[[/div]]

**To add a parenthetical**, put '+' before the line. This will only format as a parenthetical __IF it immediately follows__ the character name line. For example:
[[div class="code"]]
@@+ queerious@@
@@+ (Sarcastically)@@
[[/div]]

**Note:** Parentheticals are used following character names, **however** they may also be used after a block of dialogue, that continues. Placing a parenthetical line directly after dialogue uses '++' instead of '+'.
[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Dialogue
[[/=]]

Dialogue is the main aspect of a screenplay or script. These are always preceded by a character name (and occasionally a parenthetical). For example: 
[[div class="script"]]
+ queerious
This is dialogue that I'm speaking! How fascinating.
[[/div]]

**To write a line of dialogue**, you do __**not**__ need to do any special formatting. Any line that **immediately** follows a Character Name/Parenthetical element will be formatted as dialogue. For example:
[[div class="code"]]
@@+ queerious@@
This is dialogue that I'm speaking! How fascinating.
[[/div]]
[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Action
[[/=]]

Action is used throughout the script format, to describe an environment, actions taken, or anything else that is not dialogue. For example:
[[div class="script"]]
+ queerious
This is dialogue that I am speaking!

Queerious turns to her left, and faces the audience directly.
[[/div]]

**To write an action line**, you do __**not**__ need to do any special formatting. Any line that does __**not**__ follow a Character Name/Parenthetical element will be formatted as an action line. The simplest way to guarantee this is to have a blank line above any action text. For example:
[[div class="code"]]
@@+ queerious@@
This is dialogue that I am speaking!

Queerious turns to her left, and faces the audience directly.
[[/div]]

**Note:** As a review, normal text that immediately follows either a character name or parenthetical will be **dialogue**, while any other normal text appears as **action**.

[[/div]]

[[div class="blockquote" style="max-width: 70%; margin-left: auto; margin-right: auto;"]]
[[=]]
+++ Scene Transition
[[/=]]

A scene transition is located at the end of a scene in a script, showing the transition to a new scene. For example:
[[div class="script"]]
++++ fade to:
[[/div]]

**To write a scene transition**, put '++++' before the line. For example:
[[div class="code"]]
@@++++ fade to:@@
[[/div]]

**Note:** The formatting automatically capitalizes these words, so you don't need to worry about that.
[[/div]]

[[=]]
+++ __**Modifying the Appearance**__
[[/=]]
[[div class="blockquote"]]
Modifying the appearance of the script is designed to be as easy and painless as possible. Text color is inherited, and changed manually. The background and border of the script are set via variables, and can be modified as shown:
[[div class="code"]]
@@:root {@@
@@    --script-color: #f4f4f4;@@
@@    --script-border: #999;@@
@@    --font-color: #000;@@
@@}@@
[[/div]]

The above are the default values, and can be changed within your CSS module.

[[/div]]

-----
[[=]]
++ **__Putting It All Together__**
[[/=]]
[[div class="blockquote"]]
With each of the script elements explained, here is an example script, and the corresponding syntax.

**Example:**
[[div class="script"]]
+++ int. SITE - day
+ Queerious
+ (Sarcastically)
This is dialogue that I'm speaking! How fascinating.

Queerious turns to her left, and faces the audience directly.

+ Queerious (cont'd)
The tag for continued speech is manual, but otherwise, that's it!

++++ dissolve to:
[[/div]]

**Code:**
[[div class="code"]]
@@[[div class="script"]]@@
@@+++ int. SITE - day@@
@@+ Queerious@@
@@+ (Sarcastically)@@
This is dialogue that I'm speaking! How fascinating.

Queerious turns to her left, and faces the audience directly.

@@+ Queerious (cont'd)@@
The tag for continued speech is manual, but otherwise, that's it!

@@++++ dissolve to:@@
@@[[/div]]@@
[[/div]]
[[/div]]
[[span style="font-size: 1.5em; font-weight: 600;"]][[collapsible show="Show Source Code" hide="Hide Source Code"]][[/span]]
[[code type="css"]]
:root {
    --script-color: #f4f4f4;
    --script-border: #999;
    --font-color: #000;
}

.script {
    border: 1px solid var(--script-border);
    background-color: var(--script-color);
    color: var(--font-color);
    font-family: monospace;
    padding: 1.5em 3.5em;
    margin: 1em 1em;
    line-height: 1.4;
}

/* Character */
.script h1 {
    color: var(--font-color);
    font-family: inherit;
    font-weight: normal;
    letter-spacing: initial;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    margin: 0.5em 23.5% 0em;
}
/* Paranthetical */
.script h1 + h1,
.script p + h2 {
    color: var(--font-color);
    font-family: inherit;
    font-weight: normal;
    letter-spacing: initial;
    margin: 0.1em 0em 0em 35%;
    text-transform: uppercase;
    text-align: left;
    font-size: 90%;
}
/* Dialogue */
.script h1 + p,
.script h2 + p {
    color: var(--font-color);
    font-family: inherit;
    font-weight: normal;
    letter-spacing: initial;
    font-size: 1em;
    text-align: left;
    margin: 0.1em 23.5% 0em;
    line-height: 1.5em;
}
/* Scene Header */
.script h3 {
    color: var(--font-color);
    font-family: inherit;
    font-weight: normal;
    letter-spacing: initial;
    font-size: 1em;
    text-transform: uppercase;
    margin: 1.5em 0 1em;
}
/* Scene Transition */
.script h4 {
    color: var(--font-color);
    font-family: inherit;
    font-weight: normal;
    letter-spacing: initial;
    font-size: 1em;
    text-align: right;
    text-transform: uppercase;
    margin: 1em 0em 1.5em 0em;
}

.script p {
    margin-top: 1em;
}

@media screen and (max-width: 650px){
    .script {
        padding: 1em 2.5em;
        font-size: 90%;
    }
    .script h1 + p,
    .script h2 + p {
        margin: 0.1em 9.5% 0em;
    }
    .script h1 + h1,
    .script p + h2 {
        margin-right: 20%;
    }
}
[[/code]]
[[/collapsible]]
[[/iftags]]


[[module css]]
@import url('https://scp-wiki.wdfiles.com/component:screenplay/code/1');
[[/module]]

Screenplay Component

Module Styles

Inline Styles

Includes

CSS Classes

Page Source