{"id":13423942,"url":"https://github.com/aftertheflood/sparks","last_synced_at":"2025-05-15T16:02:45.328Z","repository":{"id":38428375,"uuid":"100490124","full_name":"aftertheflood/sparks","owner":"aftertheflood","description":"A typeface for creating sparklines in text without code.","archived":false,"fork":false,"pushed_at":"2023-09-21T23:26:10.000Z","size":5801,"stargazers_count":2287,"open_issues_count":9,"forks_count":61,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-04-07T20:12:03.297Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"ofl-1.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aftertheflood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.txt"}},"created_at":"2017-08-16T13:05:00.000Z","updated_at":"2025-04-07T19:53:46.000Z","dependencies_parsed_at":"2024-01-07T13:03:25.406Z","dependency_job_id":null,"html_url":"https://github.com/aftertheflood/sparks","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aftertheflood%2Fsparks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aftertheflood%2Fsparks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aftertheflood%2Fsparks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aftertheflood%2Fsparks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aftertheflood","download_url":"https://codeload.github.com/aftertheflood/sparks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374398,"owners_count":22060609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:45.353Z","updated_at":"2025-05-15T16:02:40.320Z","avatar_url":"https://github.com/aftertheflood.png","language":"CSS","funding_links":[],"categories":["CSS","others","Free fonts","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"A typeface for creating sparklines in text.\n\n**Get the font files \u003ca href=\"https://goo.gl/MJYka3\"\u003ehere\u003c/a\u003e. (.zip file, 5.2MB)**\n\nTo quickly include the fonts in your web page you may wish to use our stylesheet which defines all the font-faces and links to the relevant files hosted on github.\n\n```\n  \u003clink href=\"https://tools.aftertheflood.com/sparks/styles/font-faces.css\" rel=\"stylesheet\" /\u003e\n```\n\nSee it working on our [website](http://aftertheflood.com/projects/sparks) or in one of our interactive notebook examples\n\n * \u003ca href=\"https://beta.observablehq.com/@tomgp/after-the-flood-i-sparks-i-typeface\"\u003eA simple usage example\u003c/a\u003e\n * \u003ca href=\"https://beta.observablehq.com/@tomgp/sparks-in-an-svg\"\u003eUsing Sparks within an SVG\u003c/a\u003e\n * \u003ca href=\"https://beta.observablehq.com/@tomgp/sparks-with-live-data\"\u003eUsing javascript to create Sparks code from data\u003c/a\u003e\n\n\u003cdiv\u003e\n  \u003chr class=\"no-top-border\"\u003e\n  \u003cimg class=\"full-width\" src=\"https://aftertheflood.com/wp-content/uploads/2018/01/spark-typing-v2.gif\" alt=\"Sparks GIF\" /\u003e\n  \u003chr class=\"no-top-border\"\u003e\n\u003c/div\u003e\n\nSparks uses OpenType's *contextual alternates* feature to perform simple replacement operations on numbers. It works on both the desktop and the web where it works without Javascript, though it does require a modern-ish web browser that can make use of OpenType features in text. At the moment it is compatible with Microsoft Word (2010 and later), Apple Pages, Adobe Creative Cloud applications, Chrome 33+, Safari 6+, Firefox 4+, and Internet Explorer 10+. (See: http://stateofwebtype.com/ for a fuller listing of browser compatibility.)\n\nThere are currently three variations: **bars, dots, and dot-lines** (line charts with tiny dots at the joints between segments), each of which has five weight variants.\n\nAll three of the variants use a fixed scale of 0–100. If your data only goes to e.g., 10, you'll need to first translate your numbers to be out of 100, otherwise you'll end up rendering an especially tiny chart.\n\nThe contextual alternates feature (`calt`) is baked into OpenType and Sparks simply leverages this feature in an unconventional way. It takes strings like `123{30,60,90}456` and outputs a sparkline. The example of `123{30,60,90}456` would have with three datapoints of 30, 60, and 90 framed by 123 and 456. Spaces after the commas will prevent the numbers from being transformed. Numbers outside of the brackets are never transformed.\n\n## Using Sparks\n\n### On the web\n\nWhen using Sparks as a webfont you *may* wish to explicitly enable the `calt` feature. Contextual ligatures are enabled by default in most modern browsers but in order to support older browsers you can use the following CSS (example pilfered from Adobe's [Syntax for OpenType features in CSS](https://helpx.adobe.com/typekit/using/open-type-syntax.html#calt) page):\n\n```\n.yourClass {\n  font-variant-ligatures: contextual;\n  -moz-font-feature-settings: \"calt\";\n  -webkit-font-feature-settings: \"calt\";\n  font-feature-settings: \"calt\";\n}\n```\n\nFor more on this see the example code in the [**tests**](https://github.com/aftertheflood/sparks/tree/master/tests) folder.\n\n### In MS Word\n\nIf you are using MS Word you need to enable the \"Use Contextual Alternates\" feature for it to be able to draw the sparklines. You can do that simply by heading to \"Format \u003e Font \u003e Advanced\" and enabling it.\n\n### In Adobe Illustrator\n\nTurn on contextual alternates from the OpenType panel menu (Window \u003e Type \u003e OpenType). Here's a [screenshot](https://user-images.githubusercontent.com/771600/30393566-7ebc3a96-98b8-11e7-9b18-34cf6b1550c4.png).\n\n### In Adobe InDesign\n\nSometimes contextual alternates are activated by default and sometimes they are not. We have no idea why. Use the OpenType menu to make sure they are turned on, which can be found in the options menu of the character palette (Character \u003e Options \u003e OpenType \u003e Contextual Alternates). Here's a [screenshot](https://github.com/aftertheflood/sparks/documentation/indesign-contextual-alternates.png).\n\n\n## How it works: the OpenType code\n\nInside the font files the code that powers the replacement operation for the **bar** and **dot** variations works like this:\n\n```\nfeature calt {\n\n  ignore sub zero' comma space;\n  sub braceleft' zero' braceright' by chart.000;\n  sub braceleft' zero' comma' by chart.000;\n  sub zero' comma' by chart.000;\n  sub zero' braceright' by chart.000;\n\n} calt;\n\n```\n\nwhile the code for the **dot-line** variation is a bit more complicated, and looks sort of like this:\n\n```\n@theDots [ dot.000 dot.001 ... dot.100 ];\n@linesTo000 [ line.000.000 line.001.000 ... line.100.000 ];\n# 100 more those classes, one for each possible position.\n\nfeature calt {\n\n  lookup dotsIgnore {\n    ignore sub zero' comma space;\n    # ... repeat for all 100 other numbers.\n  } dotsIgnore;\n\n  lookup DotsSolo {\n    sub braceleft' zero' braceright' by dot.100;\n    # ... repeat for all 100 other numbers.\n  } dotsSolo;\n\n  lookup dotsInitial {\n    sub braceleft' zero' comma' by dot.000;\n    # ... repeat for all 100 other numbers.\n  } dotsInitial;\n\n  lookup dotsMiddle {\n    sub zero' comma' by dot.000;\n    # ... repeat for all 100 other numbers.\n  } dotsMiddle;\n\n  lookup dotsFinal {\n    sub zero' braceright' by dot.000;\n    # ... repeat for all 100 other numbers.\n  } dotsFinal;\n\n  lookup linesAll {\n    sub @theDots' dot.000 by @linesTo000;\n    # ... repeat for all 100 other positions.\n  } linesAll;\n\n} calt;\n\n```\n\nIn theory the **dot-line** variation could be just like the **bar** and **dot** variations with only a single round of glyph substitutions, however because the **dot-line** fonts are plotting connections rather than single positions you would end up with *many* lines of code (almost 11k). Fine in the abstract, but it turns out that OpenType has a limit for how many lines of code can be in a single lookup table (around 3k – everything in a lookup table has to fit into 16 bits, because reasons), so compilation fails. There are definitely many ways around this, but it is a headache. The **dot-line** version sorts the problem by\n\n- first setting up classes for both the dots and the lines\n- then substituting numbers for the appropriate dot glyph (just like in the **bar** and **dot** variants, however here the sequence is a lot more important)\n- and finally substituting the first of every pair of dots with the appropriate line\n\nThis works because OpenType substitution is a linear process in which each rule reads the output of the previous rule, so you can chain substitutions. (*So* many caveats to that statement, but that's a story for another day. For more information on how weird OpenType glyph substitution is check out [this amazing blogpost.](http://ansuz.sooke.bc.ca/entry/131))\n\n---\n\n### About us\n[After the flood](http://aftertheflood.com/) is a design consultancy based in London. We work with global corporations like Google, Nikkei and Ford to solve business problems that combine our understanding of AI and data as a material with unique user insight. Our consulting model means guaranteed access to our top team. Our approach is user-centred and lean, showing progress to clients and working with a variety of expert partners.\n\n### License\nSparks has been distributed under the [SIL Open Font License](https://github.com/aftertheflood/spark/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faftertheflood%2Fsparks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faftertheflood%2Fsparks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faftertheflood%2Fsparks/lists"}