Scrippets, PHP and a call to coders

UPDATED. See below.

For the past four years, I’ve been including little blocks of formatted screenplay examples in my posts, such as…

INT. LIVING ROOM – DAY

As the phone RINGS, Gary dozily reaches one dirty-socked foot off the couch to sit up — and suddenly finds himself falling. He lands hard, dazed. We REVEAL that the couch is propped up by cinder blocks, five feet off the floor.

Gary staggers to his feet, bewildered. Realizing who must be behind the prank…

GARY

Grandma!

I call these little blocks scrippets, and they’ve proved to be very useful. They’re made with some custom CSS code I wrote in 2004,¹ which several other screenwriting bloggers have implemented with their own tweaks and changes.

geek alert If you’re reasonably familiar with HTML and CSS, it’s not hard to do the same: you paste the CSS into your stylesheet, and mark up your script section with the proper tags. For the example above, the code reads…

<div class="scrippet">
 INT. LIVING ROOM – DAY
 As the phone RINGS, Gary dozily reaches one dirty-socked foot off the couch to sit up — and suddenly finds himself falling. He lands hard, dazed. We REVEAL that the couch is propped up by cinder blocks, five feet off the floor.
 Gary staggers to his feet, bewildered. Realizing who must be behind the prank…
 GARY
 Grandma!
</div>

Each line is wrapped in a class tag identifying its function, and the whole thing is wrapped in a div. ² A human can read it, but it’s a pain to write.

Fortunately, I do all my blog writing in TextMate, so it was relatively trivial to modify its “Wrap Each Selected Line In…” command to speed the process. For a few years, I just saved the scrippet formatting until last, and it was bearable.

Then, during the strike, I had the time and inclination to find a more elegant solution. I wrote a script in Ruby that would let me write the above example without any spacing, markup or attempt at formatting, and then with one command wrap it in the proper format. It’s made my blog life a lot easier. But it’s no help to other bloggers who want to include scrippets, or readers who want to post a scrippet in the comments section. It’s too home-brewed and specific.

Ultimately, I’d like every blogger to be able to include scrippets, both in posts and comments. (And forums, though that’s its own beast.) But that’s a hell of a lot of work to support multiple systems and scenarios. So let’s start a little smaller.

Geeks wanted

I want to create a Wordpress plug-in that would let a blogger or commenter write…

<scrippet>

MARY
Anything you want to tell me?

FRANK
I swear, honey, I don't know how mayonnaise got in the piano.
</scrippet>

…and end up with…

MARY

Anything you want to tell me?

FRANK

I swear, honey, I don’t know how mayonnaise got in the piano.

However, that’s simply beyond my coding prowess. Wordpress is built around PHP, and while I can understand it well enough to modify a simple template, I fail to grok it the way I do Ruby and Python. But I have a feeling some of my readers could write the PHP equivalent of my script while half-watching Battlestar Galactica.

If that sounds like you, and you’re up for the challenge, I encourage you to muck around with the code and share your progress. Wordpress is trivial to install, with a big developer community. See what you can get working, and include a link to let me and others see your progress.

Here are some caveats, pitfalls and other bits of advice to help you out:

Since you’ll be setting hooks to filter the text, you need to play nice with other plugins that do the same, such as Markdown. Michel Fortin has a useful post about some of the challenges in doing Markdown for Wordpress.³
While my script shows the scope of what I’m looking for, Dwayne Bent has already created a much more sophisticated version for DokuWiki in PHP. He’s busy with school, and unfamiliar with Wordpress, but offers up his code under the GPL if it’s helpful.
<scrippet> may be a terrible delimiter, prone to wonkiness. So other options are welcome. One I’ve considered is +- and -+, which coveys the idea of creating a box around something.
The CSS actually does quite a bit of the work. Let your code identify and label the elements, but leave the formatting to the CSS.
The plugin should include the CSS — yet make it easy to modify the CSS to suit an individual blog. Specifically, a blogger will want to be able to control the box width, background color, text color and padding. A straightforward admin screen in Wordpress seems doable.

I have no timetables or deadlines for the project, but I will offer up a signed Nines poster to a coder who comes up with a viable and elegant version of the plug-in — and of course, heaps of praise and bragging rights.

And if Wordpress isn’t your bag, but you feel the calling to take on a similar version for another platform (Movable Type, bbPress, vBulletin), by all means go for it. If this comment thread gets out of control, I’ll move it to a different forum.

UPDATE: Just over 24 hours in, there’s been a lot of progress. Thanks to everyone who’s given a chunk of their weekend to the cause.

