{"id":12965,"date":"2021-02-19T16:59:48","date_gmt":"2021-02-19T21:59:48","guid":{"rendered":"https:\/\/rud.is\/b\/?p=12965"},"modified":"2021-02-19T17:01:16","modified_gmt":"2021-02-19T22:01:16","slug":"getting-into-the-rhythm-of-chart-typography-with-ragg-and-hrbragg-a-k-a-its-ragg-time","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2021\/02\/19\/getting-into-the-rhythm-of-chart-typography-with-ragg-and-hrbragg-a-k-a-its-ragg-time\/","title":{"rendered":"Getting Into the Rhythm of Chart Typography with {ragg} and {hrbragg} (a.k.a. It’s {ragg}-time}"},"content":{"rendered":"

Horrible puns aside, hopefully everyone saw the news, earlier this week, from @thomasp85 on the evolution of modern typographic capabilities<\/a> in the R ecosystem. Thomas (and some cohorts) has been working on {systemfonts}, {ragg}, and {textshaping} for quite a while now, and the \u2014 shall we say tidyglyphs<\/em> ecosystem \u2014 is super-ready for prime time.<\/p>\n

Thomas covered a seriously large amount of ground<\/em> in his post, so please take some time to digest that before continuing.<\/p>\n

Back? ??<\/p>\n

While it is possible to mangage typographic needs with the foundry tools provided via the font-rendering package-triad, one would be hard-pressed to say that the following is “fun”, or even truly manageable coding:<\/p>\n

library(systemfonts)\n\nregister_variant(\n  name = \"some-unique-prefix Inter some-style-01\",\n  weight = \"normal\",\n  features = font_feature(\n    poss = 1, ibly = 1, many = 1, \n    four = 1, char = 1, open = 1,\n    type = 1, code = 1, spec = 1\n  )\n)\n\n# remember that name\n\nregister_variant(\n  name = \"some-unique-prefix Inter some-style-02\",\n  weight = \"normal\",\n  features = font_feature(\n    poss = 1, ibly = 1, many = 1, \n    four = 1, char = 1, open = 1,\n    type = 1, code = 1, spec = 1\n  )\n)\n\n# remember that name \n\n# add a dozen more lines ...\n\nggplot() +\n   geom_text(family = \"oops-i-just-misspelled-the-family-name-*again*\", ...) \n<\/code><\/pre>\n
We’ve been given the power to level up our chart typography, but it’s sort of where literal typesetters (the ones who put blocks of type into a press) were and we can totally make our lives easier and charts prettier with the help of a new package \u2014 {hrbragg} https:\/\/git.rud.is\/hrbrmstr\/hrbragg<\/a> \u2014 which is somewhat of a bridge between {ragg}, {systemfonts}, {textshaping} and a surprisingly popular package of mine: {hrbrthemes}. {hrbragg} is separate from {hrbrthemes} since this new typographic ecosystem is fairly restricted to {ragg} graphics devices (for the moment<\/em>, as Thomas alluded the other day), and the new themes provided in {hrbragg} are a bit of a level-up from those in its sibling package.<\/p>\n
Feature Management<\/h3>\n
At the heart of {systemfonts} lies the ability to tweak font features and bend them to your will. This somewhat old post<\/a> shows why these tweaks exist and delves (but not too<\/em> deeply) into the details of them, down to the four-letter codes that are used to represent and work with a given feature. But, what does calt<\/code> mean? And, what is this tnum<\/code> fellow you’ll be seeing a great deal of in R-land over the coming months? While one could<\/em> leave the comfort of RStudio, VS Code, or vim to visit one of the reference links in Thomas’ package or {hrbragg}, I’ve included the most recent copy of tag-code<->full-tag-name<->short-tab-description in {hrbragg} as a usable data frame so you can treat it like the data it is!<\/p>\n
library(systemfonts) # access to and tweaking OTFs!\nlibrary(textshaping) # lets us treat type as data\nlibrary(ragg)        # because it'll be lonely w\/o the other two\nlibrary(hrbragg)     # remotes::install_git(\"https:\/\/git.rud.is\/hrbrmstr\/hrbragg.git\")\nlibrary(tidyverse)   # nice printing, {ggplot2}, and b\/c we'll do some font data wrangling\n\ndata(\"feature_dict\")\n\nfeature_dict\n## # A tibble: 122 x 3\n##    tag   long_name                   description                                                                                             \n##    <chr> <chr>                       <chr>                                                                                                   \n##  1 aalt  Access All Alternates       Special feature: used to present user with choice all alternate forms of the character                  \n##  2 abvf  Above-base Forms            Replaces the above-base part of a vowel sign. For Khmer and similar scripts.                            \n##  3 abvm  Above-base Mark Positioning Positions a mark glyph above a base glyph.                                                              \n##  4 abvs  Above-base Substitutions    Ligates a consonant with an above-mark.                                                                 \n##  5 afrc  Alternative Fractions       Converts figures separated by slash with alternative stacked fraction form                              \n##  6 akhn  Akhand                      Hindi for unbreakable.  Ligates consonant+halant+consonant, usually only for k-ss and j-ny combinations.\n##  7 blwf  Below-base Forms            Replaces halant+consonant combination with a subscript form.                                            \n##  8 blwm  Below-base Mark Positioning Positions a mark glyph below a base glyph                                                               \n##  9 blws  Below-base Substitutions    Ligates a consonant with a below-mark.                                                                  \n## 10 c2pc  Capitals to Petite Caps     Substitutes capital letters with petite caps                                                            \n## # \u2026 with 112 more rows\n<\/code><\/pre>\n
You can also use help(\"opentype_typographic_features\")<\/code> to see an R help page with the same information. That page also has links external resource, one of which is a detailed manual of each feature with use-cases (in the event even the short-description is not as helpful as it could be).<\/p>\n
Before one can think about using the bare-metal register_variant(..., font_feature(...))<\/code> duo, one has to know what features a particular type family supports. We can retrieve the feature codes with textshaping::get_font_features()<\/code> and look them up in this data frame to get an at-a-glance view:<\/p>\n
# old school subsetting ftw!\nfeature_dict[feature_dict$tag %in% textshaping::get_font_features(\"Inter\")[[1]],]\n## # A tibble: 19 x 3\n##    tag   long_name                   description                                                                                                                 \n##    <chr> <chr>                       <chr>                                                                                                                       \n##  1 aalt  Access All Alternates       Special feature: used to present user with choice all alternate forms of the character                                      \n##  2 calt  Contextual Alternates       Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns      \n##  3 case  Case Sensitive Forms        Replace characters, especially punctuation, with forms better suited for all-capital text, cf. titl                         \n##  4 ccmp  Glyph Composition\/Decompos\u2026 Either calls a ligature replacement on a sequence of characters or replaces a character with a sequence of glyphs. Provides\u2026\n##  5 cpsp  Capital Spacing             Adjusts spacing between letters in all-capitals text                                                                        \n##  6 dlig  Discretionary Ligatures     Ligatures to be applied at the user's discretion                                                                            \n##  7 dnom  Denominator                 Converts to appropriate fraction denominator form, invoked by frac                                                          \n##  8 frac  Fractions                   Converts figures separated by slash with diagonal fraction                                                                  \n##  9 kern  Kerning                     Fine horizontal positioning of one glyph to the next, based on the shapes of the glyphs                                     \n## 10 locl  Localized Forms             Substitutes character with the preferred form based on script language                                                      \n## 11 mark  Mark Positioning            Fine positioning of a mark glyph to a base character                                                                        \n## 12 numr  Numerator                   Converts to appropriate fraction numerator form, invoked by frac                                                            \n## 13 ordn  Ordinals                    Replaces characters with ordinal forms for use after numbers                                                                \n## 14 pnum  Proportional Figures        Replaces numerals with glyphs of proportional width, often also onum                                                        \n## 15 salt  Stylistic Alternates        Either replaces with, or displays list of, stylistic alternatives for a character                                           \n## 16 subs  Subscript                   Replaces character with subscript version, cf. numr                                                                         \n## 17 sups  Superscript                 Replaces character with superscript version, cf. dnom                                                                       \n## 18 tnum  Tabular Figures             Replaces numerals with glyphs of uniform width, often also lnum                                                             \n## 19 zero  Slashed Zero                Replaces 0 figure with slashed 0        \n<\/code><\/pre>\n
Most of those will not be super-useful (yet) but there are three key features that I believe one needs when picking a font for a chart:<\/p>\n