Scrippets

Little boxes of screenplay goodness.

Scrippets » Other blogging platforms

Scrippets Maker for other blogs and forums

(8 posts)

  1. We've hacked together a solution for some blogging systems that don't allow plug-ins. It's not as elegant as the Wordpress solution, but it generally works.

    FIRST: INSTALL THE CSS

    In order to use Scrippets on your blog, you need to paste some code to handle the formatting. This is called CSS, and it already handles all the layout and typography on your blog. You just need to add a little to it.

    1. Figure out where the CSS is stored. In most systems like Blogger and Tumblr, it's under a tab called "Customize," "Template," "Layout," or "HTML." If you see blocks with double-curly braces {} and descriptions of fonts and borders, that's probably the CSS.

    2. After the last of these -- but before a </style> tag, if it's there -- paste the following block of text:

    /*
    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;
    }

    3. Click on "Save Template" or whatever your system calls it.

    You now have the CSS installed. Next, let's make a Scrippet and see if it works.

    SECOND: HOW TO MAKE A SCRIPPET

    4. Go to the following URI: http://scrippets.org/maker.html

    5. Follow the instructions to create a scrippet. When you're done, copy the text in the "Converted Text" field.

    6. Make a new post. Paste in the text you copied.

    7. Publish and your scrippet should come through properly formatted.

    Does it work? Please let us know, below.

    Does it not work? Please let us know, below.

    In testing, we've found that certain blogging themes are adding in extra lines. Also, some themes use columns narrower than the default scrippet width. Some of these issues we can fix; some we can't.

    Posted 5 months ago #
  2. John, thanks for the CSS on this.

    A question: any thoughts about adaptations for the Scrippet CSS that might be made to work in posting venues like LiveJournal?

    I have a WP blog (where the plugin works wonderfully!), but also an LJ mirror. I don't post screen material all that often, but it'd be nice to have the output "scrippeted" on the LJ as well. I'm quite happy to cut-'n'-paste CSS into an entry inside "div style" tags. Maybe this is an avenue you've already explored? If so, can you point me at the posting? :)

    Thanks! (And thanks for getting this concept out there: it's such a terrific idea.)

    --DD

    Posted 5 months ago #
  3. erikharrison
    Member

    Indeed - is there a good reason (other than I suppose a certain technical elegance) for not using inline styles in the scrippets generator? While it might generate less pretty code, it would work absolutely every place that you can drop HTML, and it seems highly likely that "action" and "transition" classes will eventually conflict with some hard coded global style.

    Posted 5 months ago #
  4. @dduane and @erikharrison:

    Inlining isn't something we've tried. I'm not outrageously opposed to it, but it has a few frustrating limitations:

    1. The blog/forum owner has no opportunity to create (or recreate) consistency. Each scrippet is really an entirely separate thing.

    2. I could imagine a lot of blog/forum moderators getting upset if their readers started doing this a lot without their blessing. It's an easy way to get all HTML banned.

    3. Unless you define the whole stylesheet at the start of it, any semantic meaning is lost. A human reading it is unlikely to understand what each line is supposed to represent if it's hard-coded to each paragraph.

    A thought: We might try adding a checkbox to Scrippets Maker: "Embed stylesheet" with a popup explaining where it works (LiveJournal) and where it doesn't.

    To me, at the point you're pasting in raw formatting, you might as well be pasting in a graphic. That's a general solution I'd like to hit over the next few months: pasting a link to a scrippet jpg stored on Scrippets.org.

    Posted 5 months ago #
  5. I agree with John that inline styling is a less than ideal, if not outright bad, idea. Like John, I'm not, however, outrageously opposed to it, but it would require a bit of work on the programming guts of the scrippets engine.

    I also agree with John that, if we're going to do all that work, we might as well output images for you to copy and paste or link to. I vaguely recall how to code that up, but I won't be able to get to it for about 2 weeks.

    Posted 5 months ago #
  6. Hello Folks,

    first off, I really appreciate the artful work on "Scrippets". It's brillant. Thanks.

    Now to the (inevitable) question. ;-)

    Maybe it is just me. Well, I'm not a native English guy, so I guess no one else came across this particular issue I've got so far. Though, I really really would like to start a "Sceneheader" by writing the words "INNEN" (that's INT.) and "AUSSEN" (that's EXT.) respectively. Right now, by definition, you have to write either "INT." or "EXT." to create a sceneheader. Just allow to write INNEN and AUSSEN respectively. That would be gorgeous.

    However, thanks for the work.

    Best

    WiB

    Posted 3 months ago #
  7. I think I could slip that into the plugin on the next update.

    In the meantime you can work around this by just typing the whole thing in all caps (it should look the same as a sceneheader under the default CSS, but no promises).

    Posted 3 months ago #
  8. Hello Nima,

    thanks.

    However, you're right, it works quite good as you've proposed above.

    Best

    Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.