{"id":12561,"date":"2019-12-18T10:38:56","date_gmt":"2019-12-18T15:38:56","guid":{"rendered":"https:\/\/rud.is\/b\/?p=12561"},"modified":"2019-12-18T14:15:28","modified_gmt":"2019-12-18T19:15:28","slug":"quickly-create-mostly-responsive-html-columns-with-htmltools","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2019\/12\/18\/quickly-create-mostly-responsive-html-columns-with-htmltools\/","title":{"rendered":"Quickly Create (Mostly) Responsive HTML Columns With {htmltools}"},"content":{"rendered":"

I had need to present a wall-of-text to show off a giant list of SSL certificate alternate names and needed the entire list to fit on one slide (not really for reading in full, but to show just how many there were in a way that a simple count would not really convey).<\/p>\n

Keynote, PowerPoint, and gslides all let you make tables or draw boxes but I really didn’t want to waste time fiddling as much as I’d need to with those tools just for this one slide.<\/p>\n

Thankfully, I remembered that HTML5 <div><\/code> elements can be styled with a column-count<\/code> attribute and we can use {htmltools}<\/code> to make quick work of this task.<\/p>\n

To show it off, first we’ll need some words, so let’s make some using stringi::stri_rand_lipsum()<\/code>:<\/p>\n

library(stringi)\nlibrary(htmltools)\nlibrary(tidyverse)\n\nset.seed(201912)\n\nstri_rand_lipsum(5) %>%\n  stri_paste(collapse = \" \") %>%\n  stri_split_boundaries() %>%\n  flatten_chr() %>%\n  stri_trim_both() -> words\n\nhead(words)\n## [1] \"Lorem\"  \"ipsum\"  \"dolor\"  \"sit\"    \"amet,\"  \"sapien\"\n\nlength(words)\n## [1] 514\n<\/code><\/pre>\n
Now, we’ll make a function — columnize()<\/code> — that we can reuse in the future and have it take in a character vector, the column count we want and some CSS styling, then use some {htmltools}<\/code> tag functions to make quick work of this task:<\/p>\n
columnize <- function(words, ncol = 5,\n                      style = \"p { font-family:'Roboto Condensed';font-size:12pt;line-height:12.5pt;padding:0;margin:0}\") {\n\n  tagList(\n    tags$style(style[1]),\n    tags$div(\n      words %>%\n        map(tags$p) %>%\n        tagList(),\n      style = sprintf(\"column-count:%d\", as.integer(ncol[1]))\n    )\n  )\n\n}\n<\/code><\/pre>\n
In this function we turn the style<\/code> param into a <style><\/code> section in the generated HTML, then turn words<\/code> into <p><\/code> tags wrapped in <div><\/code>.<\/p>\n
This function can be used in a R Markdown code block (set block parameters to results='markup'<\/code>) to have the columns appear automagically in the resultant HTML document output. You can also use it in standalone fashion by using html_print()<\/code> on the results:<\/p>\n
html_print(\n  columnize(words, 10)\n)\n<\/code><\/pre>\n
\"10<\/a><\/p>\n
The above is an image just for easier blog display purposes. You can test out a working example from a spun R script over at https:\/\/rud.is\/rpubs\/columnize.html<\/a> that has some different column count examples. Grow and shrink the browser width to see how the columns shrink and grow with it.<\/p>\n
FIN<\/h3>\n
Hopefully this helps others save time and effort like it did for me today. You can experiment with making the columnize()<\/code> function more robust by having it work with all the other column-formatting properties:<\/p>\n