slidify / onefile

Standalone HTML files with Slidify
http://slidify.github.io/onefile
2 stars 2 forks source link

Generate SelfContained Font Kits #4

Open ramnathv opened 10 years ago

ramnathv commented 10 years ago

Here is a rough sketch of how I think this could work

  1. Download the fontkit
  2. Convert font urls to data uris
  3. Save as stylesheet.
ramnathv commented 10 years ago

The idea would be to create a payload and expand it to a css file using a mustache template (which you can see below. Let me illustrate with an example. The make_dataURI function encodes a font file in base64. The make_fonts function takes a fonts list and generates a css file.

make_dataURI <- function(font){
  font$dataURI = base64enc::dataURI(font$file,
    mime = sprintf('data:application/x-font-', font$format)
  )
  return(font)
}

make_fonts <- function(fonts, template, destfile = 'fonts.css'){
  fonts <- lapply(fonts, make_dataURI)
  css = paste(capture.output(cat(whisker.render(template, list(fonts = fonts)))), collapse = "\n")
  cat(css, file = destfile)
 return(css)
}

fonts = list(
  list(name = 'Open Sans', weight = 400, style = normal, format =  'wott', file = 'Open Sans.wott'),
  list(name = 'PT Sans', ...)
)
make_fonts(fonts)

Here is the mustache template to use.

{{# fonts }}
@font-face {
  font-family: '{{{ name }}}';
  font-style: {{{ style }}};
  font-weight: {{{ weight }}};
  src: url({{{ dataURI }}}) format('{{{ format }}}');
}
{{/ fonts }}
seankross commented 10 years ago

Thanks for the outline! I'll get to work on this.

seankross commented 10 years ago

I hope to have something viable tomorrow but you can track the progress here: https://github.com/seankross/cosmofont

ramnathv commented 10 years ago

This is looking good. A few ideas

  1. It would be reasonable to assume that the fonts are downloaded from Google Fonts. Can you check if the downloaded font files have a pattern in their names that will allow automatic extraction of features.
  2. It would be good to allow the users the option of either generating a style.css that links to the fonts locally, or one with fonts encoded in base64. This would require minimal changes to the code.
seankross commented 10 years ago

By using the Google Fonts API and including httr as a dependency I believe I can include functionality where a user can specify the name, weight, and style of a Google Font so that cosmofont can GET the font from Google and either create the appropriate data uri or include the corresponding .woff file with style.css.

ramnathv commented 10 years ago

Oh that would be brilliant! Nice idea.

ramnathv commented 10 years ago

And another note. Make yourself the author and maintainer, since you are doing all the hard work. You can add me as a contributor.

seankross commented 10 years ago

Will do, but this couldn't have happened without you!

seankross commented 10 years ago

Let me know if this works for you: https://github.com/seankross/cosmofont

You can install cosmofont with:

library(devtools)
install_github("cosmofont", "seankross")

Any comments or questions about the code, API, documentation, or anything else are welcome!