35 comments

[ 1.9 ms ] story [ 84.7 ms ] thread
We already have some rough glyphs for this: Unicode: 9601, 9602, 9603, 9604, 9605, 9606, 9607, 9608
(comment deleted)
(comment deleted)
9601-9608 decimal, so U+2581 [0] to U+2588 [1]. They're a bit wide for a sparkline though.

[0] https://codepoints.net/U+2581

[1] https://codepoints.net/U+2588

Any environment I have that does custom fonts and glyph substitution also has CSS (or similar functionality) which can be used to make them thinner, if desired.

5.2 MB (compressed) is a big package just for some narrower boxes.

5.2 MB is for the whole set, if you are using this font in a project, you will most likely set on one type of font format (.eof, etc.) and one weight (extra-thin, bold.)

The font file ranges from 18Kb to ~600kb, with most in the ~50kb, which is reasonable for the simplicity.

Fair point, but I disagree about even that size being reasonable -- or simple.

There's a million things you can implement as a font. I have yet to see anything I think is a good idea to implement as a font except the defined glyph shapes themselves.

While these can be helpful, I'm not sure how widespread the availability is so you would probably want to provide these glyphs anyway. (I could be wrong here. But I also don't know a good way to assess their availability.) It's also quite nice that you can just type in data with Sparks and get sparklines which isn't possible with the glyphs you mentioned.
is there a resource to assess unicode glyph availability across devices? something like a caniuse?
> See it working on our website or in one of our interactive notebook examples

Just a note, the website link is 404'd.

Apparently the consultancy that built this closed their doors in February of this year.

> On February 25th, after a decade of business, we’ll be closing After the Flood to focus on other projects. We’d like to thank all of our clients and collaborators for their support.

An interesting, but possibly not useful feature is that you can copy the datapoints very easily.
i was gonna ask how but then i tried it... very cool! i agree not very useful unless you want to do manual translation haha
I'd say that is super useful as someone who

1) cuts and pastes into plain text files often

2) often wishes to take data from charts and munge it, although sparklines are probably too informationally sparse to bother.

only problem is the data is scaled to 0-100 so you won't know the real values
This is great. I think we're just seeing the beginning of the crazy things that people are going to be doing by abusing (in the best possible sense) opentype.
It would be cool for the Readme to explain (without having to click through to the website) what a sparkline is for those like me who have no idea :)
Can someone explain the advantage of doing this via text?
A couple of things that spring to mind:

- super simple: no need to integrate a charting library or do server-side rendering

- performance: if you have a table of hundreds of rows each with a sparkline chart (e.g CPU load/QPS/error rate/etc for many nodes etc in a cluster), just some text will be hugely more performant that 100x charting widgets or 100x server-side rendered images.

Also gracefully degrades if the font isn't available for whatever reason, you'd see:

{0, 10, 20, 30, 40, 50, 60, 70, 80, 90}

Not really, because the font on HN comments can't be set to Sparks...
No advantage unless you enjoy solving problems in the least generic and least portable way.
Hey dad just type www.google.com yea dad two o's g-o-o-g-l-e at the top of the window in that box yea dad same as you would for facebook you know what nevermind just type sparkline no dad you don't need www just sparkline and hit return on the keyboard yea dad i mean enter but it says return on the keyboard alright let me know if it works
Does anyone know if Pango will render this? Could be a nice way to build i3bar widgets.
I use things like this and FontAwesome etc. a bunch, and they no doubt solve a real problem. But I also sort of wish that the problem were solved in a way that does not involve stuffing things that are not even remotely text into a font.

It seems like there should be a generic way to say "put image X (SVG, PNG, whatever) on the screen here, as if it were a glyph, and also do scaling and linebreaks and alignment properly, oh and colors and so on". I expect this already exists somewhere deep inside CSS - does anyone know the story?

<img src="img.svg" style="height: 1em; display: inline; vertical-align: bottom;" />
It’s 5mb zipped man. That’s almost twice the size of chrono trigger
Luckily the WOFF2 itself is only around 18KB.

It still seems like an inferior solution to just using SVG, but it's not insanely bulky.