diff --git a/DESCRIPTION b/DESCRIPTION
index 348b648..c2424f0 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -32,7 +32,9 @@
     xml2,
     rvest,
     rmarkdown (>= 1.6.0),
-    readr
+    readr,
+    scales, 
+    viridisLite
 Suggests:
     testthat,
     magick,
diff --git a/NAMESPACE b/NAMESPACE
index edbb406..50553a4 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -16,6 +16,9 @@
 export(rmd_format)
 export(row_spec)
 export(scroll_box)
+export(spec_angle)
+export(spec_color)
+export(spec_font_size)
 export(usepackage_latex)
 importFrom(knitr,include_graphics)
 importFrom(knitr,knit_meta_add)
@@ -25,6 +28,7 @@
 importFrom(rmarkdown,latex_dependency)
 importFrom(rmarkdown,metadata)
 importFrom(rvest,html_table)
+importFrom(scales,rescale)
 importFrom(stringr,str_count)
 importFrom(stringr,str_detect)
 importFrom(stringr,str_extract)
@@ -37,6 +41,7 @@
 importFrom(stringr,str_sub)
 importFrom(stringr,str_trim)
 importFrom(utils,read.csv)
+importFrom(viridisLite,viridis)
 importFrom(xml2,"xml_attr<-")
 importFrom(xml2,"xml_text<-")
 importFrom(xml2,read_html)
diff --git a/R/cell_spec.R b/R/cell_spec.R
index f5bff2a..aacac76 100644
--- a/R/cell_spec.R
+++ b/R/cell_spec.R
@@ -20,25 +20,27 @@
 #' while for LaTeX, you can only choose from `l`, `c` & `r`.
 #' @param font_size Only if you want to specify font size locally in HTML.
 #' This feature is not available in LaTeX
