Scratch – Re-title

Continuing my incremental NetNewsWire theme build. Version 12 (Scratch – text measure) improved reading by limiting line lengths and some other tweaks.

This version too includes a collection of miscellaneous refinements. I’ll list them below. First though, I want to share the feature I’m most enthused about, responding to the shape of posts.

The shape of a feed item

The endurance of RSS as a standard can be attributed to it’s simplicity not it’s perfection. This is especially true when it comes to how people push their differently shaped content into the RSS fields.

Not all content that is pushed into an XML feed obviously fits into a title and a body. We’ve collectively agreed this is okay! You have some text? The important bit is the sharing. As a result we get posts that are:

• The regular title and body
• Body with no title
• Title with no body
• Body same as the title
• Truncated body as title

These all make regular appearances in my feed reading. All deserve consideration.

Re-thinking untitled posts

My previous effort towards a consistency of sorts across this range was to populate the title with the date stamp when it would otherwise be empty. By ensuring there was always a h1 this might in some way benefit folks who are somehow using heading structure. Note to self – check exactly what VoiceOver reads.

Visually though, I’ve had a change of heart. I’m keeping the consistent heading structure, but decided posts without titles should look different. In version 13, instead of hoisting up a part of the date stamp to be a title stand-in, I’ve linked and made the date stamp the h1. A welcome simplification.

As a consequence the title in the large bold display font is simply missing. Typographically I see this as a useful contrast rather than an inconsistency to be fixed. It does however, provide an opportunity.

Big short posts

There are no rules. However, posts without titles are often short and seldom use sub headings. Hierarchically they are flat.

To add some nice constrast back I set out to make the body of such larger than the date stamp. Lots bigger because, what designer passes up an opportunity for a bit of big font?

With the power of :has() (spoken like He-Man to his sword), testing for an absence of headings is just CSS. The length of text though, requires JavaScript. That’s okay, this is an enhancement only applied if such a post is identified.

Scaling up a thus enlarged <blockquote> required reworking the styles to use em.

Since I have JavaScript enabled now and spare opinions, might as well keep going.

Untitled beats Unbodied

Body with no title and title with no body are the same picture. A post with one length of text rather than two. It follows that they share a display mode.

The theme uses JavaScript to move a title-only title text into the body.

The reason I bothered

The last two post shapes in the list above, body same as the title and truncated body as title, are just another variety of untitled. The author has been uncomfortable with, or uses a system that has prevented, an empty title. Like one those people with only one name confronted with a required family name field. Easy fix. Repeat it.

The repetitive tedious experience of reading a post title, only to read it again in the post body, motivated most of the effort above. These are the real villan is this story.

Removing the titles from these posts feels great. Well worth enabling JavaScript to compare and weed out those redundant words.

Enabling JavaScript in NetNewsWire

The checkbox to Enable JavaScript is near the top of NetNewsWire general settings.

The other stuff

• Added Hanging punctuation why the heck are are [brackets] considered hang worthy!?

• Some extra indent for lists within blockquote

• Applied tab-size to size tabs as appear in code blocks. Expanded on wider measures.

• Respected the style attribute used to size Wordpress text icons

• Tightened up the selector logic used to size icon sized <svg>

• Squeezed a little vertical space in respect to a shallow viewport.

One more thing

Version 26 of Safari suffered a regression that occurs when elements to which SVG filters are applied are clipped. Look out for unexplained black squares!

This impacts the external link styling in Scratch.

The only fix that worked, other than removing the SVG filter, was to ensure the link remained visible within the viewport. So I made it sticky. This required reworking the filter to make the shape opaque. As far as a workaround goes I’m happy with this outcome. Might even be a feature to have it visible without scrolling.

Install

To enable a quick switch between different versions of this theme I’ve generated a zip of each version – incorporating the version number in the name:

• Install: Scratch v13
• Download: Scratch_v13.nnwtheme.zip

Get the latest version on the Scratch project page.