By Monday or Tuesday, I’ll be posting a link to a test blog where readers can try out the plug-in for themselves. Before releasing it into the wild, we want to make sure it works with a range of stock themes and feels intuitive to readers leaving comments.

If you look at the example in the original post, it comes from the script for The Nines, which I was writing at the time. ↩
As originally implemented, I used an unordered list instead of a div, and styled list items for the individual lines. It was trendy, but two issues made me switch. First, blog comments are also list items, so nesting another list inside kept creating issues. Second, feed readers don’t get any CSS styling — they got a bullet list. So, for now, it’s divs and p’s. ↩
And yes, I asked Michel if he wanted to write a scrippet plug-in, but he declined. ↩

August 22, 2008 @ 11:00 am | Comments (46)
Filed under: Geek Alert, Hive Mind, Scrippets

46 Responses to “Scrippets, PHP and a call to coders”

Eric
August 22nd, 2008 at 12:00 pm
John,

This looks like something that can easily be created in CSS instead of a plugin. I do most of my work with Movable Type. Feel free to email me.
John
August 22nd, 2008 at 12:20 pm
@Eric —

To be polite, I don’t think you read it carefully. It is created with CSS. The plugin would generate the markup and embed the CSS so Average Ordinary Bloggers could include snippets without having to think about divs and classes.
Mark
August 22nd, 2008 at 2:34 pm
John, I code something up quickly in a standalone PHP page — I think this will do the trick.

It fully supports your first example with your HTML (i.e. beyond just characters and dialogue, it supports a scene header and action).

I even used your original CSS, and so it should fit in quite nicely!

A couple rules: A scene header must contain space-hyphen-space: ” = ” An action contains an asterisk as its first character

Here is an example. If you like it, just shoot me an email and I’ll incorporate the PHP into a Wordpress plugin:

http://www.garmana.com/scrippet/scrippet.php
John
August 22nd, 2008 at 2:50 pm
@Mark –

Quick work.

I’d like to get rid of any special markup requirements for an element. If you look through my Ruby sample, I do a check for uppercase. If it’s not uppercase, that means it must be dialogue, action or parenthetical.

