c1qfxugcgy0:

I wrote a simple stylesheet for making pesterlog text. The source file is on github. (Report bugs there) Here’s how to add it to your theme.

1. Hit tumblelog customization, then click on “Edit HTML”
   (You can also copy and paste the contents of pesterlog.css into the “Custom CSS” field, if you’re a wuss.)
   
2. Find your existing <link rel=stylesheet> tag.
   
3. Insert <link rel=stylesheet href=https://static.tumblr.com/lbljhin/7Agmc1171/foo.css type=text/css>
   
   Incidentally, the HTML language completely ignores whitespace outside of block elements. I added a bunch of space to make the link tag obvious, then removed it after I took the screenshot. It doesn’t matter if it’s there or not.
4. Click “Update appearance”, then click back to “Appearance”, then hit “Save”
5. Now when you’re writing a pesterlog, encase each line with <span class=kid name>
   
6. YOU’RE DONE
    

OR YOU COULD

1. Write pesterchat like this, instead:
   
   Paragraph tags do not have to be closed. Blockquote tags do.
2. It will look like this, instead:
   
   This is less flexible than the other method, since the blockquote element will force a paragraph break, (can’t put a pesterlog inside another chunk of text) and each line is a paragraph tag, which forces a line break. (can’t mix pesterchat and normal text)

---

I had to reimplement pesterlog-colored text for a… thing recently, (Not fanfiction! Nope! Nosir!) and I figured I might as well write a post about it, in case anyone cared.

TG: why the fuck am i watching football anyway
TG: these goddamn commercials are mind abrasive
TG: like reaching into my skull and giving my optic nerve a good scrub with steel wool

TT: It is Thanksgiving, Dave, I believe it is traditional for men to watch sporting events while the women prepare food.

TG: and yet i see you sitting on a couch, rather than in the kitchen
TG: rose subverting traditional gender roles i for one am shocked

The foundation of the web technologies stack is HTML/CSS. (or, depending on your perspective, the pinnacle) In theory the two languages are divided into content and presentation roles: the HTML is used for text, and the CSS is used to control how that text appears on the screen, or cellphone, or printed page, or holographic smell-o-vision.

In practice this dividing line is wide and fuzzy, with both languages having features that are not strictly related to their roles. HTML is about the worst data-interchange format ever to exist, due to its block-level layout, which also means that CSS is notoriously bad at positioning elements, without resorting to absolute-value pixel-based layouts and ugly tangles of ifdefs needed to shim around various browser’s interpretations of what a “pixel” means.

This awful state of affairs have caused some nerds to suggest that a three-way split is needed, content/posistioning/presentation; presumably for HTML6, when WHATWG starts working on it in 2018. This is a great idea, which will never ever happen.

Anyway, MSPA uses CSS to format the pesterlogs, and using the magic of view-source, we can see how they did it.

<p style=" font-weight: bold; font-family: courier, monospace;color:#000000">
<span style="color: #929292">UU: hello there, darling. ~3u</span>
<br />
<span style="color: #1f9400">GT: Ahoy madame!</span>
<br />
<span style="color: #929292">UU: i dont relish troUbling yoU with more arm twisting.</span>
<br />
<span style="color: #929292">UU: im sUre for all ive done so far yoUve had a jolly good workoUt already :u</span>
<br />
<span style="color: #929292">UU: bUt yoU will be ready to deliver the package today, yes?</span>
<br />
<span style="color: #1f9400">GT: Im determined as ever to see this through. 
But as usual events have conspired to make a boondoggle of the prospect.</span>

This isn’t the worst possible way you could do it, (you could make it worse with javascript; which ought to be that language’s motto) but it’s pretty close.

(Unhappy parenthetical: I had avoided looking at the source of mspaintadventures.com, since, as counterintuitive as it may seem to the long-term reader of this blog, I do not actually go out of my way to find terrible things to get angry at. But MSPA uses a table-based layout, complete with egregious misuse of bgcolor. It still uses <center>! It still uses <font>! What is this, 1996? These HTML tags have been depricated for thirteen years!)

Inline CSS is perfectly valid, and occasionally useful, in development. But combining HTML and CSS in the same file throws the content/presentation split out the window, and defining the color for every line is just sloppy!

One of the strong, practical benefits of that split is that you can use the same CSS to style a bunch of different pages. Wikipedia has 3,804,772 articles, and every one links to the same CSS file. This file is static content (hardly ever changes) unlike the article itself, (changes quite a lot) so you can cache the hell out of it, and mirror it across a bunch of web servers without worrying about it being out of date.

You could inline that CSS in every article, if you wanted to use up 78 more gigabytes of disk space. And a lot more than that in bandwidth, of course, since you would be getting a whole new copy of the style sheet every time you loaded a new page, because embedding it in the page text makes it impossible to cache.

So let’s move the CSS into its own file, and link to it. <link rel="stylesheet" href="http://bbot.org/pesterlog.css">

Now, an important part of programming is using meaningful names. (Old joke: “The two hardest problems in computer science is cache validation, naming things, and off-by-one errors”) We could use <span class="C4NDY R3D">TG: yo</span> and <span class="OR4NG3 CR34MS1CKL3">TG: sup</span> as the HTML hooks for the external CSS file, but remember the content/presentation split! C4NDY R3D just describes the text, it’s pure presentation, it doesn’t expose any deeper meaning of the text in a programmatic way that the computer can understand. HTML5 is supposed to be semantic, so let’s be semantic.

<span class="dave">TG: blah blah safety</span>
<span class="davesprite">TG: blah blah vitamins</span>

Now when Lord English kills Dave so hard that he’s retroactively erased from the comic, we can easily use display:none to not render just his text, rather than everything on the site that’s candy red.

The CSS is slightly more verbose than it needs to be, because I wanted it to be able to style both span and paragraph tags, as well as pesterlog text inline with normal text. You could make it smaller, and render faster, if you put the font style stuff in a blockquote selector, then font color stuff in the kid-specific tags. In fact, let’s do that: pesterlog2.css.

This file’s smaller and faster, but the usage is slightly more complex:

<blockquote class=pesterlog>
<p class=jake>GT: Bally good show, chaps! What ho!
<p class=dave>TG: wow<br>
TG: john and jades kid is a mondo nerd<br>
TG: theres a big surprise<br>
TG: i got chills here<br>
TG: surprise chills<br>
TG: from being so surprised
<p class=bro>TT: Yes, dad, we get it
<p class=dave>TG: oh come on bro what the fuck dont call me dad<br>
TG: that is just wrong<br>
TG: dont care if its true kinda sorta maybe
</blockquote>

(Fun fact: under HTML5, you don’t have to close paragraph tags. You don’t have to use self-closing tags either, (like <br />; you just use <br>) since it isn’t XML. You don’t need to close <html>, <head> or <body>. In fact, all three of those tags are completely optional. Not needed at all. Validates perfectly fine without them.)

It also looks different: since it comes with a container element, I added the dashed gray border, gray background, box padding, and 600 pixel width that MSPA.com uses for the pesterlog box.