Sort icons in DataTables 1.12 -- don't display well on a Mac.

lisarush

The arrow/triangle up/down characters used for the sort icons (via :before / :after styling) do not display symmetrically on a Mac. This is evidently a Mac thing; if you go to https://w3schools.com/charsets/ref_utf_geometric.asp, the characters themselves are not symmetrical; the down-arrow looks "squashed" compared to the up-arrow. However, the regular-size triangle versions seem to be symmetrical. Therefore, I have modified my CSS to the following.

Also, I used the \u#### values instead of the direct character, as I believe (I could be wrong here) that they are more universally accepted by the browser. (The page must have UTF-8 encoding for the direct character to work, where ISO-8859-1 is the browser default. Most pages would hopefully be setting the character encoding to UTF-8 for this to usually not be an issue. But by setting the value via \u####, it will work for both character encodings.)

/* Change arrow up/down icons for sorting to be more opaque for visibility. */
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    opacity: 0.35;   /* lighter if not sorted */
    font-size: 6pt;  /* slightly smaller & NOT relative */
}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:after {
   opacity: 1;  /* darker if sorted */
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
   content: "\25B2";  /* change to 'regular triangle' to look better on a Mac */
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
   content: "\25BC";  /* change to 'regular triangle' to look better on a Mac */
}

allan

Hi Lisa,

Thanks for the suggestion. This change is actually already committed. I'd thought that it was in 1.12.1 but apparently I just missed it. I'll get a release with the change out shortly.

Allan