block by timelyportfolio 440054e1b1622131485e

play with MathJax svg fonts in R with rvest and htmltools

Full Screen

Rabbit Hole of the Day | SVG Fonts as Paths

While working on my htmlwidget of the week katexR, I learned that MathJax can render in SVG. I know, I know, how did I not know that? Nevertheless once I made the discovery, I had the thought that I could render the SVG font glyphs (think beyond MathJax here) in R with rvest and htmltools. To get it to work requires very little effort after you work through a couple of kinks. The primary kink is that font glyphs are flipped, so you’ll need a transform = scale( 1, -1 ), but even better I used transform = scale( 0.75, -0.75 ) to fit the glyph in the small little window I gave it.

To replicate, check out the code.

code.R

# playing with MathJax svg fonts in R with rvest and htmltools

library(rvest)
library(htmltools)

"https://raw.githubusercontent.com/mathjax/MathJax/master/fonts/HTML-CSS/TeX/svg/MathJax_Typewriter-Regular.svg" %>>%
  html %>>%
  (~mj_glyph)

mj_glyph %>>%  
  html_nodes("glyph") %>>%
  (
    tagList(
      lapply(
        .
        ,function(g){
          tags$div(
            style = "height:100px;width:100px;float:left;"
            ,tag(
              "svg"
              ,list(
                id = paste0("glyph-",html_attr(g,"glyph-name"))
                ,viewBox = "0 0 1000 1000"
                ,style = "height:100%;width:100%;"
                ,tag(
                  "g"
                  ,list(
                    transform = "scale(0.75,-0.75) translate(0,-1000)"
                    ,tag(
                      "path"
                      ,list("d" = html_attr(g,"d"),"")
                    )
                  )
                )
              )
            )
          )
        }
      )
    )
  ) %>>%
  html_print