Skip to content

Commit

Permalink
Improve footnote marks (#876)
Browse files Browse the repository at this point in the history 
* Improve positioning of footnote marks

* Apply superscript except for `*`

* Update snapshot tests

* Add `.gt_asterisk` class to default SCSS

* Apply `gt_asterisk` where necessary

* Remove unnecessary tagList

Co-authored-by: Joe Cheng <joe@rstudio.com>
  • Loading branch information
@rich-iannone @jcheng5
rich-iannone and jcheng5 authored Feb 8, 2022
1 parent 7aa301b commit 3e0a1ac
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 20 deletions.
29 changes: 17 additions & 12 deletions R/utils_render_html.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@
#' @noRd
footnote_mark_to_html <- function(mark) {

as.character(
htmltools::tagList(htmltools::tags$sup(class = "gt_footnote_marks", mark))
)
# Generate the CSS classes needed on the basis of whether the
# mark is one or more asterisk characters or anything else
if (!grepl("^[\\*]+?$", mark)) {
sup_class <- "gt_footnote_marks"
} else {
sup_class <- "gt_footnote_marks gt_asterisk"
}

as.character(htmltools::tags$sup(class = sup_class, mark))
}

styles_to_html <- function(styles) {
Expand Down Expand Up @@ -1078,15 +1084,14 @@ create_footnotes_component_h <- function(data) {
FUN = function(x, footnote_text) {
as.character(
htmltools::tagList(
htmltools::tags$sup(
.noWS = c("after", "before"),
class = "gt_footnote_marks",
htmltools::tags$em(
.noWS = c("after", "before"),
paste0(x, " ")
)
),
htmltools::HTML(process_text(footnote_text, context = "html"))
htmltools::HTML(
paste0(
footnote_mark_to_html(x),
" ",
process_text(footnote_text, context = "html")
),
.noWS = c("after", "before")
)
)
)
}
Expand Down
8 changes: 7 additions & 1 deletion inst/css/gt_styles_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,13 @@
.gt_footnote_marks {
font-style: italic;
font-weight: normal;
font-size: 65%;
font-size: 75%;
vertical-align: 0.4em;
}

.gt_asterisk {
font-size: 100%;
vertical-align: 0;
}

.gt_slash_mark {
Expand Down
6 changes: 3 additions & 3 deletions tests/testthat/_snaps/footer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Code
.
Output
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot class=\"gt_sourcenotes\">\n <tr>\n <td class=\"gt_sourcenote\" colspan=\"9\">Source note **bold** (#1, no `md()`)</td>\n </tr>\n <tr>\n <td class=\"gt_sourcenote\" colspan=\"9\">Source note <strong>bold</strong> (#2, uses <code>md()</code>)</td>\n </tr>\n </tfoot>\n <tfoot class=\"gt_footnotes\">\n <tr>\n <td class=\"gt_footnote\" colspan=\"9\"><sup class=\"gt_footnote_marks\"><em>1 </em></sup>footnote **bold** (#1, no `md()`)</td>\n </tr>\n <tr>\n <td class=\"gt_footnote\" colspan=\"9\"><sup class=\"gt_footnote_marks\"><em>2 </em></sup>footnote <strong>bold</strong> (#2, uses <code>md()</code>)</td>\n </tr>\n </tfoot>\n</table>"
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot class=\"gt_sourcenotes\">\n <tr>\n <td class=\"gt_sourcenote\" colspan=\"9\">Source note **bold** (#1, no `md()`)</td>\n </tr>\n <tr>\n <td class=\"gt_sourcenote\" colspan=\"9\">Source note <strong>bold</strong> (#2, uses <code>md()</code>)</td>\n </tr>\n </tfoot>\n <tfoot class=\"gt_footnotes\">\n <tr>\n <td class=\"gt_footnote\" colspan=\"9\"><sup class=\"gt_footnote_marks\">1</sup> footnote **bold** (#1, no `md()`)</td>\n </tr>\n <tr>\n <td class=\"gt_footnote\" colspan=\"9\"><sup class=\"gt_footnote_marks\">2</sup> footnote <strong>bold</strong> (#2, uses <code>md()</code>)</td>\n </tr>\n </tfoot>\n</table>"

---

Expand Down Expand Up @@ -122,7 +122,7 @@
Code
.
Output
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot>\n <tr class=\"gt_sourcenotes\">\n <td class=\"gt_sourcenote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\">Source note **bold** (#1, no `md()`)&nbsp; Source note <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n <tfoot>\n <tr class=\"gt_footnotes\">\n <td class=\"gt_footnote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\"><sup class=\"gt_footnote_marks\"><em>1 </em></sup>footnote **bold** (#1, no `md()`)&nbsp; <sup class=\"gt_footnote_marks\"><em>2 </em></sup>footnote <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n</table>"
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot>\n <tr class=\"gt_sourcenotes\">\n <td class=\"gt_sourcenote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\">Source note **bold** (#1, no `md()`)&nbsp; Source note <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n <tfoot>\n <tr class=\"gt_footnotes\">\n <td class=\"gt_footnote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\"><sup class=\"gt_footnote_marks\">1</sup> footnote **bold** (#1, no `md()`)&nbsp; <sup class=\"gt_footnote_marks\">2</sup> footnote <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n</table>"

---

Expand Down Expand Up @@ -241,7 +241,7 @@
Code
.
Output
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot>\n <tr class=\"gt_sourcenotes\">\n <td class=\"gt_sourcenote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\">Source note **bold** (#1, no `md()`) <em>|</em> Source note <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n <tfoot>\n <tr class=\"gt_footnotes\">\n <td class=\"gt_footnote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\"><sup class=\"gt_footnote_marks\"><em>1 </em></sup>footnote **bold** (#1, no `md()`) <em>|</em> <sup class=\"gt_footnote_marks\"><em>2 </em></sup>footnote <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n</table>"
[1] "<table class=\"gt_table\">\n \n <thead class=\"gt_col_headings\">\n <tr>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">num<sup class=\"gt_footnote_marks\">1</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">char<sup class=\"gt_footnote_marks\">2</sup></th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\">fctr</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">date</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">time</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">datetime</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"1\" colspan=\"1\">currency</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">row</th>\n <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\">group</th>\n </tr>\n </thead>\n <tbody class=\"gt_table_body\">\n <tr><td class=\"gt_row gt_right\">0.1111</td>\n<td class=\"gt_row gt_left\">apricot</td>\n<td class=\"gt_row gt_center\">one</td>\n<td class=\"gt_row gt_left\">2015-01-15</td>\n<td class=\"gt_row gt_left\">13:35</td>\n<td class=\"gt_row gt_left\">2018-01-01 02:22</td>\n<td class=\"gt_row gt_right\">49.95</td>\n<td class=\"gt_row gt_left\">row_1</td>\n<td class=\"gt_row gt_left\">grp_a</td></tr>\n </tbody>\n <tfoot>\n <tr class=\"gt_sourcenotes\">\n <td class=\"gt_sourcenote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\">Source note **bold** (#1, no `md()`) <em>|</em> Source note <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n <tfoot>\n <tr class=\"gt_footnotes\">\n <td class=\"gt_footnote\" colspan=\"9\">\n <div style=\"padding-bottom:2px;\"><sup class=\"gt_footnote_marks\">1</sup> footnote **bold** (#1, no `md()`) <em>|</em> <sup class=\"gt_footnote_marks\">2</sup> footnote <strong>bold</strong> (#2, uses <code>md()</code>)</div>\n </td>\n </tr>\n </tfoot>\n</table>"

---

Expand Down
Loading

0 comments on commit 3e0a1ac

Please sign in to comment.