-#' @param angle 0-360, degree that the text will rotate.
+#' @param angle 0-360, degree that the text will rotate. Can be a vector.
+#' @param hover_message A vector of strings to be displayed as hover message.
+#' Of course, this feature is nly available in HTML.
 #'
 #' @export
 cell_spec <- function(x, format,
                       bold = F, italic = F, monospace = F,
                       color = NULL, background = NULL,
-                      align = NULL, font_size = NULL, angle = NULL) {
+                      align = NULL, font_size = NULL, angle = NULL,
+                      hover_message = NULL) {
 
   if (missing(format) || is.null(format)) format = getOption('knitr.table.format')
   if (is.null(format)) {
-    warning("Output format for cell_formatter was not specified. Using ",
-            "html as default. You may consider to set it up via option knitr.table.format.",
-            "See ?cell_formatter for details. ")
-    return(x)
+    message("Setting cell_spec format as html")
+    format <- "html"
   }
 
   if (tolower(format) == "html") {
     return(cell_spec_html(x, bold, italic, monospace,
-                          color, background, align, font_size, angle))
+                          color, background, align, font_size, angle,
+                          hover_message))
   }
   if (tolower(format) == "latex") {
     return(cell_spec_latex(x, bold, italic, monospace,
@@ -47,31 +49,37 @@
 }
 
 cell_spec_html <- function(x, bold, italic, monospace,
-                           color, background, align, font_size, angle) {
+                           color, background, align, font_size, angle,
+                           hover_message) {
   cell_style <- NULL
   if (bold) cell_style <- paste(cell_style,"font-weight: bold;")
   if (italic) cell_style <- paste(cell_style, "font-style: italic;")
   if (monospace) cell_style <- paste(cell_style, "font-family: monospace;")
-  if (!is.null(color)) cell_style <- paste0(cell_style, " color: ", color, ";")
+  if (!is.null(color)) cell_style <- paste0(cell_style, "color: ", color, ";")
   if (!is.null(background)) {
-    cell_style <- paste0(cell_style, " border-radius: 4px; padding-right: 2px",
-                         "; background-color: ", background, ";")
+    cell_style <- paste0(cell_style, "border-radius: 4px; padding-right: 4px",
+                         ";padding-left: 4px; background-color: ", background, ";")
   }
   if (!is.null(align)) {
-    cell_style <- paste0(cell_style, " text-align: ", align, ";")
+    cell_style <- paste0(cell_style, "text-align: ", align, ";")
   }
   if (!is.null(font_size)) {
-    cell_style <- paste0(cell_style, " font-size: ", font_size, "px;")
+    cell_style <- paste0(cell_style, "font-size: ", font_size, "px;")
   }
   if (!is.null(angle)) {
     cell_style <- paste0(cell_style,
-                         " -webkit-transform: rotate(", angle,
+                         "-webkit-transform: rotate(", angle,
                          "deg); -moz-transform: rotate(", angle,
                          "deg); -ms-transform: rotate(", angle,
                          "deg); -o-transform: rotate(", angle, "deg);")
   }
+
+  if (!is.null(hover_message)) {
+    hover_message <- gsub("\n", "&#013;", hover_message)
+    hover_message <- paste0("data-toggle='tooltip' title='", hover_message, "'")
+  }
   out <- paste0(
-    '<div style="', cell_style, '">', x, '</div>'
+    '<div style="', cell_style, '"', hover_message, '>', x, '</div>'
   )
   return(out)
 }
@@ -81,8 +89,14 @@
   if (bold) x <- paste0("\\bfseries{", x, "}")
   if (italic) x <-paste0("\\em{", x, "}")
   if (monospace) x <- paste0("\\ttfamily{", x, "}")
-  if (!is.null(color)) x <- paste0("\\textcolor{", color, "}{", x, "}")
-  if (!is.null(background)) x <- paste0("\\cellcolor{", background, "}{", x, "}")
+  if (!is.null(color)) {
+    color <- latex_color(color)
+    x <- paste0("\\textcolor", color, "{", x, "}")
+  }
+  if (!is.null(background)) {
+    background <- latex_color(background)
+    x <- paste0("\\cellcolor", background, "{", x, "}")
+    }
   if (!is.null(align)) x <- paste0("\\multicolumn{1}{", align, "}{", x, "}")
   if (!is.null(angle)) x <- paste0("\\rotatebox{", angle, "}{", x, "}")
   return(x)
diff --git a/R/column_spec.R b/R/column_spec.R
index 8e0c554..647f689 100644
--- a/R/column_spec.R
+++ b/R/column_spec.R
@@ -87,7 +87,8 @@
       target_cell <- xml_child(xml_child(kable_tbody, i), j)
       if (!is.null(width)) {
         xml_attr(target_cell, "style") <- paste0(xml_attr(target_cell, "style"),
-                                                 "width: ", width, "; ")
+                                                 "width: ", width,
+                                                 "; display: inline-block; ")
       }
       if (bold) {
         xml_attr(target_cell, "style") <- paste0(xml_attr(target_cell, "style"),
diff --git a/R/kableExtra-package.R b/R/kableExtra-package.R
index 32131c1..672eb8d 100644
--- a/R/kableExtra-package.R
+++ b/R/kableExtra-package.R
@@ -66,6 +66,8 @@
 #' @importFrom magrittr %>%
 #' @importFrom utils read.csv
 #' @importFrom readr read_lines read_file
+#' @importFrom scales rescale
+#' @importFrom viridisLite viridis
 #' @name kableExtra-package
 #' @aliases kableExtra
 #' @docType package
diff --git a/R/spec_tools.R b/R/spec_tools.R
new file mode 100644
index 0000000..7708118
--- /dev/null
+++ b/R/spec_tools.R
@@ -0,0 +1,39 @@
+#' Generate viridis Color code for continuous values
+#'
+#' @inheritParams viridisLite::viridis
+#' @param x continuous vectors of values
+#' @param na_color color code for NA values
+#' @export
+spec_color <- function(x, alpha = 1, begin = 0, end = 1,
+                       direction = 1, option = "D",
+                       na_color = "#BBBBBBFF") {
+  x <- round(rescale(x, c(1, 256)))
+  color_code <- viridisLite::viridis(256, alpha, begin, end, direction, option)[x]
+  color_code[is.na(color_code)] <- na_color
+  return(color_code)
+}
+
+#' Generate common font size for continuous values
+#'
+#' @param x continuous vectors of values
+#' @param begin Smalles font size to be used. Default is 10.
+#' @param end Largest font size. Default is 20.
+#' @param na_font_size font size for NA values
+#' @export
+spec_font_size <- function(x, begin = 10, end = 20, na_font_size = "inherit") {
+  x <- round(rescale(x, c(begin, end)))
+  x[is.na(x)] <- na_font_size
+  return(x)
+}
+
+#' Generate rotation angle for continuous values
+#'
+#' @param x continuous vectors of values
+#' @param begin Smallest degree to rotate. Default is 0
+#' @param end Largest degree to rotate. Default is 359.
+#' @export
+spec_angle <- function(x) {
+  x <- round(rescale(x, c(0, 359)))
+  x[is.na(x)] <- 0
+  return(x)
+}
diff --git a/R/util.R b/R/util.R
index 27f7d57..f80c89a 100644
--- a/R/util.R
+++ b/R/util.R
@@ -110,3 +110,13 @@
     "\\usepackage{threeparttable}"
   ))
 }
