5 ms·
Sparks: A typeface for creating sparklines in text without code
- Invictus0 6y ago> See it working on our website or in one of our interactive notebook examples Just a note, the website link is 404'd.
- jfim 6y agoApparently 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.
- kaffeemitsahne 6y agoSee also: FF Chartwell. https://www.scribbletone.com/typefaces/ff-chartwell https://www.scribbletone.com/typefaces/ff-chartwell
- antman 6y agoFont looks great, license terms are expensive limiting per page views, or per installed server
- sjbrown 6y agoWe already have some rough glyphs for this: Unicode: 9601, 9602, 9603, 9604, 9605, 9606, 9607, 9608
- michaelmior 6y agoWhile 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.
- swyx 6y agois there a resource to assess unicode glyph availability across devices? something like a caniuse?
- deleted 6y ago[deleted]
- deleted 6y ago[deleted]
- jfim 6y ago9601-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 https://codepoints.net/U+2581 [1] https://codepoints.net/U+2588 https://codepoints.net/U+2588
- ken 6y agoAny 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.
- yohannparis 6y ago5.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.
- ken 6y agoFair 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.
- kevincox 6y agoAn interesting, but possibly not useful feature is that you can copy the datapoints very easily.
- swyx 6y agoi was gonna ask how but then i tried it... very cool! i agree not very useful unless you want to do manual translation haha
- njharman 6y agoI'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.
- keithnz 6y agoonly problem is the data is scaled to 0-100 so you won't know the real values
- leephillips 6y agoThis 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.
- Lammy 6y agoIt 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 :)
- divbzero 6y agoA small inline graph! Popularized and named by Edward Tufte. [1] [1]: https://en.wikipedia.org/wiki/Sparkline https://en.wikipedia.org/wiki/Sparkline
- arduinomancer 6y agoCan someone explain the advantage of doing this via text?
- mattlondon 6y agoA 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.
- philjohn 6y agoAlso gracefully degrades if the font isn't available for whatever reason, you'd see: {0, 10, 20, 30, 40, 50, 60, 70, 80, 90}
- einpoklum 6y agoNot really, because the font on HN comments can't be set to Sparks...
- amelius 6y agoNo advantage unless you enjoy solving problems in the least generic and least portable way.
- seumars 6y agoHey 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
- ohazi 6y agoDoes anyone know if Pango will render this? Could be a nice way to build i3bar widgets.
- severak_cz 6y agoreminds me Datalegreya - https://www.figs-lab.com/en/projects/datalegreya https://www.figs-lab.com/en/projects/datalegreya
- pjs_ 6y agoI 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?
- dmitrygr 6y ago<img src="img.svg" style="height: 1em; display: inline; vertical-align: bottom;" />
- jbverschoor 6y agoBaseline
- hanniabu 6y agoInterlinked
- jbverschoor 6y agoIt’s 5mb zipped man. That’s almost twice the size of chrono trigger
- h-cobordism 6y agoLuckily the WOFF2 itself is only around 18KB. It still seems like an inferior solution to just using SVG, but it's not insanely bulky.
- flobosg 6y agoReminds me of this script to generate sparklines in the command line: https://github.com/holman/spark https://github.com/holman/spark