ollicle.com

Scratch – Re-title

2026-05-29T10:42:28Z

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:

Get the latest version on the Scratch project page.

Template variables v5

2026-03-01T11:19:12Z

Update to my NetNewsWire Template variables theme pushed.

This theme remains useful as a template variable reference, I checked it recently for the date stamp options and discovered it was missing a variable I was already using in the theme I’m working on: [[datetime_medium]]. Fixed!

Also, in a face-palm moment, I remembered <textarea> will render HTML markup as text. Makes much more sense than messing about with deprecated tags. Finally wrapped the content in a <main>, not sure if doing so helps anyone, but I can’t see it hurting as a convention.

Enable Web Inspector in NetNewsWire

The reason I’m subtlety talking down the usefulness of this theme is when I made it I didn’t know about the NetNewsWire debug menu. Enabling it exposes the Enable Web Inspector menu. With this option checked we can right click in the article pane in NetNewsWire, select Inspect Element, and Safari dev tools opens to inspect the source of the current theme template, styled with the current theme styles. Absolutely essential for NetNewsWire theme development!

Enable the debug menu in NetNewsWire

In Terminal enter and execute:

defaults write com.ranchero.NetNewsWire-Evergreen ShowDebugMenu 1

That’s it!

Scratch – text measure

2026-02-21T03:42:32Z

Continuing my incremental NetNewsWire theme build. Version 11 (Scratch – post header) styled the post header and finessed links and rules.

I’ve been sitting on this new version, using it while I ponder the next focus. Well past due time to share the current increment.

Back pedalling on the style overrides

Previously I applied an aggressive !important to unset inline styles in feed content. This ultimately caused more trouble than it solved. To compromise I’ve kept the width override to ensure that otherwise fixed width content remains responsive.

More space

Although readable, the text felt cramped – particularly on my little phone. To add some air the global line-height has been increased. For similar effect I’ve also increased the page gutters.

The reduction of text density is most noticeable using small text on a larger screen. In this context you’ll see I’ve also added a limit to the length of the text measure.

For the sake of readability, increasing the line-height helps. However, an over-large line-height results in lines that feel disconnected from one another. Large line spaces also make the use of larger margins to help distinguish headings less effective.

Had to draw the line somewhere.

Nudge third level headings

Squished ’em a little for a more typographic affinity with the proceeding levels.

Ordered lists

For contrast, I found one opportunity to tighten some space. Specifically the left indent alongside short ordered lists. Ordered lists with ten or greater items get a slightly larger space to ensure space for two digits.

ol:not(:has(> li:nth-child(10))) {
	padding-inline-start: 2.1ch;
}
ol:has(> li:nth-child(10)) {
	padding-inline-start: 3.1ch;
}

Ain’t CSS lovely.

NetNewsWire 7

I’m thrilled to see NetNewsWire grow up with Brent’s ongoing care. I share a fondness for his cause to help lift the RSS boats. Between this post and my previous – NetNewsWire has turned 23 years old and released version 7:

Both of these require version 26+ of their respective OS’s – into which I’m yet to venture. As a result I have not seen NetNewsWire in liquid glass beyond the odd screenshot, let alone how the Scratch theme looks in it. I am not anticipating issues or even a need to make changes. Feedback is welcome.

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:

Get the latest version on the Scratch project page.

Scratch – post header

2025-11-28T07:32:34Z

Continuing my incremental NetNewsWire theme build. Version 10 (Scratch – version 10) added a responsive line-height, styled <aside>, post external link, and made a start on unordered lists. This version styles the post header, post title link, tones down the styling of links, and makes horizontal rules dotty.

Post header

Starting from the top, is the post header styling.

I’ve kept it boring and minimal. Applying a grid layout layout to cluster the icon, feed title and byline – reducing the space they were occupying.

When the author line is present I’m reducing the size of the feed title and capitalising it. Shifting the emphasis towards the author’s name. As both the feed title and byline may have distinct links, some fat finger space between them is essential.

The header is set in the sans-serif font in keeping with it’s role as furniture.

Links

I found the underlined, contrasted, links a little too prominent. I knocked back their emphasis by dimming the text decoration colour a shade. Taking care to ensure the underlines remained sufficiently clear. With only a relatively subtle colour difference the underlines remain critical to them being recognised as such.

Pushing the underline away from the text enhanced the legibility of the underlined text.

a {
	text-underline-offset: var(--underline-offset, 15%);
}

The custom property here provided an easy means to tighten this value on headings which are either a different font or larger size. Mostly for the condensed font.

h2,h3,h4,h5,h6 {
	--underline-offset: 10.5%;
}

Maybe a different unit here would make it possible to set one value that would work for both – responding to the x height appropriately. I didn’t spend enough time testing to say for sure.

The post title link

H1 is obviously missing from the above heading selector. I have special cased the post title. Removing the underline to make it a more headline like.

