pile.org

E5 colophon

Most of the typography is driven by the same CSS as the rest of the site, so everything from the main colophon applies here. But there are some specific things I’ve done here, that may be of interest to typography nerds.

I’ve tried to wrap all non-English terms¹ in <span lang="xx">...</span> tags (where xx is the language code). I then style them like so:

:lang(fr), :lang(br), :lang(de), :lang(it), :lang(la), :lang(tr) {
	font-style: italic;
}

My convention is to italicize words and phrases, but not proper nouns. I still wrap those with <span lang="xx">, so that the browser’s hyphenation engine has a fighting chance. (For example, if it interprets the town name of Douarnenez as English, it doesn’t even try to hyphenate, but if it’s tagged as French, it gets hyphenated properly.) I add a class="name" attribute to indicate they shouldn’t be italicized:

.name:lang(fr), .name:lang(br), .name:lang(de), .name:lang(it), .name:lang(la), .name:lang(tr) {
	font-style: normal;
}

I make fairly heavy use of small caps, particularly:

• for trail designations (GR 34 instead of GR 34). I also forced the entire designation to remain on one line (not broken with the GR on one line and the 34 on the next).
• for times (2 PM instead of 2 PM), again on one line.

.trail, .time {
	font-variant-caps: all-small-caps;
	/* prevent "GR 34" from wrapping between GR and 34, and similarly for "2 PM". */
	white-space: nowrap;
}

When linking within the journal, I link to a specific piece of text on the page whenever appropriate. For example, if I link back to when I last walked a specific type of terrain, I might do

... The <a href="2017-day-3#rugged">last time I walked on such rugged terrain</a>, I was ...

Here, I’m linking to an anchor named rugged on the day 3 page. On day 3 itself, I might have

... <span id="rugged">I quickly grew tired of the rugged cliffs.</span> ...

When following the link on the previous page, the brower will jump directly to the bit of text about the cliffs. This is all well and good, and basically the state of the web c. 1998.

Here’s the added bit: The :target CSS pseudo-class applies to the portion of the page referenced by the incoming link. I use it to highlight the text, and then make the highlight fade after a few seconds:

@keyframes highlight {
	0% {
		background-color: rgba(224, 224, 0, 0.5);
	}
	90% {
		background-color: rgba(224, 224, 0, 0.5);
	}
	100% {
		background-color: inherit; /* default, whatever that is */
	}
}
:target {
	animation: highlight 5s; /* use the "highlight" keyframes defined above */
}

So, over the course of five seconds, the target text will have an unchanging highlight background for the first 90% of the time (4½ seconds), then fade to no background over the final 10% (half a second).²

I did two final, even fussier, things.

Concourse, the sans-serif typeface I use for headers, has a handful of optional alternate characters to give a hint of non-English design. Back when I planned to walk the whole E5 from France to Italy, I set things up so that the page title would use the alternate characters appropriate for the country I was in for that day. (I hadn’t figured out how I would be even more fussy for the handful of days where I crossed a border.) In practice, it means that in the title of most pages, the “E” in “E5” just looks odd. I’m still not convinced this was a worthwhile thing to do.

Finally, I use sans-serif letters when I describe a thing as that letter’s shape: an X shape (not an X), a T in the road (not a T). Yes, I am rolling my eyes at myself; you don’t need to bother, though I would understand if you did.