Parenthetical is easy. First character is a (.

Dialogue always and only follows a character name. So when I mark a character name, the next line is automatically dialogue.

That leaves action as the final remaining option.
Tom Corwine
August 22nd, 2008 at 3:07 pm
Thinking out loud:
1. Scene headings and characters are always upper case.
2. Action and dialog are mixed case.
3. Dialog always follows character.
Seems fairly simple at first. Is it fair to say that scene headers will always start with INT. or EXT. ?

Mine always do, but I’m asking to be sure.
Anonymousey
August 22nd, 2008 at 3:25 pm
Frank’s line should read;

FRANK I swear, honey, I don’t know ‘how’ mayonnaise got in the piano.

Not:

FRANK I swear, honey, I don’t know mayonnaise got in the piano.
Johnny
August 22nd, 2008 at 3:28 pm
Yeah people, make it so… Screw Final Draft, I want to write my next script on johnaugustdotcom!
John
August 22nd, 2008 at 3:47 pm
@Tom:

Yup. Read the Ruby script and you’ll see that’s how I do it.

@Anonymousey:

Fixed. Thank you.
Nima
August 22nd, 2008 at 5:08 pm
I have a plugin, BUT, it doesn’t automatically add the CSS yet, and it leaves Action lines alone (the CSS itself can account for that).

It needs wicked testing, though. Do you want me to email it to you, and if so to what account?

Warning: it is a bit dirty.
Tom Corwine
August 22nd, 2008 at 6:17 pm
Okay, here’s what I have so far:

http://www.tomcorwine.com/scriptlet.txt

It’s a work-in-progress of a WordPress plug-in. It’s activated/deactivated by putting two equals signs at the head of the line:

==

Right now, the css class names are hard coded. I did a little research and noticed a plug-in can have options in the admin interface. Maybe I’ll create something in the admin panel so the user can set the class names.

I’m not quite clear on how a plug-in can add css. Does the user have to manually paste it into the style sheet?
Will
August 22nd, 2008 at 6:26 pm
Boy, people are really quick, I thought I’d be the first one to finish something. This one inserts the css and also allows it to be edited via the settings page though, so hope somebody finds it useful.

http://redheadedleague.com/scrippets.zip
Nima
August 22nd, 2008 at 7:21 pm
Tom, I couldn’t get your script to work. All I got was action lines. Maybe I formatted the script text wrong or something.

So, OK, here’s the one I cooked up for people to test out. It’s rough, in that really I should split out the text between the scrippet tags and only modify that, but I was being a little lazy, and (somehow) it doesn’t seem to be screwing up any of the content on my test site (that’s why I need help testing). Instead of brute forcing it I decided to go the regular expression route. Meaning I’m either insane or stupid. Probably both.

Please test: http://equinox-of-insanity.com/wp-content/uploads/2008/08/scrippet_ny.txt
sandofsky
August 22nd, 2008 at 7:24 pm
I’ve created a source repository on github so people can contribute like any open source project. I did a checkin of the original script. Next I plan to write some automated tests, so that whoever writes an implementation has something to run against to prove they’re doing things right.

John, just to make things kosher, would you mind if this is kept under the MIT license? (For those that don’t know licenses, MIT is basically a free-er GPL. Ruby on Rails is MIT.) Also, if you don’t like this, I’ll be happy to take it down.

Feel free to submit PHP ports. Because why not?

Here’s the repository:

http://github.com/sandofsky/scrippets/tree/master
mush
August 22nd, 2008 at 7:56 pm
Heh, here’s what I came up with at 100 lines of code: http://pastie.org/258418

It adds the scrippet formatting to posts, comments and excerpts, and imports the .css file. Works fine on my setup. Core is basically a port/transliteration of your Ruby script.

A few notes: - An admin panel that allows editing the stylesheet would have to be advanced enough to make it match a given site’s theme. That would take a lot of work, and it would probably be just as easy for the user to edit the relatively light .css by hand, instead. - This requires extensive testing before live use, obviously. - Might bug out on bad input (though in my testing it survived bad/unclosed tags). - Could become quite resource hungry on large threads… would require writing formatting to database/caching, which is bad for editing…

Unfortunately I won’t be able to attend to the above, so if anyone wishes to expand on it, please feel free.
Anonymous
August 22nd, 2008 at 8:19 pm
Along these lines, have you seen this?

http://www.plotbot.com/

Created by a couple USC film grads, some kind of on-line collaboration wiki-style interface…
GPSchnyder
August 23rd, 2008 at 5:12 am
You could use AddQuickTag for the classes, then you just have to enter the CSS to the stylesheet. At least till the Plugin works.

It makes Buttons for the Editor. Than you just have to select the Header and click the Sceneheader button, select the Name, click the name button and so forth. The Action doesn’t need a Class, as it can be the standard for the Box.

But a Plug-in would be so much more cool (but less geeky ;-) )

George
Tom Corwine
August 23rd, 2008 at 8:29 am
@Nima – My plug-in works fine for me on WordPress 2.3.

Odd, though, I’m getting nothing but action lines when using Will’s plug-in. I wonder what’s going on.

I like the way Will handled the css. The ability to edit css under the options panel is convenient.

In the options panel on my plug-in, I was going to make the delimiter configurable. That way, the == I chose to use could be easily changed by the user.

After looking at everyone else’s code, I don’t know why I didn’t think to use regular expressions. It’s a much better way of doing it, rather than torturing the if() function.
Tom Corwine
August 23rd, 2008 at 9:35 am
Quick update:

From my tests, using either Will’s or my plug-in, the formatting works great the first time. However, once an edit is performed on the post, everything becomes action. Anyone else getting similar results?

Maybe it would be a good idea to have the plug-in filter the content before storing it in the db (i.e. using content_save_pre instead of the_content). It might make it a bit hard to edit the script later, but that can also be dealt with using content_edit_pre.

It would also make the plug-in way more efficient. Rather than running every time someone viewed the page, it would only run when the blogger hit submit.
Nima
August 23rd, 2008 at 9:58 am
@Tom,

NO, NO, NO… do NOT modify the user’s input before storing to the database! What a person types into a box they expect to see when go back to edit it!
Will
August 23rd, 2008 at 10:15 am
Yeah, I agree with Nima, running it before it’s in the db is a bad idea. Running a couple regexes on every view isn’t going to make any difference in performance with all the work wp is doing already.

And Tom, I couldn’t duplicate your editing problem, I’m running a fresh install of 2.6. Is there some plugin you have running as well that I’d need to take into account?
Nima
August 23rd, 2008 at 10:24 am
OK, here’s my plugin. It adds the CSS (which I copy and pasted from Will, but that doesn’t look 100% right), and it does so via a LINK, not through an admin panel.