The post title for a feed item is almost always linked, there is only one in a post, and it’s in the same place. Removing the underline allowed me to reduce the visual noise. The expectation that the title is linked is strong enough that the indicator for it could afford to be somewhat subtle.

As unlinked posts are not unheard of, I wanted some kind of indicator that the title went somewhere. Looking through the arrows available I chose the Medium Right-Pointing Angle Bracket ❭ – placing it like an icon on the end of the title link.

Preventing orphans

Adding an icon to the end makes it the first candidate to wrap onto the next line if the title length is just so. To avoid it doing so without the company of some text, I added a Zero Width No-break Space alongside the arrow character. Applying white-space: nowrap; to their wrapper has the desired effect – providing there is no regular spaces between the title text and the “icon”.

Now if the arrow must wrap to fit, it takes the last word with it.

As an odd side note, I found when I applied text-wrap: balance to the heading with this arrangement, it had the perverse effect of often forcing the arrow onto the second line, but only when the heading was a single short word. Weird!

Horizontal rules

Even as I write this I’m continuing to make changes to the <hr> styling. Currently I’m treating it a little like a greeked heading (apologies to anyone to whom Greek is perfectly comprehensible!). To make it a little closer to the texture of text I’ve given it some weight and dotted it. To help keep the emphasis on the breath of space above it, it is coloured a noticeable step below the text contrast.

Speaking of rules; border-style: dotted; in Safari (for anyone not looking at it) creates alternating squares, not “dots” which to my mind ought to be round. Shrugs.

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:

Get the latest version on the Scratch project page.

Next up

I don’t have a roadmap. Consider the Next up sub heading deprecated.

Scratch – version 10

2025-10-19T00:42:35Z

Continuing my incremental NetNewsWire theme build. Version 9 (Scratch – figure and blockquote) styled figures, blockquotes, and figures in blockquotes.

Alongside some fixes, this version styles the external link, aside elements, unordered lists, and applies a dynamic line-height.

External link aside

The external link is not strictly part of a post. It is data associated with the post, like the date. It is generally a link to the subject of the post and therefore a natural place to go once we’ve read what our beloved blogger and had to say about it.

Relatively few bloggers I read make use of the external link field in their feed. To do so it is necessary to explicitly assign the link in question to a dedicated field in such a way that it will make it’s way to the appropriate place in the feed xml. Few folks are looking for those kind of extra steps when they blog.

It’s a shame it’s not more commonly used. “Blog” is short for “web log” in which external links are the whole point!

No shade from me, additional blog fields add blogging friction. Whack it in the content if you must. Please keep blogging!

Template aside

My initial take on the theme template placed the external link (on posts that provide one) at the end of the content after a horizontal rule (<hr>). For version 10 I started looking at ways to style this rule and link combination – to distinguish it from the post content.

Dissatisfaction with my efforts led me to reconsider this mark-up entirely. Placing the link in an <aside> (please excuse my punny foreshadowing) feels better to me. More semantic? Locating the aside element after the <main> in hope that it may make it a little more prominent to a savvy VoiceOver user somewhere.

I relegated the external link label “Link” to an aria-label for the aside. It is obviously a link. If my design succeeds it will obviously be the link.

Aside outline

Experimenting with outlining the aside I tried a bunch of different line styles. The url never looked comfortable in a box. I settled on applying an SVG filter that would outline the link snugly with rounded corners. This feels particularly magical when the links wraps across multiple lines.

Content aside

While working on the external link I was surprised to notice the odd styled <aside> appearing in the content of blog posts. I had overlooked it as a content element to style. So happy accident!

A strong separation from the surrounding content is the point of an aside. The dot pattern I used certainly has this effect. There was some trickiness involved to ensure the dot boundary was composed only of complete dots. Basing the dot size and spacing on a division of the text line height dealt with the vertical. While making use of the CSS round() function provided a means to lock the width to a whole division of the dot spacing horizontally.

inline-size: round(down, 100%, var(--my-lh) * 0.5);

That custom property, --my-lh is short for “my line-height”.

Line-height

It was while building a theme for an earlier version of NetNewsWire I had the idea of making line-height dynamically adjust. Far out! It’s been twenty years! Back then doing so required JavaScript. Now it’s a tiny bit of CSS:

