Ben Crowder / Blog

Blog: #css

17 posts / tag feed / about the blog / archive / tags

Robin Rendle:

  1. I’ve always seen the browser as a printing press.
  2. Because of that, I’ve always seen myself as a publisher first and then everything else second.

This, particularly the second point. I’ve seen myself as a publisher for a long time now as well, with all the books and language charts and magazines and even the art. And the web makes publishing so, so easy. It’s magical. Instant worldwide distribution. (Well, instant for the digital things I make.)

His first point has stuck with me as well — I’ve tended to think of my site mostly as a place to publish PDFs and EPUBs and images and other files I’ve made, but I like the idea of the web as the actual delivery mechanism, for more than just blog posts. This isn’t a new idea, of course; it’s just something I haven’t been thinking about as much till now. I’m looking over the type of things I’ve made — books, languages charts, etc. — and thinking what it would be like if the end product were a web page instead of a PDF or an EPUB. And of course nowadays I’m using HTML/CSS as the source for all three main formats for books (web, EPUB, PDF), so it doesn’t necessarily have to be either/or.

Anyway, nothing specific in mind yet. We’ll see what comes of it.


Reply via email or office hours

Latin declensions chart update

I ported my Latin declensions chart from PlotDevice (which was Mac-only and thus not accessible to people without Macs) to HTML/CSS.

Some notes:

  • My goal with this was to make a chart that’s modifiable as easily as possible without building a full chart-generation app.
  • Because this HTML and CSS is intended for print and not at all for the responsive web, there are a few ways I did things that I probably wouldn’t have used on a web project.
  • I considered using on-page JavaScript to generate the table HTML, since right now there’s a lot of duplication, but I opted to stick with straight HTML to make it easier for non-technical people to modify.
  • The column widths are manually set so that things line up across tables. I could have done one big table instead, but the editing ergonomics would have been substantially worse.
  • Chrome still can’t print lines less than 1pt in width, so I used Firefox to export the PDF.
  • I wish custom properties worked in @page. I also plan to eventually refactor this so that more of the CSS is configurable via custom properties. (At this point it’s just column widths/gaps and colors.)
  • This 3.0 version of the chart changes the font from Museo Sans / Minion Pro to EB Garamond, so that the font is freely available. (EB Garamond also feels more appropriate to Latin than Museo Sans.)

Reply via email or office hours

A short followup to what I wrote last year about Press, my abandoned typesetting engine project: I’m now fully convinced that the web platform is where I want to do typesetting. It’s open, programmatic, and capable. Source files are plain text, easy to version control, and fairly future-proof. And even though it’s not WYSIWYG — at least not the way I’m using it — it’s much more comfortable for me as a working environment.

For non-book work (charts, some kinds of documents), I’ve found that browsers already support everything I need (like @page). That’s how I’ve done all my recent genealogy design work, and it’s how I’ll do any language charts I make going forward. And for things like books where browser support isn’t quite there yet, Paged.js works well (and will presumably be phased out once browser support gets better).

Not to mention how nice it is for both print and digital workflows (EPUB, web) to all use the same technologies. I also love that the web is cross-platform. Something I ran into when I was making charts with PlotDevice (which is Mac-only) was that people on Windows couldn’t modify the charts even when I gave them the source. That’s not a problem with the web.

I’ve even started using the web platform for less webby things like making wallpaper for my phone:

Dark cloudy background with the text of Matthew 11:28 at the center.

Here’s the HTML (the 375×812px size is the CSS resolution of my iPhone 12 Mini — RIP — and also keep in mind that this was for a one-off never to see the light of day, so I took the liberty of cutting a few corners):

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background">
    <svg id="darknoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter">
        <feTurbulence baseFrequency="0.5" numOctaves="8" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter)" />
    </svg>

    <svg id="lightnoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter2">
        <feTurbulence seed="485" baseFrequency="0.005" numOctaves="12" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter2)" />
    </svg>
  </div>

  <div class="quote">Come unto me, all ye that labour and are heavy laden, and I will give you rest.</div>

  <div class="reference">Matthew 11:28</div>
</body>
</html>

The CSS (with the font purchased from FontShop):

* {
  box-sizing: border-box;
  font-family: Clifford Pro;
}

html {
  height: 100%;
}

body {
  color: #777;
  font-size: 1.6rem;
  margin: 0;
  text-align: center;
}

