Using the CSS basic box model for RPG stuff

If you've ever constructed a web page, you'll most likely have heard of CSS.

If you have not, this post is probably mostly gibberish, or gallimattias as we say in Sweden.

So, there's this thing that's called CSS, and it controls how things look on a web page, i.e. how text flows and make it scroll across the page oh no wait they deprecated that, the bastards.

And one of the basic building blocks of CSS is how to properly size things, and what constitutes the immediate area surrounding something - which when I started to think about it late one night, sounded a bit like something you could apply to RPGs.

Because, for every little thing that exists in RPGs, be it monsters or tows or NPCs, there exists at least ten different methods of creating it. So here's one more, completely untested and not necessarily meant for serious work. But hey, I'm struggling to keep my interest for RPGs and this blog alive.

So, in short, everything is made up of: content, padding, border and an invisible margin.

Image from Mozilla Developer Network

(Since this is not a thesis, I'm not bound to present this is any logical or even coherent way. It doesn't even have to be true, so I'll just write it all out here, let me know where I lost you, ok?)

So, let's apply this to create or define or refine a NPC for instance. Let's just create a blank NPC shall we, so we have something to work with:

Clueless McClue

Clueless McClue is totally blank, all we have is this awful rendition of this NPC. Let's start from the outside to define this blank newborn.


MARGIN

From Mozilla:

"The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors." (emphasis mine)

So what empty, invisible field is separating McClue from her neighbours? Well it could a lot of things. Banishment (exiled), superstition (people keeping away from her - "'tis a witch!"), and so on.

Clueless McClue is shunned by the locals because she is believed to be a witch.

So if the margin is separating by an invisible force - from either side - a more physical approach would be the next layer, which is...

BORDER

From Mozilla:

"The border area, bounded by the border edge, extends the padding area to include the element's borders."

I'm thinking the border is more of a physical thing - a wall, a moat, a force of some kind (bodyguards) and so on.

So if McClue is a witch, and people are taking the long way round to avoid her (margin), what physical thing exists around her?

Maybe she's clad in scales?

Maybe she's wearing a non-typical witches armour that makes her look like a rook?

Maybe she's surrounded by a murder of crows, so thick you can't see her?

Ok I like that, but only a bit more than the rook look.

Clueless McClue is shunned by the locals because she is believed to be a witch.
She is constantly surrounded by a murder of crows, so thick you can't see her.

I'm starting to get a feel for this NPC, thank you very much Mozilla Developer Network.

What's next?

PADDING

From Mozilla:

"The padding area, bounded by the padding edge, extends the content area to include the element's padding."

Much like the technical description for border, this doesn't give us anything useful that makes for good clickbaiting, but in my brain padding is not another layer of space (like margin and border), but rather a stage to pad what we've already stated. To decorate.

(This stage is what gives you negative scores on Bryce's reviews. But remember that this entire post is just a dream. You're not really supposed to do this. I'm surprised you've read this far, actually.)

So let's pad our McClue:

Clueless McClue is shunned by the locals because she is believed to be a witch. All animals with more than two feet avoid her.
She is constantly surrounded by a murder of crows, so thick you can't see her. They're mostly silent, but some claim to have heard them form a single sound, much like a name or a spell.

Ok it's getting late here, so that's enough padding. I guess you could go wild there if you'd want.

Last thing is...

CONTENT

From Mozilla:

"The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image." (emphasis mine)

Ok, that got a bit more technical than we wanted, but I included it all just because I like the last sentence, the bit about background color.

Or in other words: WHY?

Why is Clueless McClue a witch?

Why is she surrounded by a murder of crows?

Why are they trying to form a name or spell?

Or ARE THEY?

Or IS SHE REALLY A WITCH?

Da da da DA-DUUMMM.... (Swedish reference)

So the content is the background image, the real deal, the answer.

And why not pad this as well? Why pad one step before the finish line? Because - and I'm making this up as I go - the content should be really short. The content should be the fact sheet, the cheat sheet. Don't pad the truth.

I'm guessing if this was one of those really well-thought-out posts from one of the really well-thought-out bloggers, they'd conclude this post with some really nice finish that made our Clueless McClue "NPC of the Month".

But I'm not so I'll just do two alternatives, the sad and the evil version:

SAD VERSION Clueless McClue is shunned by the locals because she is believed to be a witch. All animals with more than two feet avoid her. She is constantly surrounded by a murder of crows, so thick you can't see her. They're mostly silent, but some claim to have heard them form a single sound, much like a name or a spell. FACT: she was cursed as a young child when she drew a picture on her mother's kitchen floor, crossing lines with ley lines beneath their house, angering the old God of Crows. The sound that's heard sometimes is a spell that attracts more crows.

EVIL VERSION Clueless McClue is shunned by the locals because she is believed to be a witch. All animals with more than two feet avoid her. She is constantly surrounded by a murder of crows, so thick you can't see her. They're mostly silent, but some claim to have heard them form a single sound, much like a name or a spell. FACT: she is a witch. Her body has rotten away long ago, so there's nothing inside the murder of crows besides bones and hair, in a constant swirl. The sound that's heard sometimes is her evil thoughts - manifested as hot air - that slips out between the crows.

Ok I'm really tired now. Let's end this post with this image that shows how great the end result is, thanks to our faultless and perfect method:

Blö!

I know the Ravenloft image is really classic, but it's really stupid as well