[tw5] Custom CSS for writing screenplays

[Matthew Petty]

Is it possible to have every tiddler tagged with a certain tag to be assigned a custom CSS stylesheet?

What I want to do is to be able to write play scripts or screenplays, which would mean making it easy to make a paragraph a character name, dialogue, actions or whatever. It seems like custom CSS would be the way to go. Any ideas?

[Alberto Molina]

I don't know about CSS, but you can have every tiddler tagged with a certain tag to be assigned a custom view template. And you can do the same with a certain field value instead of a tag. In my TW (http://tesis.tiddlyspot.com), I use different view templates for authors, books, quotes, etc., depending on the value of the field "catégorie".

If you want more help, please be more specific. What do you mean by "making it easy to make a paragraph a character name, dialogue, actions or whatever" ?

Regards,

Alberto

[Matthew Petty]

Hi Alberto,

I'm still quite new to this, and I couldn't figure out how you assigned a template to the tiddlers.

What I would like is to assign tiddlers the tag "playscript" (or set a field "playscript"). Those tiddlers would then use a view template that I have created which changed the CSS for those tiddlers so that the formatting for WikiText of bold, italics and so on to look like a screenplay. Then I could easily follow the formatting conventions for screenplays, like using the correct font, centering character names, using the correct margins and so on.

What would be great is some kind of plugin to implement Fountain Scrippets (a screenplay form of markup for blogs and wikis): http://fountain.io/scrippets

/*

Scrippet.css

Scrippet is a CSS template designed for including short sections of screenplay-formatted material in blog posts.

Originally developed by John August - johnaugust.com

Last modified 8/21/08

*/

div.scrippet {

width: 400px;

background: #fffffc;

color: #000000;

border: 1px solid #333;

padding: 5px 14px 15px 14px !important;

margin-bottom: 16px !important;

margin-left: 20px !important;

}

.scrippet p {

font: 12px/14px Courier, "Courier New", monospace !important;

    text-align: left !important;

letter-spacing: 0 !important;

margin-top: 0px !important;

margin-bottom: 0px !important;

}

.sceneheader,

.action,

.character {

padding-top: 1.5ex !important;

}

.action {

padding-right: 5% !important;

font-size: 12px !important;

line-height: 14px !important;

}

.character {

padding-left: 40% !important;

}

.dialogue {

padding-left: 20% !important;

padding-right: 20% !important;

}

.parenthetical {

padding-left: 32% !important;

padding-right: 30% !important;

}

.dialogue + .parenthetical {

padding-bottom: 0 !important;

}

.transition {

padding-top: 3ex !important;

padding-left: 65% !important;

padding-bottom: 1.5ex !important;

}

Regards,

Matthew

[Alberto Molina]

Hi Matthew,

As far as I understand, to have a custom stylesheet for whatever tiddlers you want, you just need to create a new tiddler with the title you want and tag it with the tag: $:/tags/stylesheet

Next, if you want a custom view template for screenplay tiddlers, then you have to create a new tiddler, tag it with the tag: $:/tags/ViewTemplate

and put inside something like that:

<$list filter="[is[current]!is[system]tag[playscript]]">

<div class="scrippet">

Put the contents you want here…

</div>

</$list>

where the first line (<$list filter=…>) says to apply the following only for tiddlers that are not system ones and that have the tag "playscript".

But remember that the "regular" view template, which is at $:/core/ui/ViewTemplate/body, will also apply for these tiddlers, so there can be "interferences" between the two view templates. Thus, if you want to remove the "regular" view template for them, you need to edit  $:/core/ui/ViewTemplate/body and put this (instead of its contents):

<div class="body">

<$list filter="[is[current]!tag[playscript]]">

<$transclude />

</$list>

</div>

where the second line says not to apply the following for those tiddlers tagged "playscript".

Concerning the CSS stuff and the plugin to implement Fountain Scrippets, I cannot help you, sorry!

Hope this is helpfull.

Alberto

Le mercredi 19 février 2014 23:58:29 UTC+1, Matthew Petty a écrit :

[PMario]

Hi Matthew,