.background {
  background: radial-gradient(circle at 50% 90%, #222, #111);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.background svg#darknoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
}

.background svg#lightnoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}

.quote {
  line-height: 1.4;
  margin: 25rem 1.5rem 0;
}

.reference {
  color: hsl(0 40% 32%);
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1rem;
}

I then used headless Chrome to export the PNG (Firefox would probably have worked as well, though I haven’t yet tested it for this):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot --window-size=375x812 index.html

It’s not the world’s most amazing wallpaper or anything, but I’m still pleased that I was able to make something I’m reasonably happy with using technologies I love. (I could have also used WebGL shaders or Canvas. Lots of options!)

Here’s to the open web.


Reply via email or office hours

Historia Calamitatum

Book cover for Historia Calamitatum by Peter Abelard, white text over small circles fading vertically from white at top through red in the middle down to black at the bottom

After what feels like a long absence from bookmaking, I’ve gotten back into it and have a new release: Historia Calamitatum, available as a PDF.

The book is a medieval autobiography by Peter Abélard, a Catholic philosopher who lived in the eleventh and twelfth centuries in France.

Some notes on the making, for those who like that sort of thing:

  • I used paged.js for the typesetting, so I was editing HTML and CSS files instead of wrangling InDesign or Affinity Publisher or LaTeX. It’s a different workflow, to be sure (lots of reloading in Chrome and then finding my spot again), but overall I love having the source files be plain text.
  • The line-breaking algorithm isn’t as nice as InDesign’s. Had to finagle the word-spacing and letter-spacing properties a bit to fix some more egregious spots. (At the same time, I wasn’t fixated on making the spacing perfect. Nor did I fix the hyphenation stacks, because they don’t bother me. I’m clearly becoming a bit more relaxed about typesetting rules as I get older.)
  • For the typeface I went with IM Fell DW Pica, which is no doubt anachronistic but I like the feeling it gives the book.
  • I proofed the PDFs in the Documents app on my iPad. Much nicer than printing the whole thing out (which I used to do, years ago).
  • I made the cover using Cirque with textures applied in Affinity Photo.

Reply via email or office hours

Links #48

George Francis on Voronoi tessellations in generative art. Enjoyed this. Seems like a decent alternative to circle packing at least some of the time.

Elise Hein on her experience with stackless dev. The minimalist in me is pretty much always interested in this angle on web development.

WebComponents.dev on all the ways to make a web component. Lots of charts. Prism and Svelte look intriguing.

Josh Comeau on designing beautiful shadows in CSS. The techniques definitely make a difference.

Fleta Selmani’s Escheresque impossible type (via Kottke). Love this.


Reply via email or office hours

Links #47

Stephanie Eckles on practical uses of CSS math functions. Some great examples here.

Matt DesLauriers on pen plotter art and algorithms. I keep thinking about buying or building a plotter. Someday…

Paul Foster’s HTML tags memory test. Got 70.

Sakira Ventura’s world map of female composers. Love this.

Eric Bailey’s introduction to macOS Voice Control. Both this and Head Pointer are really quite impressive.


Reply via email or office hours

Came across Miriam Suzanne’s CSS scope proposal this morning (via Jeremy Keith). Looks good.


Reply via email or office hours

Lately I’ve been playing around with implementing genealogy sparklines on the web. Still very much a work in progress, but I’m trying to do more working in public, so here’s the messy current status (and at some point I’ll post the actual HTML/CSS):

Ruby test

sparkline-test-002.png

Implementation notes:

  • The sparklines use inline SVG
  • This test uses the <ruby> and <rt> tags, with ruby-position set to under and ruby-align set to start (though only Firefox supports it so it’s not sadly viable for actual use yet)
  • I don’t really like that it makes the leading uneven (lines that have ruby vs. lines that don’t)

Design notes:

  • Rather than having solid squares at the births and deaths, I’ve gone for vertical lines so they’re less obtrusive (and have also considered just getting rid of the vertical lines, though I haven’t tried it out yet)
  • Circles are simple so I went with them for marriages and children

Absolute positioning test

sparkline-test-003.png

Implementation notes:

  • The names are wrapped in span tags with position: relative set, and the SVG gets position: absolute. Fairly simple.
  • Even leading!
  • There’s some wonkiness right now when the span is at the beginning of a line (the sparkline shows up at the end of the previous line), haven’t tried very hard to fix it yet

Reply via email or office hours

Links #45

The Science Museum Group’s Never Been Seen collection. Fun idea. I was the first Internet person to lay eyes on this dental stopper, for example.

Samo Burja on why civilization is older than we thought. Göbekli Tepe, Sumeria, and more.

vfoley on making reasonable use of computer resources. Data-oriented design has now snagged my curiosity. I think about this overall topic fairly often, though I still haven’t done anything about it. Also in this vein: Craig Mod’s essay on fast software.

Robin Sloan on having newsletters live on the web and just emailing out a link instead of the full thing. My own newsletter has been sadly dormant for the past several months, but when I revive it I plan to do this.

Josh W. Comeau on how styled-components works. This was good.


Reply via email or office hours

I seem to have forgotten how to blog. (Actual blogging, as opposed to merely linking to new art.) In an attempt to get back on the saddle again:

Outside of art, my project time lately has primarily been swallowed up by some internal tooling changes. I alluded to this back in June, though the plan changed along the way. Rather than merging all those apps into one behemoth conglomerate, I decided it would be better (along at least a few axes) to follow the Unix philosophy and stick with smaller tools that do one thing well. Which conveniently lines up with the set of tools I’ve already built. Fancy that.

Arc is (was) my notes app, written using FastAPI. I wanted an app that felt more a wiki, and I wanted to move it to Django (easier to maintain, considering most of my other tools are also in Django). And I didn’t really like the name anymore. Thus Codex was born. Heretically, I built it using hardly any JavaScript — just a bit for keyboard shortcuts and another bit for the autosuggest when linking to another page. Everything else uses plain old HTML forms.

In fact, it was so liberating and fun that I plowed onward and decided to ditch Vinci (my internal blog/notebook app) and build a new app, Leaf, using the same technique; the only JS it uses is for keyboard shortcuts. It’s simpler, easier to maintain (I think? it’s still early on), and in a way it feels more in line with the grain of the web.

One other thing I did differently with both apps was to wait to write any CSS until after the functionality was all in place. It was disconcerting and delightful, building something with bare browser styles, and it certainly helped me focus on functionality first rather than getting distracted by layout.

Conclusion: while I doubt I would ever build apps at work this way, this old-school mode was invigorating and absolutely worth it for these personal projects.


Reply via email or office hours