Scratch – figure and blockquote
- Posted
31 August 2025
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.