/reader

That extension has been sitting there since 2017, used by hundreds of people, with zero maintenance.

But Google being Google I now had to spend a moment figuring out how to update it in order to make it work with Manifest V3. The app is now in Google’s hands, I have zero clue how the process works and no idea how long is gonna take for the new version to show up on the Chrome Web Store. But I did my part. You’re welcome Rodrigo.

Privacy Policy

This post also doubles as the privacy page for the extension. The extension is literally 1 HTML file, 1 single JS function to make the clock work and a few lines of CSS to style the page. That’s it. The app collects no data, has no options, and there’s no paid version. If you have questions hit me up via email.

Thank you for keeping RSS alive. You're awesome.

Email me :: Sign my guestbook :: Support for 1$/month :: See my generous supporters :: Subscribe to People and Blogs

I’ve been chasing the white whale of responsive text-sizing for over a decade and I think I’ve got my best attempt to-date with the new attr() upgrades that landed in CSS (Chromium-only at time of writing).

See the Pen inverse text-sizing with attr by Dave Rupert (@davatron5000) on CodePen.

CSS’s attr() function got an upgrade this year where you can use it independent of content in pseudo-elements. They also added the ability to cast types to the values. Before that change all attributes were text strings and if you tried to use it in a calc() function, CSS would bail because you can’t multiply a pixel by a text string. With the new upgraded attr() function you can specify a type in the new type() function as the second parameter of attr(): attr(foo type(<number>)) .

Having these pieces of technology in place lets us mix in HTML attributes to our CSS math.

h1 {
  --ideal-cpl: 45;  
  --numchars: attr(data-numchars type(<number>));
  --ratio: calc(var(--ideal-cpl) / var(--numchars));
  --min-font-size: 1.2rem;
  --max-font-size: 4rem;
  
  font-size: clamp(
	  var(--min-font-size), 
	  var(--max-font-size) * var(--ratio), 
	  var(--max-font-size)
  );
}

We start with an --ideal-cpl, which is a typographic notion that there’s an ideal line-length at or near 66 characters per line and perhaps smaller on mobile (source: UXPin). Headings are probably less. We take that number and divide it by --numchars from our data-numchars attribute to get a ratio to multiply our text by (e.g. 45cpl / 60numchars = 0.75 or 45cpl / 30numchars = 1.5).

Then set some min/max variables and chuck it all into a clamp() function to enforce some limits. Anything under the --ideal-cpl will clamped to the --max-font-size and titles over the --ideal-cpl will shrink down until they hit the --min-font-size.

To help with graceful degradation in unsupported browsers (Safari, Firefox), we need to use the CSSOM @property syntax to typecast our --numchars custom property. This is a hint to browsers like Mobile Safari that --numchars is going to be a <number> and we can set a fallback value as well.

/* Property used to provide fallback to other browsers */
@property --numchars {
  syntax: "<number>";
  inherits: false;
  initial-value: 45; /* set to same value as --ideal-cpl */
}

Hopefully the “magic” here is pretty easy to understand but for completion’s sake, you’ll need to add data-numchars to your HTML to make this work.

<h1 data-numchars="71">
  Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Vitae, maxime.
</h1>

Templating languages can help. Here’s what I do in my Liquid templates for Jekyll:

<h1 data-numchars="{{ title.size }}">{{ title }}</h1>

If you don’t have access to your template but somehow have access to JavaScript, you can do something this:

document.querySelectorAll('h1').forEach(el => 
	el.dataset.numchars = el.textContent.length
);

I’ve went ahead and rolled this technique out on my entire site and made a All Titles page where I can tweak variables to my liking. The result is I get to keep my chonky headlines on mobile, but almost no heading wrap more than three lines. One improvement might be to use more CSS math to snap to different short/medium/long sizes, so its less cacophonous… but on my site you only see one display title at a time, so it’s less of a big deal.

Scaling text responsivebly

With all that in place, we have a HTML/CSS-based solution for responsive text-sizing with minimal overhead, no JS required, no extra DOM, and a graceful degradation to older browsers. I intentionally kept this dumb to allow for text wrapping, but Paul Irish forked me to make a contenteditable demo work edge-to-edge like Kizu’s Fit-to-Width or Zach Leatherman’s old BigText jQuery plugin.

See the Pen inverse text-sizing with attr - bigtext.js style - contenteditable dealio by Paul Irish (@paulirish) on CodePen.

Impressive. There’s lots of ways to resize text responsively and I’ve added another one to the pile, so here’s a little guide with how I’m thinking about all the options.

• If you want exact edge-to-edge text-sizing I’d probably recommend Kizu’s clever Fit-to-Width technique.
• If you (and your designers) are okay with not-so-exact edge-to-edge sizing, Paul’s approach seems like a good candidate.
• Don’t forget about SVG. Converting display text to outlines in Figma and exporting as SVG is also a nice option for exact fitting text one-offs, but doesn’t localize well.
• If you want text to scale-inversely to its length but still wrap, use the approach in this post.
• If you want text to be a bit more fluid between breakpoints, use clamp() + vw units.
• If you want text to scale based on it’s parent’s width like a vector, then DON’T USE FitText and use clamp(var(--min-font-size), 10cqi, var(--max-font-size)) with a CSS container instead.
• If you want strict typographic control at every breakpoint, use rem or px.

Lots of options for scalable type out there that give type-setting control freak nerds nightmares, have fun!

Interactions & Comments

 

Freddy deBoer: So is Everybody Giving Up On, Like... Doing Things?:

...this culture valorizes work as an abstract demonstrator of value but has no actual intrinsic respect for work, itself. For effort, for struggle, for exertion. If you click a #hustle hashtag on Instagram you are very likely to find yourself looking at posts about crypto, which for most people at this level of sophistication represents the hope of buying a speculative asset and waiting around until it makes you rich. And you call this… hustling?

"Hustle" culture, isn't really.

Mike Hall: Seeking friction:

I imagine life without being able to consult my many deliverables from my phone and some unpleasant part of my personality sends a jolt to the pain and nausea centers, hitting the intersection of old work trauma and pigheaded nerd completionism.

This is me, of course. I often wish I'd never heard of an iPhone.

I wish I liked making short, separate posts here, but I don't, so everything gets lumped into these stupid journal posts. I don't know what's worse, cluttering the blog with a bunch of itty bitty posts, or boring the hell out of everyone by making the whole blog into nothing but a list of dates.