I tested Will’s and had no problem with it. It worked fine. I’m going to stop at this point. I think Will’s works well enough. But for posterity, here’s the what I ended up with (with CSS): http://equinox-of-insanity.com/wp-content/uploads/2008/08/scrippet_ny.zip
Matt2000
August 23rd, 2008 at 11:17 am
Here’s a module for Drupal 5 that uses John’s CSS (slightly altered to avoid conflicts) and mush’s PHP version of the Ruby script (slightly altered to add I/E as an allowable sceneheader opening):

http://ninjitsuhosting.com/files/scrippet-5.x-0.1-beta.tar.gz

Just enable the module, and add the ‘Scrippet’ filter to your Input Format. (If using Filtered HTML, you’ll need to make sure ‘p’ and ‘div’ tags are allowed. You’ll want to also use a filter like HTML_corrector to keep commenters from breaking your layout with unclosed div’s.

It seems to play well with other filters. E.g., if one of your characters speaks an email address, URL filter can turn it into a clickable mailto link. But you might want to keep an eye on the order of your filters if you’re having trouble.

If there’s sufficient interest, I’ll make a Drupal 6 version, and release them both on Drupal.org.

Enjoy!

(Do I get a signed poster?)

Matt Ninjitsu Hosting & Development http://www.NinjitsuHosting.com
Matt2000
August 23rd, 2008 at 11:26 am
PS – Under Drupal, the script will not suffer from mush’s concern about resource hogging, as Drupal takes care of the cache for you (and can even compile & compress the CSS with everything else).
John
August 23rd, 2008 at 1:39 pm
I’ll be installing a couple of these on a test blog tomorrow (Sunday). In the meantime, if anyone has test blogs set up (for instance, to allow scrippets in comments), by all means include a link.
Will
August 23rd, 2008 at 3:56 pm
People can kick the tires at:

http://redheadedleague.com/wp/

Although since wordpress doesn’t allow any html at all in comments, you’ll have to use a slightly different format:

MARY

Hi!
Tom Corwine
August 23rd, 2008 at 5:27 pm
@Will – Nope, no other plug-ins at all.
Tom Corwine
August 23rd, 2008 at 5:46 pm
With version 2.6.1, I’m not able to replicate the problem I noticed with 2.3.
Carrie
August 23rd, 2008 at 6:17 pm
Oh, my, god! I almost cried when I saw this post. I’m so excited about finally getting some screenplay snippets (or, scrippets rather!) into my posts and web pages.

To make sure I have everything correct, which is the plug-in I should use? I see that there are three on the board now? Are they all pretty much the same — in the sense that I upload them to my word press and they just work like a plug-in? Or, do they work completely different all together? I notice when you click on the links the CSS pops up. Is there a way to just download these as wordpress plug-ins?

I apologize, I’m really bad at this when it comes to really geeking out (really wish I had taken the class back in high school now) so you might have to explain stuff in baby language.

Thank you so much for your efforts guys and thank you Mr. August for answering my prayers. Carrie
John
August 23rd, 2008 at 7:41 pm
@Carrie:

While you could install any of these, I think we’re at least a week away from a plug-in that is likely to function well for most users, and further still from a plug-in that is highly recommended. By all means, feel free to try them out, but I’d back up your blog first.
Carrie
August 23rd, 2008 at 9:33 pm
Thank you, I will definitely keep that in mind, especially since I don’t really know what I’m doing technical-wise. Until then, I will wait patiently over in the corner until asked to speak.

Thanks, Carrie
Nima
August 23rd, 2008 at 11:33 pm
Carrie,

In the case of mine, download the zip file, decompress it (unzip), and copy the entire scrippet_ny folder to your wp-content/plugins folder. Then activate from your Wordpress Admin control panel.

Though regular database backups are ideal, you actually don’t need to back up your blog to test my plugin out. Long story short, it only changes the text while the text is going from your database to your blog page–it’s not permanently altered.

SO, if you try my plugin and it doesn’t work right, all you have to do is Deactivate it from your Admin control panel and your blog will immediately return to normal. No danger.

This is true of my and Will’s plugins. Tom’s was this way, but he was talking about changing it so I don’t know what’s going on there. In other words, and to everyone, please don’t be terribly afraid to test out my or Will’s plugins (both seem to generate the same final result, btw). This kind of testing is what’s needed.
Carrie
August 24th, 2008 at 3:51 am
I have no problem being a guinea pig for this plug-in. Do I just activate it and then when posting I can just tag it?

or do I need to be in the HTML view to use it?

Carrie.
John
August 24th, 2008 at 7:21 am
Reader Andy is having a hard time posting a comment. He writes…

Since I can’t post no matter what I try, would you please mention my plugin next time you post? It may be found here:

http://imol.gotdns.com/filemgmt/index.php

Thanks.
- Andy
Tom Corwine
August 24th, 2008 at 7:59 am
Don’t use my plug-in, it’s incomplete. What I posted here was a work in progress. I stopped working on it when Will posted his, which seemed to be better written and ready for testing.

I have never written a WordPress plug-in before, so I was fumbling my way through it.

So, no, I’m not going to change my plug-in to make writes to the database. I was just throwing that out to get feedback, and the more experienced (or at least read the documentation more thoroughly) WordPress plug-in writers have spoken.
Will
August 24th, 2008 at 8:31 am
Hey Carrie, I believe most of the plugins use <scrippet>, not [scrippet]. Mine looks for both because wordpress does various things when it thinks it sees html, and I decided it was easier to not to tempt it. A happy result of that, I just found, is that you can put [scrippet] in either visual or html mode, and it’ll work, while you have to be in html mode to use <scrippet>. I also just tweaked the default css a bit, so you might want to download it again.
John
August 24th, 2008 at 9:31 am
Based on my testing, [scrippet] seems to be the better choice, for the reasons Will states.
Nima
August 24th, 2008 at 12:52 pm
Quick update:

I modified and reuploaded my plugin to work with both and [scrippet] tags, and I cleaned it up so that it does now split out the tagged content before modification (I found one edge case where it would incorrectly modify text in the previous version of the plugin). I’ve also added Transition support, which was missing in the previous build.

If you try out the plugin and you have a problem please email me with a description of what the problem was and the input you used, and I’ll try and figure this out.

Thanks.
M@
August 24th, 2008 at 2:33 pm
For those of us that don’t run WP, I’ve created a JavaScript parser for Scrippets. You can grab it from here:

http://gist.github.com/7012

I plan on putting the scrippets in a PRE tag, with a CSS className of ’scrippet’ and then using jQuery to format them onload. Something like this:
```
$(function() {
  $('PRE.scrippet').each(function(){
    // replaces the PRE with the generated HTML...
    $(this).before( Scrippet.render( $(this).text() ) ).remove();
  });
});
```
I think the PRE will look passable in RSS feeds.

Thanks, John, for sharing your Scrippets idea and ruby script!
Nima
August 24th, 2008 at 9:24 pm
OK, one more update. I added an Settings panel that allows you to change the box width, background color, and text color of the scrippet. Other options can be added as the need arises. I also included a reset button, so if you feel like you’ve made a disastrous mistake it’s easily fixed.

If you have any problems or suggestions please let me know.

http://equinox-of-insanity.com/wp-content/uploads/2008/08/scrippet_ny.zip
Drake Varley
August 25th, 2008 at 2:15 am
Is there a possibility to copy this code into Invision Power Board so that when you turn the HTML on, it will accurately display all the script elements?
John
August 25th, 2008 at 10:25 am
@Nima:

Thanks. I’ll check it out.

@Drake:

When we get the Wordpress one working well, we’ll start to look at how it can be implemented on other systems. Unfortunately, it’s not always as straightforward as you’d think.
Drake Varley
August 25th, 2008 at 1:22 pm
Thank you for the reply, John! I’ll be patient!
John
August 27th, 2008 at 7:45 pm
JOHN

Please, oh please work.
Anna
September 1st, 2008 at 8:13 am
INNI. WORLD CLASS – DAGUR

Þeir Bárður og Þari róa sem ákafast. Olíukenndur svitinn hríslast niður sterkbyggða skrokkana og safnast í polla á róðravélunum.

BÁRÐUR
(fnæsandi)

Ég ætla að fá mér svona skrippett. Engin spurning.

ÞARI

Er það ekki rándýrt?

BÁRÐUR

Örugglega.

ÞARI

En virkar þetta, ég meina upp á íslensku stafina að gera og ...

BÁRÐUR

Já, já.

(dok)

Eða ég get fjandakornið ekki ímyndað mér annað.

ÞARI

Þú skalt tékka á því fyrst áður en þú ferð að leggja út fyrir þessu.
Anna
September 1st, 2008 at 8:19 am
It worked!

Almost.

My Scene Heading got turned into Character and my Action was transformed into Dialogue.

Clearly the scrippet requires INT. or EXT. to recognize Scene Heading.
Vasilisa
November 5th, 2008 at 7:32 pm
Fun. Add to your bookmarks. And how long it took to write articles?