I think it would be more effective to include a fountain parser as a plugin into TW. So you could get full support for a dedicated language. IMO this would make more sense.

I did have a short look at github and found Fountain.js [1]. It looks promising.

There is already a syntax highlighter plugin, that seems to work in a similar way. ... So this could be used as a starting point. ...

So the TW syntax for a fountain tiddler could look like this:

```fountain
fountain formated text
```

eg:

```fountain
EXT. BRICK'S POOL - DAY

Steel, in the middle of a heated phone call:

STEEL
They're coming out of the woodwork!
(pause)
No, everybody we've put away!
(pause)
Point Blank Sniper?

.SNIPER SCOPE POV

From what seems like only INCHES AWAY.  _Steel's face FILLS the *Leupold Mark 4* scope_.
```

This text comes from the fountain syntax description page [2]

What do you think?

have fun!
mario
---------------------------------------

If anyone likes what I do, you may be able to 
click here -> to do me a favor and push all or one of my web space accounts :) or
visit my -> shopping whishlist.
---------------------------------------

[1] https://github.com/mattdaly/Fountain.js
[2] http://fountain.io/syntax

[Anton Aylward]

On Wednesday, February 19, 2014 5:58:29 PM UTC-5, Matthew Petty wrote:

Is it possible to have every tiddler tagged with a certain tag to be assigned a custom CSS stylesheet?

What I want to do is to be able to write play scripts or screenplays, which would mean making it easy to make a paragraph a character name, dialogue, actions or whatever. It seems like custom CSS would be the way to go. Any ideas?

I'm working (?battling?) on a template for writing stories (short, novellas, novels, perhaps)
Its rather more that what you describe as there is a need to keep track of the characters and the locations for consistency.
The story line, and I think this would apply to a screen play, is broken down into a series of scenes.  In a book these are groups by 'chapter'.
In a screenplay this might correspond to 'episodes'.
But you still need consistency between the episodes: the street the character lives on, the breed and name of his cat.

Book
    Novella/Section
        Chapter
            Scene

Tagging lets me keep track of, for example, which characters appear in which scenes.

The CSS is proving a non-issue.  I've used Eric's StyleSheetCustom and StyleSheetPrint and THAT'S ALL.
Structure and consistent representation are more of an issue that CSS.

Why do I say this?  I've seen too many movies (and books) that have 'bloopers'
http://www.moviemistakes.com
At http://www.imdb.com/ you can find the bloopers pages for individual movies and TV shows.
There's also a regular yearly TV show about bloopers mentioned there.

What is an issue is Tagging, adding notes, journalling and exporting/printing.
And ordering.  The ordering of scenes is important unless you want to write the whole thing as one great big enormous tiddler.

There's a plugin for exporting (e.g. for when you want to print) and a forEachTiddlerPlugin, both of which you should consider essential.


If you are thinking of writing with the the character names in a different font and different character’s lines in different colours, for example, that's going to be a LOT of work and difficult to keep consistent.

{{CharSpeak{Mike:}}} {{MikeSpeak{"I can't take any more"}}}

{{CharAction{Mike:}}} Throws up his hands
{{CharAction{Mike:}}} Opens door and walks out closing door behind him
{{OffStage{ sound of car starting and driving off }}}
{{CharSpeak{Anglea:}} {{voiceTearfully{{AngelaSpeak{"well that's over I suppose"}}}}}

It's important to get the braces balanced!
However this is very flexible - the CSS makes it so - and the writing of it makes it clear.
However that makes me think it might be better in a macro format

<<charSpeak  param:whosaidit param:whatissaid optionalparam:voicequality>>
<<charAction param:whodoesit param:whatisdone >>


Thing in terms of "Deferred Design".  Get the structure and expression right.  The CSS comes last.
The CSS is 'eye candy' and and is easy to tweek. 

[PMario]

Hi Anton,
While all of your suggestions are fine, they __only__ work with TiddlyWiki classic.
Especially plugins are different in TW5 and there have been some changes in the syntax. see: http://compare-tw2-tw5.tiddlyspace.com/#syntax
-m