improve color code setting
diff --git a/R/cell_spec.R b/R/cell_spec.R
index aacac76..d83a8b1 100644
--- a/R/cell_spec.R
+++ b/R/cell_spec.R
@@ -23,13 +23,15 @@
#' @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.
+#' @param background_as_tile T/F value indicating if you want to have round
+#' cornered tile as background.
#'
#' @export
cell_spec <- function(x, format,
bold = F, italic = F, monospace = F,
color = NULL, background = NULL,
align = NULL, font_size = NULL, angle = NULL,
- hover_message = NULL) {
+ hover_message = NULL, background_as_tile = TRUE) {
if (missing(format) || is.null(format)) format = getOption('knitr.table.format')
if (is.null(format)) {
@@ -40,7 +42,7 @@
if (tolower(format) == "html") {
return(cell_spec_html(x, bold, italic, monospace,
color, background, align, font_size, angle,
- hover_message))
+ hover_message, background_as_tile))
}
if (tolower(format) == "latex") {
return(cell_spec_latex(x, bold, italic, monospace,
@@ -50,15 +52,21 @@
cell_spec_html <- function(x, bold, italic, monospace,
color, background, align, font_size, angle,
- hover_message) {
+ hover_message, background_as_tile) {
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: ", html_color(color), ";")
+ }
if (!is.null(background)) {
- cell_style <- paste0(cell_style, "border-radius: 4px; padding-right: 4px",
- ";padding-left: 4px; background-color: ", background, ";")
+ cell_style <- paste0(
+ cell_style,
+ ifelse(background_as_tile, "border-radius: 4px; ", ""),
+ "padding-right: 4px; padding-left: 4px; ",
+ "background-color: ", html_color(background), ";"
+ )
}
if (!is.null(align)) {
cell_style <- paste0(cell_style, "text-align: ", align, ";")
@@ -71,7 +79,9 @@
"-webkit-transform: rotate(", angle,
"deg); -moz-transform: rotate(", angle,
"deg); -ms-transform: rotate(", angle,
- "deg); -o-transform: rotate(", angle, "deg);")
+ "deg); -o-transform: rotate(", angle,
+ "deg); transform: rotate(", angle,
+ "deg);")
}
if (!is.null(hover_message)) {
@@ -96,7 +106,7 @@
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 647f689..a924439 100644
--- a/R/column_spec.R
+++ b/R/column_spec.R
@@ -178,7 +178,7 @@
}
if (!is.null(color)) {
- color <- sprintf("\\\\color{%s}", color)
+ color <- paste0("\\\\color", latex_color(color))
}
if (!is.null(background)) {
diff --git a/R/row_spec.R b/R/row_spec.R
index a6bdb59..ec8a959 100644
--- a/R/row_spec.R
+++ b/R/row_spec.R
@@ -12,8 +12,8 @@
#' need to be emphasized.
#' @param monospace A T/F value to control whether the text of the selected column
#' need to be monospaced (verbatim)
-#' @param color A character string for row text color. Here please pay
-#' attention to the differences in color codes between HTML and LaTeX.
+#' @param color A character string for row text color. For example, "red" or
+#' "#BBBBBB".
#' @param background A character string for row background color. Here please
#' pay attention to the differences in color codes between HTML and LaTeX.
#' @param align A character string for cell alignment. For HTML, possible values could
@@ -132,6 +132,7 @@
"deg); -moz-transform: rotate(", angle,
"deg); -ms-transform: rotate(", angle,
"deg); -o-transform: rotate(", angle,
+ "deg); transform: rotate(", angle,
"deg);")
}
return(x)
@@ -175,7 +176,7 @@
if (!is.null(color)) {
new_row <- lapply(new_row, function(x) {
- paste0("\\\\textcolor{", color, "}{", x, "}")
+ paste0("\\\\textcolor", latex_color(color), "{", x, "}")
})
}
diff --git a/R/spec_tools.R b/R/spec_tools.R
index 7708118..03b2539 100644
--- a/R/spec_tools.R
+++ b/R/spec_tools.R
@@ -6,13 +6,37 @@
#' @export
spec_color <- function(x, alpha = 1, begin = 0, end = 1,
direction = 1, option = "D",
- na_color = "#BBBBBBFF") {
+ na_color = "#BBBBBB") {
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)
}
+html_color_ <- function(color) {
+ if (substr(color, 1, 1) != "#" | nchar(color) != 9) return(color)
+ rgba_code <- col2rgb(color, alpha = TRUE)
+ rgba_code[4] <- round(rgba_code[4] / 255, 2)
+ return(paste0("rgba(", paste(rgba_code, collapse = ", "), ")"))
+}
+
+html_color <- function(colors) {
+ sapply(colors, html_color_)
+}
+
+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, "}"))
+ }
+}
+latex_color <- function(colors) {
+ sapply(colors, latex_color_)
+}
+
#' Generate common font size for continuous values
#'
#' @param x continuous vectors of values
diff --git a/R/util.R b/R/util.R
index f80c89a..27f7d57 100644
--- a/R/util.R
+++ b/R/util.R
@@ -110,13 +110,3 @@
"\\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/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 18407b0..d145e31 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -38,3 +38,16 @@
Also, if you are using it in this way, make sure you put `escape = F` in `kable`.
On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime.
+
+***
+
+I also added a few helper functions to use together with cell_spec. One good example is `spec_color`, which gives you the ability to use viridis color map in your table. Others include `spec_font_size` and `spec_angle`.
+
+```{r}
+iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x){
+ cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+ }) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling(full_width = F)
+```
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 31148f0..d0b54d4 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
<meta name="author" content="Hao Zhu" />
-<meta name="date" content="2017-10-11" />
+<meta name="date" content="2017-10-14" />
<title>Use kableExtra with formattable</title>
@@ -119,7 +119,7 @@
<h1 class="title toc-ignore">Use kableExtra with formattable</h1>
<h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-11</em></h4>
+<h4 class="date"><em>2017-10-14</em></h4>
</div>
@@ -188,16 +188,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
160
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -209,16 +209,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
160
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -230,16 +230,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
4
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
108
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
</td>
</tr>
@@ -251,16 +251,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
258
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -272,16 +272,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
8
</div>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
360
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
</td>
</tr>
@@ -290,6 +290,287 @@
<p>Here is a little bit more explanation. Both <code>formattable::color_tile</code> and <code>formattable::color_bar</code> returns a function object which can take a numeric vector. That’s why you can put things like <code>(mpg)</code> after <code>color_tile("white", "orange")</code> as you can see in the <code>mutate</code> function. This way of using the function may look a little odd but is totally valid (, I think :P).</p>
<p>Also, if you are using it in this way, make sure you put <code>escape = F</code> in <code>kable</code>.</p>
<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime.</p>
+<hr />
+<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
+<pre class="r"><code>iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x){
+ cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+ }) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling(full_width = F)</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:center;">
+Sepal.Length
+</th>
+<th style="text-align:center;">
+Sepal.Width
+</th>
+<th style="text-align:center;">
+Petal.Length
+</th>
+<th style="text-align:center;">
+Petal.Width
+</th>
+<th style="text-align:center;">
+Species
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 17px;">
+5.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+3.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 11px;">
+3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 13px;">
+4.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 13px;">
+3.2
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+1.3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 17px;">
+3.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+5.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+3.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+1.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+0.4
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 17px;">
+0.3
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+4.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+2.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+0.1
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+</tbody>
+</table>
diff --git a/man/cell_spec.Rd b/man/cell_spec.Rd
index cf6e298..291a18a 100644
--- a/man/cell_spec.Rd
+++ b/man/cell_spec.Rd
@@ -6,7 +6,7 @@
\usage{
cell_spec(x, format, bold = F, italic = F, monospace = F, color = NULL,
background = NULL, align = NULL, font_size = NULL, angle = NULL,
- hover_message = NULL)
+ hover_message = NULL, background_as_tile = TRUE)
}
\arguments{
\item{x}{Things to be formated. It could be a vector of numbers or strings.}
@@ -40,6 +40,9 @@
\item{hover_message}{A vector of strings to be displayed as hover message.
Of course, this feature is nly available in HTML.}
+
+\item{background_as_tile}{T/F value indicating if you want to have round
+cornered tile as background.}
}
\description{
Specify Cell format before it gets into kable
diff --git a/man/row_spec.Rd b/man/row_spec.Rd
index 3b1e24a..ef7712c 100644
--- a/man/row_spec.Rd
+++ b/man/row_spec.Rd
@@ -23,8 +23,8 @@
\item{monospace}{A T/F value to control whether the text of the selected column
need to be monospaced (verbatim)}
-\item{color}{A character string for row text color. Here please pay
-attention to the differences in color codes between HTML and LaTeX.}
+\item{color}{A character string for row text color. For example, "red" or
+"#BBBBBB".}
\item{background}{A character string for row background color. Here please
pay attention to the differences in color codes between HTML and LaTeX.}
diff --git a/man/spec_color.Rd b/man/spec_color.Rd
index 5a106f2..ab25980 100644
--- a/man/spec_color.Rd
+++ b/man/spec_color.Rd
@@ -5,7 +5,7 @@
\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")
+ option = "D", na_color = "#BBBBBB")
}
\arguments{
\item{x}{continuous vectors of values}
diff --git a/tests/visual_tests/cell_spec_html.Rmd b/tests/visual_tests/cell_spec_html.Rmd
index 4e90de3..fb645ad 100644
--- a/tests/visual_tests/cell_spec_html.Rmd
+++ b/tests/visual_tests/cell_spec_html.Rmd
@@ -22,3 +22,16 @@
kable("html", escape = F) %>%
kable_styling("condensed", full_width = F)
```
+
+```{r}
+iris[, 1:4] %>%
+ mutate_all(function(x){
+ cell_spec(x, "html",
+ color = spec_color(x, option = "A"),
+ font_size = spec_font_size(x),
+ bold = T)
+ }) %>%
+ kable("html", escape = F, booktabs = T, linesep = "", align = "c")%>%
+ row_spec(0, angle = 270, align = "right") %>%
+ kable_styling(full_width = F)
+```
diff --git a/tests/visual_tests/cell_spec_pdf.Rmd b/tests/visual_tests/cell_spec_pdf.Rmd
index 3134ef9..3368501 100644
--- a/tests/visual_tests/cell_spec_pdf.Rmd
+++ b/tests/visual_tests/cell_spec_pdf.Rmd
@@ -12,14 +12,12 @@
```
```{r}
-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)),
- disp = cell_spec(disp, "latex", background = spec_color(disp),
- color = "white", bold = T)
- ) %>%
- kable("latex", escape = F, booktabs = T) %>%
- row_spec(0, angle = 90)
+iris[1:10, 1:4] %>%
+ mutate_all(function(x){
+ cell_spec(x, "latex",
+ background = spec_color(x),
+ font_size = spec_font_size(x),
+ color = "white", bold = T)
+ }) %>%
+ kable("latex", escape = F, booktabs = T, linesep = "", align = "c")
```