+
+latex_color <- function(color) {
+  if (substr(color, 1, 1) != "#") {
+    return(paste0("{", color, "}"))
+  } else {
+    color <- sub("#", "", color)
+    if (nchar(color) == 8) color <- substr(color, 1, 6)
+    return(paste0("[HTML]{", color, "}"))
+  }
+}
diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index e042f65..fa6c222 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -143,6 +143,35 @@
   row_spec(3:5, bold = T, color = "white", background = "#D7261E")
 ```
 
+# Cell Specification
+`cell_spec` is different from the rest. You should use it before you pipe the table into the `kable` function. It is designed in such a way that you can easily use it inside a `dplyr::mutate()` together with conditional logic like `ifelse`. Since everything happens before `kable`, you have to tell this function which format you want to go to, `html` or `latex`. To reduce unnecessary finger typing, I linked the `format` argument here with `knitr::kable`'s global format option `knitr.table.format`. If you have defined this option to be `html` at the beginning of your document (as suggested earlier), it is not necessary for you to define format again for every `cell_spec`. 
+
+```{r, message=FALSE}
+library(dplyr)
+mtcars[1:5, 1:3] %>%
+  mutate(
+    car = row.names(.),
+    mpg = ifelse(mpg > 20, 
+                 cell_spec(mpg, "html", font_size = 18), mpg),
+    cyl = cell_spec(cyl, "html", angle = (1:5)*60, hover_message = mpg,
+                    background = "red", color = "white", align = "center"),
+    disp = ifelse(disp > 200,
+                  cell_spec(disp, "html", color = "red", bold = T),
+                  cell_spec(disp, "html", color = "green", italic = T)),
+    fancy = c(12, 14, 16, 18, 20),
+    fancy = cell_spec(fancy, "html", font_size = fancy, 
+                      color = viridisLite::inferno(length(fancy), end = 0.8)),
+    car = cell_spec(car, "html", bold = T,
+                    color = viridisLite::inferno(length(fancy), end = 0.8))
+  ) %>%
+  select(car, everything()) %>%
+  kable("html", escape = F) %>%
+  kable_styling("hover", full_width = F) %>%
+  add_header_above(c(" ", "Hello" = 2, "World" = 2)) 
+```
+
+## 
+
 # Grouped Columns / Rows
 ## Add header rows to group columns
 Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 6e80212..98b43a6 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-09-15" />
+<meta name="date" content="2017-10-12" />
 
 <title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
 
@@ -217,11 +217,16 @@
 
 <h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-09-15</em></h4>
+<h4 class="date"><em>2017-10-12</em></h4>
 
 </div>
 
 
+<script>
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip(); 
+});
+</script>
 <blockquote>
 <p>Please see the package <a href="http://haozhu233.github.io/kableExtra/">documentation site</a> for how to use this package in LaTeX.</p>
 </blockquote>
@@ -1622,7 +1627,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 1
 </td>
-<td style="text-align:left;width: 30em; background-color: yellow;">
+<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tempor ex. Morbi malesuada sagittis turpis, at venenatis nisl luctus a.
 </td>
 </tr>
@@ -1630,7 +1635,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 2
 </td>
-<td style="text-align:left;width: 30em; background-color: yellow;">
+<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
 In eu urna at magna luctus rhoncus quis in nisl. Fusce in velit varius, posuere risus et, cursus augue. Duis eleifend aliquam ante, a aliquet ex tincidunt in.
 </td>
 </tr>
@@ -1638,7 +1643,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 3
 </td>
-<td style="text-align:left;width: 30em; background-color: yellow;">
+<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
 Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.
 </td>
 </tr>
@@ -1797,6 +1802,205 @@
 </table>
 </div>
 </div>
+<div id="cell-specification" class="section level1">
+<h1>Cell Specification</h1>
+<p><code>cell_spec</code> is different from the rest. You should use it before you pipe the table into the <code>kable</code> function. It is designed in such a way that you can easily use it inside a <code>dplyr::mutate()</code> together with conditional logic like <code>ifelse</code>. Since everything happens before <code>kable</code>, you have to tell this function which format you want to go to, <code>html</code> or <code>latex</code>. To reduce unnecessary finger typing, I linked the <code>format</code> argument here with <code>knitr::kable</code>’s global format option <code>knitr.table.format</code>. If you have defined this option to be <code>html</code> at the beginning of your document (as suggested earlier), it is not necessary for you to define format again for every <code>cell_spec</code>.</p>
+<pre class="r"><code>library(dplyr)</code></pre>
+<pre><code>## Warning: package 'dplyr' was built under R version 3.4.2</code></pre>
+<pre class="r"><code>mtcars[1:5, 1:3] %&gt;%
+  mutate(
+    car = row.names(.),
+    mpg = ifelse(mpg &gt; 20, 
+                 cell_spec(mpg, &quot;html&quot;, font_size = 18), mpg),
+    cyl = cell_spec(cyl, &quot;html&quot;, angle = (1:5)*60, hover_message = mpg,
+                    background = &quot;red&quot;, color = &quot;white&quot;, align = &quot;center&quot;),
+    disp = ifelse(disp &gt; 200,
+                  cell_spec(disp, &quot;html&quot;, color = &quot;red&quot;, bold = T),
+                  cell_spec(disp, &quot;html&quot;, color = &quot;green&quot;, italic = T)),
+    fancy = c(12, 14, 16, 18, 20),
+    fancy = cell_spec(fancy, &quot;html&quot;, font_size = fancy, 
+                      color = viridisLite::inferno(length(fancy), end = 0.8)),
+    car = cell_spec(car, &quot;html&quot;, bold = T,
+                    color = viridisLite::inferno(length(fancy), end = 0.8))
+  ) %&gt;%
+  select(car, everything()) %&gt;%
+  kable(&quot;html&quot;, escape = F) %&gt;%
+  kable_styling(&quot;hover&quot;, full_width = F) %&gt;%
+  add_header_above(c(&quot; &quot;, &quot;Hello&quot; = 2, &quot;World&quot; = 2)) </code></pre>
+<table class="table table-hover" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="border-bottom:hidden">
+</th>
+<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
+Hello
+</div>
+</th>
+<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
+World
+</div>
+</th>
+</tr>
+<tr>
+<th style="text-align:left;">
+car
+</th>
+<th style="text-align:left;">
+mpg
+</th>
+<th style="text-align:left;">
+cyl
+</th>
+<th style="text-align:left;">
+disp
+</th>
+<th style="text-align:left;">
+fancy
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: #000004FF;">
+Mazda RX4
+</div>
+</td>
+<td style="text-align:left;">
+<div style="font-size: 18px;">
+21
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21&lt;/div&gt;">
+6
+</div>
+</td>
+<td style="text-align:left;">
+<div style=" font-style: italic;color: green;">
+160
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: #000004FF;font-size: 12px;">
+12
+</div>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: #420A68FF;">
+Mazda RX4 Wag
+</div>
+</td>
+<td style="text-align:left;">
+<div style="font-size: 18px;">
+21
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21&lt;/div&gt;">
+6
+</div>
+</td>
+<td style="text-align:left;">
+<div style=" font-style: italic;color: green;">
+160
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: #420A68FF;font-size: 14px;">
+14
+</div>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: #932667FF;">
+Datsun 710
+</div>
+</td>
+<td style="text-align:left;">
+<div style="font-size: 18px;">
+22.8
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;22.8&lt;/div&gt;">
+4
+</div>
+</td>
+<td style="text-align:left;">
+<div style=" font-style: italic;color: green;">
+108
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: #932667FF;font-size: 16px;">
+16
+</div>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: #DD513AFF;">
+Hornet 4 Drive
+</div>
+</td>
+<td style="text-align:left;">
+<div style="font-size: 18px;">
+21.4
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21.4&lt;/div&gt;">
+6
+</div>
+</td>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: red;">
+258
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: #DD513AFF;font-size: 18px;">
+18
+</div>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: #FCA50AFF;">
+Hornet Sportabout
+</div>
+</td>
+<td style="text-align:left;">
+18.7
+</td>
+<td style="text-align:left;">
+<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg);" data-toggle="tooltip" title="18.7">
+8
+</div>
+</td>
+<td style="text-align:left;">
+<div style=" font-weight: bold;color: red;">
+360
+</div>
+</td>
+<td style="text-align:left;">
+<div style="color: #FCA50AFF;font-size: 20px;">
+20
+</div>
+</td>
+</tr>
+</tbody>
+</table>
+<div id="section" class="section level2">
+<h2></h2>
+</div>
+</div>
 <div id="grouped-columns-rows" class="section level1">
 <h1>Grouped Columns / Rows</h1>
 <div id="add-header-rows-to-group-columns" class="section level2">
@@ -2809,7 +3013,7 @@
 4
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2825,7 +3029,7 @@
 6
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2833,7 +3037,7 @@
 7
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2844,7 +3048,7 @@
 8
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -2852,7 +3056,7 @@
 9
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2874,7 +3078,7 @@
 11
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2893,7 +3097,7 @@
 13
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2901,7 +3105,7 @@
 14
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
diff --git a/man/cell_spec.Rd b/man/cell_spec.Rd
index 237c15b..cf6e298 100644
--- a/man/cell_spec.Rd
+++ b/man/cell_spec.Rd
@@ -5,7 +5,8 @@
 \title{Specify Cell format}
 \usage{
 cell_spec(x, format, bold = F, italic = F, monospace = F, color = NULL,
-  background = NULL, align = NULL, font_size = NULL, angle = NULL)
+  background = NULL, align = NULL, font_size = NULL, angle = NULL,
+  hover_message = NULL)
 }
 \arguments{
 \item{x}{Things to be formated. It could be a vector of numbers or strings.}
@@ -35,7 +36,10 @@
 \item{font_size}{Only if you want to specify font size locally in HTML.
 This feature is not available in LaTeX}
 
-\item{angle}{0-360, degree that the text will rotate.}
+\item{angle}{0-360, degree that the text will rotate. Can be a vector.}
+
+\item{hover_message}{A vector of strings to be displayed as hover message.
+Of course, this feature is nly available in HTML.}
 }
 \description{
 Specify Cell format before it gets into kable
diff --git a/man/spec_angle.Rd b/man/spec_angle.Rd
new file mode 100644
index 0000000..6bef9bb
--- /dev/null
+++ b/man/spec_angle.Rd
@@ -0,0 +1,18 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/spec_tools.R
+\name{spec_angle}
+\alias{spec_angle}
+\title{Generate rotation angle for continuous values}
+\usage{
+spec_angle(x)
+}
+\arguments{
+\item{x}{continuous vectors of values}
+
+\item{begin}{Smallest degree to rotate. Default is 0}
+
+\item{end}{Largest degree to rotate. Default is 359.}
+}
+\description{
+Generate rotation angle for continuous values
+}
diff --git a/man/spec_color.Rd b/man/spec_color.Rd
new file mode 100644
index 0000000..5a106f2
--- /dev/null
+++ b/man/spec_color.Rd
@@ -0,0 +1,31 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/spec_tools.R
+\name{spec_color}
+\alias{spec_color}
+\title{Generate viridis Color code for continuous values}
+\usage{
+spec_color(x, alpha = 1, begin = 0, end = 1, direction = 1,
+  option = "D", na_color = "#FFBBBBBB")
+}
+\arguments{
+\item{x}{continuous vectors of values}
+
+\item{alpha}{The alpha transparency, a number in [0,1], see argument alpha in
+\code{\link[grDevices]{hsv}}.}
+
+\item{begin}{The (corrected) hue in [0,1] at which the viridis colormap begins.}
+
+\item{end}{The (corrected) hue in [0,1] at which the viridis colormap ends.}
+
+\item{direction}{Sets the order of colors in the scale. If 1, the default, colors
+are ordered from darkest to lightest. If -1, the order of colors is reversed.}
+
+\item{option}{A character string indicating the colormap option to use. Four
+options are available: "magma" (or "A"), "inferno" (or "B"), "plasma" (or "C"),
+and "viridis" (or "D", the default option).}
+
+\item{na_color}{color code for NA values}
+}
+\description{
+Generate viridis Color code for continuous values
+}
diff --git a/man/spec_font_size.Rd b/man/spec_font_size.Rd
new file mode 100644
index 0000000..df2c1c0
--- /dev/null
+++ b/man/spec_font_size.Rd
@@ -0,0 +1,20 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/spec_tools.R
+\name{spec_font_size}
+\alias{spec_font_size}
+\title{Generate common font size for continuous values}
+\usage{
+spec_font_size(x, begin = 10, end = 20, na_font_size = "inherit")
+}
+\arguments{
+\item{x}{continuous vectors of values}
+
+\item{begin}{Smalles font size to be used. Default is 10.}
+
+\item{end}{Largest font size. Default is 20.}
+
+\item{na_font_size}{font size for NA values}
+}
+\description{
+Generate common font size for continuous values
+}
diff --git a/tests/visual_tests/cell_spec_html.Rmd b/tests/visual_tests/cell_spec_html.Rmd
new file mode 100644
index 0000000..4e90de3
--- /dev/null
+++ b/tests/visual_tests/cell_spec_html.Rmd
@@ -0,0 +1,24 @@
+---
+title: "cell_formatter_pdf"
+author: "Hao"
+date: "10/11/2017"
+output: html_document
+---
+
+```{r, include=F}
+library(knitr)
+library(kableExtra)
+library(dplyr)
+```
+
+```{r}
+mtcars[1:15, 1:5] %>%
+  mutate(
+    mpg = cell_spec(mpg, "html", color = "white", background = spec_color(mpg)),
+    disp = cell_spec(disp, "html", color = spec_color(disp, option = "B"), 
+                     bold = T, font_size = spec_font_size(disp)),
+    hp = cell_spec(hp, "html", hover_message = paste0("cyl:\n", cyl))
+  ) %>%
+  kable("html", escape = F) %>%
+  kable_styling("condensed", full_width = F)
+```
diff --git a/tests/visual_tests/cell_spec_pdf.Rmd b/tests/visual_tests/cell_spec_pdf.Rmd
index 728a355..3134ef9 100644
--- a/tests/visual_tests/cell_spec_pdf.Rmd
+++ b/tests/visual_tests/cell_spec_pdf.Rmd
@@ -12,13 +12,13 @@
 ```
 
 ```{r}
-mtcars[1:5, 1:5] %>%
+mtcars[1:25, 1:5] %>%
   mutate(
     mpg = ifelse(mpg > 21, 
                  cell_spec(mpg, "latex", color = "green", bold = T),
                  cell_spec(mpg, "latex", color = "red", italic = T)),
-    rotate = c(60, 120, 180, 240, 300),
-    rotate = cell_spec(rotate, "latex", angle = rotate)
+    disp = cell_spec(disp, "latex", background = spec_color(disp), 
+                     color = "white", bold = T)
   ) %>%
   kable("latex", escape = F, booktabs = T) %>%
   row_spec(0, angle = 90)