I have to maintain a large number of classic ASP pages, many of which have tabular data with no sort capabilities at all. Whatever order the original developer used in the database query is what you're stuck with.
I want to to tack on some basic sorting to a bunch of these pages, and I'm doing it all client side with javascript. I already have the basic script done to sort a given table on a given column in a given direction, and it works well as long as the table is limited by certain conventions we follow here.
What I want to do for the UI is just indicate sort direction with the caret character ( ^ ) and ... what? Is there a special character that is the direct opposite of a caret? The letter v won't quite cut it. Alternatively, is there another character pairing I can use?
This question is related to
html
sorting
user-interface
character-encoding
character
There's always a lowercase "v". But seriously, aside from Unicode, all I can find would be &darr, which looks like ↓.
An upside-down circumflex is called a caron, or a hácek.
It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
Or you can use the unicode U+30C.
??? H???,s ? ??????u? s??? ???
^^^ Here's a matching set. ^^^
"Actual size": ?^?^
(more info)
"Actual size": ????
I'd use a couple of tiny images. Would look better too.
Alternatively, you can try the Character Map utility that comes with Windows or try looking here.
Another solution I've seen is to use the Wingdings font for symbols. That has a lot fo arrows.
??? H???,s ? ??????u? s??? ???
^^^ Here's a matching set. ^^^
"Actual size": ?^?^
(more info)
"Actual size": ????
c# code
int i = 0;
char c = '?';
i = (int)c;
Console.WriteLine(i); // prints 8593
int j = 0;
char d = '?';
j = (int)d;
Console.WriteLine(j); // prints 8595
So I wanted the caret exactly as in OWA, so I downloaded office365icons.woff from
https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff (have to be logged in to do it, so did it through browser) and then, copying the boiled-down style from the website:
@font-face {
font-family: 'Office365Icons';
src: url('/fonts/office365icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
span.o-icon {
font-family: 'Office365Icons';
font-size: 14pt;
line-height: 21px;
color: #666;
}
And finally:
<span class="o-icon"></span>
I did subscript capital & bolded V. It works perfectly (although it takes some effort, if it needs to be done repetitively)
Syntax:
<sub><strong>v</strong></sub>
Output:
v
An upside-down circumflex is called a caron, or a hácek.
It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
Or you can use the unicode U+30C.
There's always a lowercase "v". But seriously, aside from Unicode, all I can find would be &darr, which looks like ↓.
The ^ (Caret - or Ascii Circumflex), produced by pressing shift + 6, does not appear to have an Ascii opposite, namely an Ascii Inverted Circumflex.
But for your alternative character pairing that also have keyboard combinations, you could use:
ˆ (Circumflex) shift + alt + i and
? (Caron) shift + alt + t
Source: fileformat.info
You might be able to use the black triangles, Unicode values U+25b2 and U+25bc. Or the arrows, U+2191 and U+2193.
U+2304 DOWN ARROWHEAD, in HTML as ⌄
There is no upside down caret character, but you can easily rotate the caret with CSS. This is a simple solution that looks perfect. Press 'Run code snippet' to see it in action:
.upsidedown {_x000D_
transform:rotate(180deg); _x000D_
-webkit-transform:rotate(180deg);_x000D_
-o-transform:rotate(180deg);_x000D_
-ms-transform:rotate(180deg);_x000D_
}_x000D_
.upsidedown.caret {_x000D_
display: inline-block; _x000D_
position:relative; _x000D_
bottom: 0.15em;_x000D_
}more items <span class="upsidedown caret">^</span>Please note the following...
U+2304 DOWN ARROWHEAD, in HTML as ⌄
An upside-down circumflex is called a caron, or a hácek.
It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
Or you can use the unicode U+30C.
I'd use a couple of tiny images. Would look better too.
Alternatively, you can try the Character Map utility that comes with Windows or try looking here.
Another solution I've seen is to use the Wingdings font for symbols. That has a lot fo arrows.
Could you just draw an svg path inside of a span using document.write? The span isn't required for the svg to work, it just ensures that the svg remains inline with whatever text the carat is next to. I used margin-bottom to vertically center it with the text, there might be another way to do that though. This is what I did on my blog's side nav (minus the js). If you don't have text next to it you wouldn't need the span or the margin-bottom offset.
<div id="ID"></div>
<script type="text/javascript">
var x = document.getElementById('ID');
// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>
So I wanted the caret exactly as in OWA, so I downloaded office365icons.woff from
https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff (have to be logged in to do it, so did it through browser) and then, copying the boiled-down style from the website:
@font-face {
font-family: 'Office365Icons';
src: url('/fonts/office365icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
span.o-icon {
font-family: 'Office365Icons';
font-size: 14pt;
line-height: 21px;
color: #666;
}
And finally:
<span class="o-icon"></span>
You might consider using Font Awesome instead of using the unicode or other icons
The code can be as simple as (a) including font-awesome e.g. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (b) making a button such as <button><i class="fa fa-arrow-down"></i></button>
If you are needing font-awesome for React Apps then React Icons is a very good resource and very easy to implement. It includes a lot more libraries than just font-awesome.
The ^ (Caret - or Ascii Circumflex), produced by pressing shift + 6, does not appear to have an Ascii opposite, namely an Ascii Inverted Circumflex.
But for your alternative character pairing that also have keyboard combinations, you could use:
ˆ (Circumflex) shift + alt + i and
? (Caron) shift + alt + t
Source: fileformat.info
c# code
int i = 0;
char c = '?';
i = (int)c;
Console.WriteLine(i); // prints 8593
int j = 0;
char d = '?';
j = (int)d;
Console.WriteLine(j); // prints 8595
You might be able to use the black triangles, Unicode values U+25b2 and U+25bc. Or the arrows, U+2191 and U+2193.
I'd use a couple of tiny images. Would look better too.
Alternatively, you can try the Character Map utility that comes with Windows or try looking here.
Another solution I've seen is to use the Wingdings font for symbols. That has a lot fo arrows.
I'd use a couple of tiny images. Would look better too.
Alternatively, you can try the Character Map utility that comes with Windows or try looking here.
Another solution I've seen is to use the Wingdings font for symbols. That has a lot fo arrows.
There's always a lowercase "v". But seriously, aside from Unicode, all I can find would be &darr, which looks like ↓.
If you are needing font-awesome for React Apps then React Icons is a very good resource and very easy to implement. It includes a lot more libraries than just font-awesome.
c# code
int i = 0;
char c = '?';
i = (int)c;
Console.WriteLine(i); // prints 8593
int j = 0;
char d = '?';
j = (int)d;
Console.WriteLine(j); // prints 8595
You might be able to use the black triangles, Unicode values U+25b2 and U+25bc. Or the arrows, U+2191 and U+2193.
A powerful option – and one which also boosts creativity – is designing your own characters using box drawing characters.
Want a down pointing "caret"? Here's one: ??
I've recently discovered them — and I take great pleasure at using such custom designed characters for labeling things all around :) .
Could you just draw an svg path inside of a span using document.write? The span isn't required for the svg to work, it just ensures that the svg remains inline with whatever text the carat is next to. I used margin-bottom to vertically center it with the text, there might be another way to do that though. This is what I did on my blog's side nav (minus the js). If you don't have text next to it you wouldn't need the span or the margin-bottom offset.
<div id="ID"></div>
<script type="text/javascript">
var x = document.getElementById('ID');
// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>
You might be able to use the black triangles, Unicode values U+25b2 and U+25bc. Or the arrows, U+2191 and U+2193.
c# code
int i = 0;
char c = '?';
i = (int)c;
Console.WriteLine(i); // prints 8593
int j = 0;
char d = '?';
j = (int)d;
Console.WriteLine(j); // prints 8595
A powerful option – and one which also boosts creativity – is designing your own characters using box drawing characters.
Want a down pointing "caret"? Here's one: ??
I've recently discovered them — and I take great pleasure at using such custom designed characters for labeling things all around :) .
There's always a lowercase "v". But seriously, aside from Unicode, all I can find would be &darr, which looks like ↓.
An upside-down circumflex is called a caron, or a hácek.
It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
Or you can use the unicode U+30C.
There is no upside down caret character, but you can easily rotate the caret with CSS. This is a simple solution that looks perfect. Press 'Run code snippet' to see it in action:
.upsidedown {_x000D_
transform:rotate(180deg); _x000D_
-webkit-transform:rotate(180deg);_x000D_
-o-transform:rotate(180deg);_x000D_
-ms-transform:rotate(180deg);_x000D_
}_x000D_
.upsidedown.caret {_x000D_
display: inline-block; _x000D_
position:relative; _x000D_
bottom: 0.15em;_x000D_
}more items <span class="upsidedown caret">^</span>Please note the following...
You might consider using Font Awesome instead of using the unicode or other icons
The code can be as simple as (a) including font-awesome e.g. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (b) making a button such as <button><i class="fa fa-arrow-down"></i></button>
I did subscript capital & bolded V. It works perfectly (although it takes some effort, if it needs to be done repetitively)
Syntax:
<sub><strong>v</strong></sub>
Output:
v
Source: Stackoverflow.com