if you don’t make a post about a cool 11ty plugin on your 11ty blog they send you to jail

this one is about eleventy-plugin-typography and it is my saviora blog post about a blog5 min read

I have spent a non­s­mall amount of time learn­ing how to au­to­mat­i­cally fix the dumb­est, small­est thing that could pos­si­bly mat­ter on this blog. In my de­fense, I want you to look at what my ti­tles were do­ing be­fore:

example of the header being cooked
this is a cooked header

Looks like shit, right? The there in that head­line’s called a widow, when a sin­gle word hangs out on a new line and it kind of makes the whole head­line have an awk­ward­ness in read­ing it. I don’t know much about ty­pog­ra­phy–I put a mono­space font on my blog be­cause it looks pretty in my text ed­i­tor, not be­cause I ac­tu­ally know the im­pli­ca­tions of putting mono­space onto a bunch of words you have to read–but I do know that this makes my blog look bad, which is a war crime. Unfortunately for me, the ac­tual way to fix this through CSS does­n’t have good com­pat­i­bil­ity yet, so how do all the other peo­ple with blogs fix this?

Usually, with a non break­ing space, or nbsp; you’ve likely seen one be­fore, prob­a­bly when a web­site fucked up and showed you that short­hand in­stead of, like, the ac­tual uni­code char­ac­ter. It looks 1:1 like a space, but it tech­ni­cally is­n’t, mean­ing that if you place it be­tween the last two words of a head­line in­stead of a space, your browser treats both of them like a sin­gle word.

example of the header being less cooked
this is less cooked

Note that there’s enough space here for bad to be in the first line, but be­cause bad ac­tu­ally is read like one word by the browser, it fucks off where it should. I want that! I do not want to do that man­u­ally, how­ever; the whole ap­peal of mark­down is that I can read it, and it’s go­ing to show up as junk on my text ed­i­tor un­til ren­dered, which makes it way less read­able.

If you google this prob­lem on­line, you’ve prob­a­bly copied a fil­ter off some­one, right. Something named, like, nb­sp­Please­AndThankYou or what­ever, and then you pop it into your tem­plate like

{{ title | nbspPleaseAndThankYou | safe }}

and then it au­to­mat­i­cally checks the last two words of what you put in. Assuming they aren’t too long, they’ll put the nbsp in au­to­mat­i­cally. For the stuff I can put at the top of my doc­u­ment, this mostly works, with caveats. Try mess­ing with your desk­top win­dow size at the top of this page, and note that the eleventy-plu­gin-ty­pog­ra­phy bit of my de­scrip­tion won’t play nice with this; hy­phens will still break it, but what­ever, good enough un­til the browser sup­port gets bet­ter, surely.

Problem: if you’re weird enough to care about that, you prob­a­bly care enough to want it every­where other than just that one header? I’m a freak who loves putting head­ers every­where in my mark­down! I’m not gonna spend like an hour wor­ry­ing about that shit like it mat­ters if I can only put it there! You can’t just throw a fil­ter on your con­tent tag and call it a day, be­cause then you’ve just added it to the lit­eral last two words of your post and nowhere else. You’d think from how many vari­a­tions of this fil­ter there is, this would be an im­pos­si­ble en­deavor.

but WAIT look it’s work­ing right now, in this very head­line

Permalink to “but WAIT look it’s work­ing right now, in this very head­line”

Yeah no it turns out that some­one set up an 11ty plu­gin us­ing a javascript li­brary de­signed just for this prob­lem four years ago, it’s just hid­den in a repo so ob­scure that it’s a com­pletely empty-look­ing plu­gin on npmjs. I only found this by com­plete ac­ci­dent while on google, misclick­ing yet an­other ar­ti­cle with a fil­ter that would­n’t work, and I am ex­tremely thank­ful be­cause I prob­a­bly was go­ing to bash my head against the wall for hours more un­til then.

Install it:

npm install @jamshop/eleventy-plugin-typography

Add it to your con­fig:

const nbspAndOtherThingsTooIGuess = require("@jamshop/eleventy-plugin-typography");

module.exports = (eleventyConfig) => {
// draw the rest of the owl

and then throw it into your tem­plate like

{{ content | windont | safe }}

and it just works™, putting it not just on every head­line, but in every para­graph for good mea­sure. (Replace widont with ty­pogrify for the rest of the shit that it comes with, but it’s mostly CSS styling I don’t use or smart quotes that mark­down-it al­ready does.)

badposts.boo by nomiti ityool 2024
CC BY-SA 4.0 unless marked otherwise
made with Eleventy v2.0.1

rss feed lives here
if you use this for AI i hope my dogshit sentence structure poisons it