Macro for Many Columns

# Macro for Many Columns
### Emily Riederer

---

## Splitting slides into two columns is already pretty easy

You can just write:

`.pull-left[.full-width[<insert content>]]`

for content to go on the left-hand side

]]

...and similarly write:

`.pull-right[.full-width[<insert content>]]`

for contents to go on the right-hand side

]]

---

## But what if you want more than two columns?

---

## It's macro time!

---

## Basic idea is to create column structure row-by-row

`![:col_header x, y, z]`: creates header with CSS class `multicolhead` for styling

`![:col_list x, y, z]`: creates row of bulletted list items for each column

`![:col_row x, y, z]`: creates row of text for each column

---

## For example, writing this...

````html
![:col_header Header 1, Header 2, Header 3]
![:col_list You can add rows with bulletted lists, item2, item3]
![:col_list item4, item5, Or normal chunks of text (see below)]
![:col_row 
    This is a long descriptive paragraph about a point 
    that I need to explain in great details for it to 
    be fully understood,
    
    This is another long explanatory piece. Sometimes you need 
    to provide you readers a lot of information,
    
    Testing testing 1 2 3. Let's make this a little longer]
````
---

## Three column layouts are easy

![:col_header Header 1, Header 2, Header 3]
![:col_list You can add rows with bulletted lists, item2, item3]
![:col_list item4, item5, Or normal chunks of text (see below)]
![:col_row 
    This is a long descriptive paragraph about a point that I need to explain in great details
    for it to be fully understood,
    
    This is another long explanatory piece. Sometimes you need to provide you readers a lot 
    of information,
    
    Testing testing 1 2 3. Let's make this a little longer]

---

## Or four!

![:col_header Header 1, Header 2, Header 3, Header 4]
![:col_list You can add rows with bulletted lists, item2, item3, hello]
![:col_list item4, item5, Or normal chunks of text (see below), la la la]
![:col_row 
    This is a long descriptive paragraph about a point that I need to explain in great details
    for it to be fully understood,
    
    This is another long explanatory piece. Sometimes you need to provide you readers a lot 
    of information,
    
    Testing testing 1 2 3,
    
    I'm in the fourth column]
    
---

## Or five!

### But it starts to get crowded...

![:col_header Header 1, Header 2, Header 3, Header 4, Header 5]
![:col_list You can add rows with bulletted lists, item2, item3, hello, more content]
![:col_list item4, item5, Or normal chunks of text (see below), la la la, tra la la]
![:col_row 
    More text,
    More text,
    .,
    More text,
    More text
]

---

## You can also use with HTML vs text

````html
![:col_header 
 ,
 ,
 
 ]
![:col_row 
 My first paragraph of content1, 
 This is more content2, 
 Hello my name is content3]
````

turns into this:

![:col_header 
 ,
 ,
 
 ]
![:col_row 
 My first paragraph of content1, 
 This is more content2, 
 Hello my name is content3]

---

## And you don't have to have headers if you don't want to

![:col_row

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua,

Ut enim ad minim veniam quis nostrud; exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur,

Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum

]

---

## It's somewhat flexible

### `col_header` adjusts to tallest needed box

![:col_header Super Long Headers Are Increase Height of All Headers, Header 2, Header 3]
![:col_list You can add rows with bulletted lists, item2, item3]
![:col_list item4, item5, Or normal chunks of text (see below)]

---

## It's somewhat flexible

### Super long words will wrap

![:col_header Header 1, Thisisalloneveryveryverylongword, Header 3]
![:col_list You can add rows with bulletted lists, item2, item3]
![:col_list item4, item5, Or normal chunks of text (see below)]

But still not the best look...

---

## It's not perfect

### Here's how to make a totally blank cell

````html
![:col_header Header 1, Header 2, Header 3]
![:col_row content1, , content3]
````

![:col_header Header 1, Header 2, Header 3]
![:col_row content1, , content3]

---

## It's not perfect

### Commas separate columns so can't be used within a column.

Instead, one can use the unicode character `&#44;`.

````html
![:col_header Header 1, Header 2, Header 3]
![:col_row I wish this would be in column 1&#44; and this would also be in column 1, ,]
````

doesn't honor the blank:

![:col_header Header 1 , Header 2 , Header 3]
![:col_row I wish this would be in column 1&#44; and this would also be in column 1, ,]

...and using periods just flat out makes it error out

---

## But for now it gets the job done

I like it better than current alternatives

![:col_header Just Using Rows, Raw HTML in Markdown, Macro]
![:col_row Pro, Pro, Pro]
![:col_list 
 Easy to implement without custom scripting,
 Flexibility for custom styling, 
 Cleaner syntax is docs 
]
![:col_row Con, Con, Con]
![:col_list 
 Makes info seem sequential vs parallel,
 Bulky to leave in code, 
 Limitations described before 
]
![:col_list 
 One option could get boring,
 More typo-prone and less repeatable, 
 
]

---

## Ideas or suggestions?

Please get in touch!

https://github.com/emilyriederer/xaringan_columns

[@emilyriederer](https://twitter.com/EmilyRiederer)