Work Skin: scripts

[samjohnsson]

Cesy poked me to share this over here, so here it is!

One of the formats of writing that's seeing more publication on the Archive is that of script writing. Unfortunately, if you're not that code-savvy, formatting it will rely on a lot of nbsp; entries (which make kittens cry salty tears of misery) and manual line breaks (puppies wail in anguish). Fear not! For I have heard your suffering, and lo have I written some code for you to use as a Work Skin.

Most measurements are in percentages to scale properly, for screen width and for font size (it will break at much larger font sizes). I have used the font-variant: small-caps; property to mimic the upcase format style calls for (CSS3 does not yet have a font-variant: all-caps;.)

These are all designed to be used with the <p> tag and would look like:
<p class="dialogue">words</p>

The charnameinline style is designed to be used with <span> tags (<span class="charnameinline">name</span>) and is designed for character first reference.

On to the code!
/* I am using font-variant: small-caps; for many of these, as CSS doesn't have a variant: all-caps; . Otherwise, I'm leaving font size-color-face alone for accessibility reasons, instead of forcing Courier 12. */ #workskin .actscenenumber { font-variant: small-caps; padding-left: 5%; padding-bottom: 36px; width: 576px; } #workskin .sceneheading { font-variant: small-caps; padding-left: 5%; width: 576px; } #workskin .direction { padding-left: 5%; width: 576px; } #workskin .charname { width: 576px; font-variant: small-caps; padding-left: 45%; } #workskin .charnameinline { font-variant: small-caps; } #workskin .dialogue { width: 360px; } #workskin .parenthetical { padding-left: 40%; width: 576px; } #workskin .transition { font-variant: small-caps; padding-left: 70%; width: 576px; } #workskin .shotdescription { font-variant: small-caps; padding-left: 5%; width: 576px;

This code will work with any site that allows for CSS. If you want to use it on your personal site, strip out every instance of #workskin (and drop me a line to ask how to attach it to your site code). If you're using it on Tumblr or FF.N...well, I have no idea. I will play with making it work on DW, though don't hold your breath, since DW does weird things to HTML.

Comments

[samjohnsson]

Mod, can we get a 'workskin' tag instead of just the 'skin' tag?

[cesy]

Yes, sure :)

[fuck_yeah]

So this is really, really late and probably not an important thing to point out any more, but instead of font-variant: small-caps; couldn't you use text-transform: uppercase;?

[samjohnsson]

Now that I've had four more years of prefixes wend their way into my brain, yep!

[sunfox]

Just an update for anyone who wants to use this skin in the future: It still works! Mostly. As another commenter mentions, I'd replace "font-variant: all-caps;" with "text-transform: uppercase;", but that's just a minor thing and technically either will work. The main thing is that you absolutely cannot use "#workskin .action {", it will make your thing look really weird. Switch out action for any other word and it will work, but the "action" function on AO3 turns the action bits into a button-looking thing. (I know next to nothing about HTML or CSS so if I'm not using the most technical terms, excuse me.) But everything else is good, and it looks really nice!

[samjohnsson]

Oh, excellent, thank you - I'll edit things.

[samjohnsson]

I did leave the font-variant, though, as small-caps and uppercase are two different variants.