html {
	--my-lh: round(nearest, calc(1em + 1.5vw), 2px);
	line-height: var(--my-lh);

Pff, who needs flying cars! We got CSS of the future.

Technically, it could be simpler. I found the rounding was necessary to avoid some rounding errors that made a mess of the aside dots. The vw contributes a scaling factor relative to the viewport width, while the em responds to the font size.

Why choose a CSS unit when you can mix them!

Unordered lists

I also applied some styling to unordered lists. Using outdented dots for the first level. I’m happy with how they look. I have doubts it is a good idea. Ordered lists can’t be aligned in the same manner. As a result the relative nesting depth becomes ambiguous when they are mixed.

Let’s mark this as work in progress. I’m looking forward to Safari supporting the :marker pseudo to provide a little more control.

Polish

Some little spacing adjustments to blockquote and figure.
Applied a grid layout to the page to anchor external links to the bottom of the viewport.

Version 10 and how it’s going

My initial concept for the process of building Scratch was to tackle one thing at a time. As it has taken shape and started to look a little nice I’ve found myself increasingly distracted by side polishing missions. I’m okay with that, design isn’t a straight line. And it’s my scratch I’m itching here!

Maybe I’ll come back and make another pass through these posts, and fix the things I subsequently changed. Maybe I’ll add some screenshots. For now I’m documenting as I progress. The benefit of hindsight can come later.

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:

Get the latest version on the Scratch project page.

Next up

Likely some more miscellaneous polish. Maybe apply some layout to the header.

Vale Lyndon Whaite

2025-10-18T00:29:00Z

I’m sad to learn that Lyndon Whaite has died this month. A web search will reveal some of the beautiful graphic design he created. The web however will not show you the many designers he taught and inspired in his many years of teaching here in Adelaide.

I count myself very privledged to have had his attention as a student in a small class for my Underdale years.

Your excitement for the magic and craft of design lives on in us Lyndon, thank-you.

Scratch – figure and blockquote

2025-08-31T07:20:53Z

Continuing my incremental NetNewsWire theme build. Version 8 (Scratch – headings) styled headings and vertical typographic spacing. This version styles figure and blockquote.

Figures

The job of a <figure> is to associate it’s subject with a caption, or more specifically a <figcaption>. As the caption text is self contained, it also needs some indication that it is to be read isolated from the surrounding text.

Sometimes you might see a figure used without a figcaption. I’m explicitly choosing not to apply figure styling to those. Without a caption to contain the figure is pointless.

Default browser styles indent the figure element with inline margin. I’m indenting with a heavy rule extended to define the edge of a box to enclose the subject and caption text, holding and separating them from the surrounding content.

Some figures contain transparent images. Without the image filling the corner that connects to the caption my design left the caption floating. To remedy this a soft shade in the background of the image makes the boundary visible.

Blockquote

Quoting folks is something bloggers do extensively. Most often they use a <blockquote> to wrap the quoted text to help highlight it as something other than their own words. An indent and rule similar to what I’ve used for figure is a common styling choice.

A blockquote though, has a distinctly different reason to exist to a figure. A clear visual contrast between the two is warranted. I’ve applied an enlarged curly quote mark as a clear sign post. With a similarly curvy wavy line to delineate the extent of the quoted text.

To render the wavy line I fiddled with the variables provided by very handy CSS shape wavy line. Thank you Temani Afif.

NetNewsWire lacks a language

I planned to allow CSS to select the appropriate quote mark for the language of the post. This idea was stymied by the lack of a template lang at the time of writing.

Associating a citation to a quote

As Heydon Pickering explains, a great way to mark up a blockquote is to use a figure to associate a citation to the quote with a figure and figcaption.

To pave the path for this great idea I’ve styled this combo so the blockquote styling usurps the figure styling. Extending the wavy line to close to the figcaption beneath the quoted text.

Polish

Also in this version I have:

Defined some missing heading line-heights.
Adjusted the sizing of h3 and h4 elements.
Applied a minimal page margin.
Removed some CSS that was not hiding unloaded svg sprites.
Sized the monospace code font to better match the body text.

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:

Get the latest version on the Scratch project page.

Next up

A few things I’m considering tackling next, in no particular order:

Further refine the display of code.
Make line-height responsive to viewport size.
Similarly apply some constraint on text measure.
Have a play with pretty or balanced text-wrapping.
Polish the display of links.
Ordered and unordered lists.

Scratch – headings

2025-07-27T10:46:27Z

Continuing my incremental NetNewsWire theme build. Version 7 (The riddle of the NetNewsWire visited link) made changes to handle feeds with no feed link. This version takes first steps to improve the type.

Since the last version of Scratch I published, I explored some ideas around typography. Including using :has() to apply a heading hierarchy dynamically. I’ve used this idea to style headings in the Scratch theme.

Font choice

The first step was to design the full spread of headings. To help bridge all six levels between H1 and H6 I chose two fonts. San Franciso for display, and New York for text. I went for these partly for their flexibility as variable fonts, but mostly because they are readily available as system fonts on MacOS and iOS.

Although a .nnwtheme package could include font files, NetNewsWire provides no means to reference them. Even if it did, licensing a font for to be distributed in a NetNewsWire theme seems like a stretch. I expect we would be limited to free or open source fonts anyway.

To preserve a simple theme installation I’d rather not ask you to install a font and a NetNewsWire theme. So system fonts it is.

Assigning Apple system fonts with CSS

As expected we use the CSS font-family property. Surprisingly though, using the names of the fonts does not work. Instead we need to use one of a set of keywords.

font-family: system-ui; to assign San Franciso
font-family: ui-serif; for New York

For a web site that might be displayed on any device, fleshing out a list of fallbacks is prudent. For a NetNewsWire theme, defining a font stack is pointless. Occurred to me I could define a preferred font that requires installation, and use a system font as a fallback. Someday maybe.

Tweaking unicode font features

To discover the features available on these fonts I inspected the Apple Variable Fonts page in browser dev tools.

For example: font-variation-settings: "wght" 400, "opsz" 22, "wdth" 75; adjusts the weight, optical size and width of San Franciso.

New York only provides a weight adjustment.

Vertical spacing

Initially I set out to place all text on a consistent baseline grid. In practice I found the grid had to be overly fine to maintain it strictly. I’ve kept rlh for all line height values. For fine spacing control I’ve used a quarter division of 0.25rlh. The benefit of a baseline grid is as subjective as it gets. Especially in a single column layout. I like to think it provides a subtle reassuring consistency.

Paragraph spacing

After line height to separate lines of text, the next step in visual hierarchy is the break between paragraphs. For Scratch I’ve chosen a different handling of this break depending on the text measure. When the line length is narrow I’m using an indent and no additional space between paragraphs. This is good for maintaining a baseline grid, and more significantly, maximising the vertical density on smaller screens.

For wider viewports a minimal margin denotes the start of new paragraphs in place of the indent. Restricting the use of indenting for narrow screens reduces the instances of awkward single line paragraphs causing consecutive indented lines.

I could have stuck more strictly to the baseline grid by choosing to split paragraphs with the equivalent of an empty line break. This large space, however, would increase the space necessary to distinguish headings.

Margins for visual hierarchy

Along with font weight and sizing, I’ve used margins to help distinguish heading levels. Additional space around higher level headings lends them visual importance.

Flattening CSS specificity with `@layer`

To make it easier to override some moderately complicated selectors without complicating them further, I introduced a “base” CSS @layer. Styles outside of a layer override those inside a layer without consideration of specificity.

Some polish

What sup with footnote size?

My previous difficulty determining why footnotes were rendering with text content smaller than the body text is resolved! Noticing only some footnotes were too small was the clue I needed to realise the little footnotes were nested in a <sup>.

Assigning font-size: inherit; to <sup> elements inside a.footnote elements did the trick.

I had to jump through similar hoops to solve issues with paragraph indent inherited by nested footnote paragraphs. Looks increasingly worthwhile to reimplement footnotes in NetNewsWire using popover to avoid the need for nesting. Especially when the incoming anchor positioning support lands.

Hiding SVG sprites

It’s a rare RSS feed that includes working inline SVG sprites. Rather than leaving a mystery vacant space, I’m hiding SVG that follow the common pattern:

svg:has(> use[href^="#"]:only-child) {
	display: none;
}

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:

Get the latest version on the Scratch project page.

Next up

Version 8 demonstrates many clear opportunities for improvement including:

Code typography

Monospace text could use some love and attention.

Variable line-height

The 1.5 line-height looks much too tight over the longer text measures you might see on a wider screen. I plan on expanding this relative to the displayed width to ease reading.

Horizontal spacing

I’m yet to address horizontal spacing of elements such as lists, figures, blockquotes, or the page itself.

Heading scales with :has()

2025-07-13T10:02:54Z

The :has() CSS selector provides us with the means to apply a typographic hierarchy to heading elements dependent on which heading levels are present.

Justifying the necessary added complexity demands some context.

Reading and typography

Presuming the website you are designing contains text you want readers to read – your primary job as a typographer is to keep out of the way. Reading requires a flow that is easily interrupted.

The right breaks in the text however, are vital for reading: New paragraphs provide us an opportunity to take a mental breath; Headings serve as way-markers, slicing the information into meaningful chunks that help us navigate longer text.

Overly prominent sub-headings in a body of text don’t serve your readers. Unless you are writing about the design of the font, those lovely large characters don’t serve your readers.

Relative typographic contrast

A visual reader encountering a heading is not concerned with which number in the scale the heading lies any more than they are individually identifying the letters of the words. Relative contrast is where it is at. A heading is:

Distinct from text;
And lower, higher, or of the same importance as the previous heading.

Well balanced typographic contrast allows readers to discern the hierarchy effortlessly with a minimum of fuss. Constrast between headings ideally balances clarity with cohesion of the whole.

The HTML challenge

Assigning a specific size and style to each of the HTML heading levels is the customary approach. A simple approach and comes with a tradeoff. A fixed heading level to size association forces us to apply strong visual prominence to higher level headings, on the off chance our heading might need to coexist with a set of deeper level headings.

A crude example demonstrating font-size alone to distinguish the ludicrous six levels HTML offers:

Defining an appropriate contrast between the text and each of the consecutive heading levels nudges the contrast range into the stratosphere. No wonder the default browser styling sizes h6 significantly smaller than body text.

Pragmatically, in the vast majority of projects, dropping h6 from typographic considerations will be inconsequential. How about h5? Fewer levels is always going to be easiest to design. Beware though, adding a level later however, a cause a cascade of rework.

Depth shifting the hierarchy

For flexibility, instead of (or in addition to) assigning the prescribed styles to the HTML heading elements, we create a set of CSS classes that correspond to the designed hierarchy:

.h1 { … }
.h2 { … }
.h3 { … }
.etc { … }

Should a particular web page not use deeper level headings, we can shift the designed scale. For example, should the page we are concerned with only include h1 through to h3 – we can re-assign the sizes by applying the corresponding classes to each heading.

By applying classes belonging to an otherwise deeper level heading, we can be assured we’re sticking with the designed heading scale. A subset of the designed scale preserves the contrasts between each heading level step:

<h1>Page title</h1>
<h2 class="h5">A small level two heading</h2>
<h3 class="h6">A small level two heading</h3>

Note I’m not shifting the h1 in this example, instead choosing to keep it consistent between pages as I would expect to be desirable in a multi-page site.

Perils of making the wrong things easy

The flexibility of assigning classes to individual elements brings new ways to break the heading outline in a page. In particular we can create what appear to be headings, but are nothing of the sort:

<div class="h2">Looks exactly like a heading</div>

Element misuse such as this can contribute to a terrible experience for anyone using tools reliant on a page’s accessibility tree. Screen reader users are the usual example.

Maintaining a well structured outline that doesn’t skip levels in challenging enough in a complex website without adding non-heading headings as an option.

Of course it may be perfectly appropriate to make some big text that is not a heading (I’m thinking big text in a promotional banner). Naming classes after HTML elements invites misinterpretation by unwary developers.

Regardless of the class naming convention used, this kind of case-by-case override will likely become the default. You’ll know something it off when you find yourself with a heading size class on every heading element in a page.

Using CSS for presentation

Shifting the hierarchy is the idea I want to pursue. However, if doing so requires micro managing heading sizes with classes in HTML. I say it is not worth the headaches.

We can use CSS to apply the heading sizes based on what headings are present.

Demo

I’ve wired up a little JavaScript to quickly alter which headings are present so we can readily see the applied hierarchy shift accordingly. Try shifting the range input:

The pertinent CSS

The first layer of the abstraction is a set of variables in place of the classes we created for the previous example. The variable names could be based on the heading element names if doing so didn’t make me itch:

:root {
	--f1-size: 3.65em;
	--f2-size: 3em;
	--f3-size: 2.3em;
	--f4-size: 1.85em;
	--f5-size: 1.5em;
	--f6-size: 1.2em;
}

As mentioned earlier I’m keeping h1 consistent. The other headings all have the least prominent size assigned as a base:

h1 {
	font-size: var(--f1-size);
}
h2,h3,h4,h5,h6 {
	font-size: var(--f6-size);
}

The promised, the overrides use the :has() selector applied to a parent element:

.hroot {
	&:has(h3) h2,
	&:has(h4) h3,
	&:has(h5) h4,
	&:has(h6) h5 {
		font-size: var(--f5-size);
	}
	&:has(h4) h2,
	&:has(h5) h3,
	&:has(h6) h4 {
		font-size: var(--f4-size);
	}
	&:has(h5) h2,
	&:has(h6) h3 {
		font-size: var(--f3-size);
	}
	&:has(h6) h2 {
		font-size: var(--f2-size);
	}
}

Not much code! Mostly because this example only twiddles font size. A designed implementation would likely want to adjust a fuller set of properties. For example, the space around a heading goes a long way to denote it’s relative importance. Especially if the designed scale is six levels deep!

Future scope and nesting

By thoughtfully placing the hroot class, creating multiple heading scale contexts becomes trivial. These tend to be crop up in the various boxes in a complex website. As the exceptions that are usually responsible for upsetting a plan to simply assign heading sizes directly, these contexts are the chief cause for my interest in this approach.

The missing facet in what I have outlined above is nesting. Dealing with nesting of these contexts is more complicated and no less common in a complex website design. Without the experience of applying this approach in a complete and serious website build I feel less inclined to attempt to advocated for it as a strategy.

I’ve had some experimental success using @scope. Fortunately we can look forward to broad support of @scope relatively soon. As a component of Interop 2025, Firefox ought to catch up in the coming year.

Back to reality

Is this idea useful? I don’t know yet, but I’ll be looking for opportunities to try it in the next new site design I encounter. This site would be an obvious place to start, but hardly a substantial test.

The riddle of the NetNewsWire visited link

2025-06-21T07:54:31Z

Past me is a fool. He spent a portion of my limited lifetime supply of keypresses on the colour choice of visited links in a NetNewsWire theme.

In case you haven’t caught on (I forgive us), NetNewsWire is not a browser. It displays some HTML in a web view. This content, extracted from an XML file, usually includes links. Links are <a> elements with a :visited state. Logical right? Not quite. It didn’t cross the code-addled mind of past me that NetNewsWire never visits web pages. How do you get a visited link without the visit!

The thing is… I was seeing visited links in NetNewsWire. I was styling visited links. Definitely visited. In the colour I assigned to a:visited. In the theme I had installed. But how? What is going on?

To avoid unnecessary embarrassment I won’t mention some of the (fortunately shallow) irrational rabbit holes I looked in first. The important clue was where the visited links were appearing. Only in some feeds, and only adorning the feed link title.

This is the bit where I plug the Template variable NetNewsWire theme. Necessary because NetNewsWire does not have dev tools enabled in it’s web view (I remember the web before Firebug – it was not pretty). Anyway…

Turns out, the feeds displaying the :visited feed link title. Did not have a feed link.

Of course there was a link! I can see it. If I click it, my browser opens the blog post on the web. That is confusing. I know. I was confused too, for a moment at least. I’ll try to explain because when I understood I laughed.

This is the pertinent portion of template before NetNewsWire renders the page:

<a href="[[feed_link]]">[[feed_link_title]]</a>

NetNewsWire, to render a feed item, replaces tokens in the template. A feed item with no feed link might result in this perfectly valid link.

<a href="">A curiously visited link</a>

Here it is rendered in this page: A curiously visited link. Give it a click. You’ll find it reloads the page, because it is a link to the current page.

Which of course you’ve visited. As a matter of fact, you’re there right now.

But, but, that’s not what happens when I click the “visited” links in NetNewsWire. It loads the feed item’s page on the web, past me might have said.

This is explained by the presence of a base tag in the template in which the link is rendered.

The base URL to be used throughout the document for relative URLs.

NetNewsWire assigns the feed item’s “preferred link” to this URL. As a result, empty links, relative to the base link, effectively become the base link. That is, a link to the blog post NetNewsWire has rendered.

Scratch theme update

Now I know what’s going on, I’ll change Scratch to display feed items in feeds lacking feed links a little differently.

Despite the empty link kinda working, it is at very least surprising. If a feed doesn’t have a feed link, I reckon it makes more sense to display the feed title unlinked. If anything it is redundant alongside the title with the same link.

To apply this logic without relying on JavaScript, I’ve applied a similar trick already used in the theme template to handle missing titles. Repeating the feed title in a span displayed in place of the link when the href is empty.

<a href="[[feed_link]]">[[feed_link_title]]</a><span>[[feed_link_title]]</span>

The CSS:

header a + span,
header a[href=""] {
	display: none;
}

header a[href=""] + span {
	display: inline;
}

While I was at it I ensured <object> tags scaled like video; And, of course, deleted the visited colour.

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:

Get the latest version on the Scratch project page.

Next up

I’ve been side tracked by a baseline grid, taking advantage of text-box. Not sure where it is going yet.

Scratch – tables

2025-06-09T06:48:25Z

Continuing my incremental NetNewsWire theme build. Version 5 Scratch – footnotes styled NetNewsWire footnotes. Time for tables! And as a side mission an overflow indicator experiment.

Minimal tables

One size fits all table styling is always going to leave much to be desired. CSS alone provides no way to introspect the text in a cell, so responding to the type of data is not an option. We might otherwise want to alter the alignment or apply a suitable minimum cell width.

It’s on the to-do list, but I’m yet to cater for <caption>. Most tables ought to have one! Perhaps, when I’m feeling it, I’ll build a simple 11ty site to generate RSS feeds for the purpose of testing content including some table variants.

As it stands, my testing is constrained to a few tables in feeds I chanced upon that are sans-caption.

Table styling

The approach I’ve taken is not radically different to the default NetNewsWire theme. Borders are limited to between rows, using consistent text alignment and white space to hold the columns together.

As the values in the first column are often row labels they are aligned right to hug the row they are labelling. If these styles were for my tables, I would make this alignment exclusive to <th> within <tbody>. People seldom go to the trouble of designating their row headers, so I’m going with the flow.

Space units

Horizontal space tends to be constrained in tables, so padding is reserved for between cells to minimise width. For horizontal space I’ve used ch and ex for vertical space. So that the spacing might to respond to the proportions of the assigned typeface.

A more nuanced solution, for vertical space in particular, could involve a calc incorporating cap and perhaps lh to take into account the variety of white space different typefaces incorporate in their metrics.

For now I’m still looking at Times and perfection can wait.

table {
	border-collapse: collapse;
	font-size: inherit;
}

th,td {
	overflow-wrap: normal;
	border-style: none;
	border-block-end: var(--rule-width) solid var(--rule-color);
	text-align: left;
	
	&:first-child {
		text-align: right;
	}
	
	&:not(:last-child) {
		padding-inline-end: 2ch;
	}
	
	thead & {
		padding-block-end: 1ex;
		vertical-align: bottom;
	}
	
	tfoot &,
	tbody & {
		padding-block: 1ex;
		vertical-align: top;
	}
}

Overflow

Table layouts had a few years (too long) in the sun before mobile phones brought their particularly little screens to the web. There are a few approaches to making tables respond to a narrow viewport and most of them are overcomplicated and often harmful to accessibility. The simplest solution which NetNewsWire adopts remains the best. If a table is too wide, let it scroll horizontally.

NetNewsWire bakes in JavaScript to wrap tables in a div (with a class of nnw-overflow) to facilitate a horizontal scroll.

The cell content will wrap (to a possibly uncomfortable degree) before the table will create a scroll-bar. We could mitigate this by applying a minimum cell width. However, I choose the side of keeping data tables with short text values compact.

It is definitely worth overriding the earlier added overflow-wrap: anywhere;. Applied to squashed tables would cause the words to be smeared across lines.

The default table sizing algorithm assigns more width to columns with more text. In the circumstance where we have no control over the HTML it is best to avoid getting in the way by trying to guess widths.

Take this as your reminder that HTML tables are a poor choice for lots of text.

Reinventing overflow indicators

In addition to being too wide, tables are often too tall. One of the knock on effects of this is the indication that there is horizontal cropping occurring may not be visible until you’ve scrolled far enough to see the scroll-bar at the bottom of the table. Visibly cropped text is a good indicator, but it doesn’t help when the edge of a table column happens to fall aligned with the edge of the viewport.

The most popular, and wonderfully clever, solution to this problem is to apply a shadow to the edge of the overflowing content. With some crafty use of background-image and background-attachment (that I won’t explain here) no JavaScript is required to have the shadow only present when content is hidden.

However, this physical metaphor loses some intuitive immediacy in dark mode. I took this as excuse enough to experiment with an alternative.

Using the same overlapping backgrounds approach, instead of a shadow, I’m rendering an ellipsis like symbol (…) at the top of the overflowing container – above the corner of cropping side.

.nnw-overflow {
	padding-block-start: 0.5em;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: none;
	--dot: radial-gradient(
		circle at center, 
		var(--text-color) 0, 
		var(--text-color) 70%,
		transparent 70%);
	--d-size: .3rem .3rem;
	background-image:
		/* Cover left */
		linear-gradient(
			to right, Canvas 50%, transparent
		),
		/* Cover right */
		linear-gradient(
			to left, Canvas 50%, transparent
		),
		/* Dots */
    	var(--dot),var(--dot),var(--dot),
    	var(--dot),var(--dot),var(--dot);
	background-size: 4rem 100%, 4rem 100%,
		var(--d-size), var(--d-size), var(--d-size),
		var(--d-size), var(--d-size), var(--d-size);
	background-position: left, right,
		top left, top left 0.5rem, top left 1rem,
		top right, top right 0.5rem, top right 1rem;
	background-repeat: no-repeat;
	background-attachment: local, local,
		scroll, scroll, scroll,
		scroll, scroll, scroll;
}

Worth mentioning the use of overscroll-behavior-inline. The over-scrolling bounce effect spoilt the magic somewhat by revealing the dots when scrolling beyond the extent of the content. This property specifically prevents the horizontal scroll bounce while allowing vertical scrolling to function normally.

These dots are not as familiar as a nice shadow. They are visually robust though – working equally well in and light and dark mode.

Whether or not people will intuitively read the dots as a scroll indicator remains to be seen. Keeping the dots tight to the content will hopefully help distinguish them from a menu button. Maybe within the context of a NetNewsWire theme I’ll get away with it. Let me know what you think.

I’m happy enough with the effect to apply it to pre tags too in Scratch.

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:

Get the latest version on the Scratch project page.

Next up

I’ve been pondering a somewhat novel idea for handling heading hierarchy I’m keen to try.

Scratch – footnotes

2025-06-06T08:40:01Z

Continuing my incremental NetNewsWire theme build. Version 4 Scratch – overflow handles styling to prevent the common causes of content horizontal overflow. Version 5 digs into styling NetNewsWire’s popover footnote implementation.

NetNewsWire footnotes

Along with some core CSS, NetNewsWire injects a little JavaScript. One of the functions of this code is to enhance footnotes that follow the requisite pattern. Displaying the referenced content in an in-place popover when the anchor is clicked. Saving us the effort of scrolling up and down to read the referenced text.

The inline footnote anchors are wrapped in a div to provide a positioning context for the referenced footnote:

<div class="newsfoot-footnote-container">
	<a href="#fn:000" class="footnote">1</a>
	<div class="newsfoot-footnote-popover">
		<div class="newsfoot-footnote-popover-arrow"></div>
		<div class="newsfoot-footnote-popover-inner">
			<!-- Footnote content -->
		</div>
	</div>
</div>

The anchors

Typically a digit wrapped in a link to the footer note. NetNewsWire bakes in some core CSS to style these as little capsule buttons. These styles are readily overridden. For now I’m sticking with the providing the colour as appropriate for a theme.

To ensure a little space between the anchor and the preceding text, I applied a little left margin to the container div. This got a little complicated when I realised the container div is not inserted until you click the link. Making the anchor visibly jump on click.

Remedy: add the margin to both the anchor and the container – removing the anchor margin when it was wrapped.

:root {
	--footnote-margin: 0.3rem;
}

.newsfoot-footnote-container {
	margin-inline-start: var(--footnote-margin);
	--contained: 0;
}

a.footnote {
	color: Canvas;
	background-color: var(--link-color);
	margin-inline-start: var(--contained, var(--footnote-margin));
	font-weight: bold;
}

Text and link colour variable refactor

Applying the link colour to the footnote anchor background provided cause for a light refactor to make it a variable.

:root {
	color-scheme: light dark;
	--text-color-contrast: 65%;
	--link-color-contrast: 75%;
	
	--text-color: color-mix(in oklab, CanvasText var(--text-color-contrast), Canvas);
	--link-color: color-mix(in oklab, CanvasText var(--link-color-contrast), Canvas);
	--visited-link-color: oklch(50.3% 0.282 295);
}

Mistakes made

Attempting to style the footnotes I realised I had messed up.

Drunk on the power of a clean CSS selector; I had applied the nuclear option in version 4 – negating inline styles on divs and spans. Doing so removed the author’s inline styles, while also making footnotes difficult to style without a reciprocal !important escalation.

To enable the footnotes to be positioned it was necessary to tighten the beam and direct it away from our footnote divs:

.articleBody {
	span[style],
	div[style]:not([class^="newsfoot"]) {
		all: revert !important;
	}
}

The popovers

Like the anchors, the core NNW CSS for popovers leaves colours for the theme. The three divs overlap to simplify the CSS necessary to make the speech bubble style.

.newsfoot-footnote-popover {
	padding-inline: 0;
	border: solid 0.125em currentColor;
	background-color: Canvas;
}

.newsfoot-footnote-popover-arrow {
	display: block;
	background-color: Canvas;
	outline: solid 0.125em currentColor;
	outline-offset: -0.0625em;
}

.newsfoot-footnote-popover-inner {
	background-color: Canvas;
}

The arrow is a rotated positioned square tucked between the other two divs.

A too-wide arrow can look broken when the anchor is against the right hand edge. Using outline with outline offset provides a little additional control over how the arrow point is drawn.

I had to display:block it for reasons…

More regret

It took me a moment to realise the popover arrow was not displaying because it was one of those empty decorative divs I had explicitly hidden. Reducing the specificity of the :empty selector to ease the override, hence display:block above.

Hid empty paragraphs too while I was at it.

:is(p,div):where(:empty) {
	display: none;
}

If these styles continue to prove troublesome I’ll consider removing them altogether. I’m overstating the mistakes and regrets for forced drama. This is an iterative push pull process.

The shrinking nested paragraph mystery

All the themes I’ve checked present footnote popover text smaller than the surrounding body text. I can imagine this being deliberate, but I’ve found no explicit cause for the size shift.

For now I’m fudging it with this cursed code:

p p {
	font-size: 120%;
}

Another case of small svg intent

I’m punting on the subject of a figure being more likely to be the <img> than the <svg> if both a present.

figure:has(img) svg,

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:

Get the latest version on the Scratch project page.

Next up

Maybe version 6 will tackle tables. No promises.

ollicle.com

Scratch – Re-title

The shape of a feed item

Re-thinking untitled posts

Big short posts

Untitled beats Unbodied

The reason I bothered

Enabling JavaScript in NetNewsWire

The other stuff

One more thing

Install

Template variables v5

Enable Web Inspector in NetNewsWire

Enable the debug menu in NetNewsWire

Scratch – text measure

Back pedalling on the style overrides

More space

Nudge third level headings

Ordered lists

NetNewsWire 7

Install

Scratch – post header

Post header

Links

The post title link

Preventing orphans

Horizontal rules

Install

Next up

Scratch – version 10

External link aside

Template aside

Aside outline

Content aside

Line-height

Unordered lists

Polish

Version 10 and how it’s going

Install

Next up

Vale Lyndon Whaite

Scratch – figure and blockquote

Figures

Blockquote

NetNewsWire lacks a language

Associating a citation to a quote

Polish

Install

Next up

Scratch – headings

Font choice

Assigning Apple system fonts with CSS

Tweaking unicode font features

Vertical spacing

Paragraph spacing

Margins for visual hierarchy

Flattening CSS specificity with @layer

Some polish

What sup with footnote size?

Hiding SVG sprites

Install

Next up

Code typography

Variable line-height

Horizontal spacing

Heading scales with :has()

Reading and typography

Relative typographic contrast

The HTML challenge

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five

Heading level six

Depth shifting the hierarchy

Page title

Heading level two

Heading level three

Perils of making the wrong things easy

Flattening CSS specificity with `@layer`