Tengo que mantener una gran cantidad de páginas ASP clásicas, muchas de las cuales tienen datos tabulares sin ninguna capacidad de clasificación. Cualquier orden que haya utilizado el desarrollador original en la consulta de la base de datos es con lo que está atrapado.

Quiero agregar una clasificación básica a un montón de estas páginas, y lo estoy haciendo todo del lado del cliente con javascript. Ya tengo el script básico hecho para ordenar una tabla dada en una columna dada en una dirección dada, y funciona bien siempre que la tabla esté limitada por ciertas convenciones que seguimos aquí.

Lo que quiero hacer para la interfaz de usuario es simplemente indicar la dirección de clasificación con el carácter de intercalación (^) y ... ¿qué? ¿Hay un personaje especial que sea el opuesto directo de un cursor? La carta vno es suficiente. Alternativamente, ¿hay otro emparejamiento de personajes que pueda usar?

Hay ▲: & # 9650; y ▼: & # 9660;

No olvide los caracteres ∧(lógico y) y ∨(lógico o), eso es lo que uso para indicar la dirección de clasificación: entidades HTML ∧y ∨respectivamente.

Siempre hay una "v" en minúscula. Pero en serio, aparte de Unicode, todo lo que puedo encontrar sería &darr, que parece ↓.

Un circunflejo invertido se llama caron o háček.

Tiene una entidad HTML en la extensión TADS Latin-2 a HTML: ˇy se ve así: ˇ que desafortunadamente no se muestra en el mismo tamaño / proporción que el ^ caret.

O puedes usar el Unicode U+30C.

˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅

 ˅˅˅  Hǝɹǝ, s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 He aquí  un set.  ˄˄˄

˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄

"Tamaño real": ˅˄˅˄  
_{(más información)}

Editar: otra opción ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{Unicode # 8897 / U + 22C1 ( información )}} llamado N-ARY LOGICAL OR

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{Unicode # 8896 / U + 22C0 ( información )}} llamado N-ARY LOGICAL AND

"Tamaño real": ⋁⋀⋁⋀

Una opción poderosa, y que también aumenta la creatividad, es diseñar tus propios personajes usando personajes de dibujo de caja .

¿Quieres un "caret" apuntando hacia abajo? Aquí hay uno: ╲╱

Los he descubierto recientemente, y me complace usar personajes tan personalizados para etiquetar todo :).

Es posible que pueda usar los triángulos negros, los valores Unicode U + 25b2 y U + 25bc. O las flechas, U + 2191 y U + 2193.

código c #

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

Puede considerar usar Font Awesome en lugar de usar unicode u otros íconos

El código puede ser tan simple como (a) incluyendo font-awesome, por ejemplo <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(b) haciendo un botón como<button><i class="fa fa-arrow-down"></i></button>

Usaría un par de pequeñas imágenes. Se vería mejor también.

Alternativamente, puede probar la utilidad Mapa de caracteres que viene con Windows o intente buscar aquí .

Otra solución que he visto es usar la fuente Wingdings para los símbolos. Eso tiene muchas flechas.

Hice el subíndice mayúscula y la V en negrita. Funciona perfectamente (aunque requiere un poco de esfuerzo, si es necesario hacerlo de forma repetitiva)

Sintaxis:

<sub><strong>v</strong></sub>

Salida:
_v

El ^(Caret - o Ascii Circumflex), producido al presionar shift+ 6, no parece tener un Ascii opuesto, es decir, un Ascii Inverted Circumflex.

Pero para su emparejamiento de caracteres alternativos que también tienen combinaciones de teclado, puede usar:

ˆ (Circumflex) shift+ alt+ iy
ˇ (Caron) shift+ alt+t

Fuente: fileformat.info

No hay un carácter de intercalación invertido, pero puede rotarlo fácilmente con CSS. Esta es una solución simple que se ve perfecta. Presione 'Ejecutar fragmento de código' para verlo en acción:

.upsidedown {
transform:rotate(180deg); 
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.upsidedown.caret {
display: inline-block; 
position:relative; 
bottom: 0.15em;
}

more items <span class="upsidedown caret">^</span>

Tenga en cuenta lo siguiente ...

• Hice una pequeña corrección para el posicionamiento del cursor, ya que normalmente es alto (por lo tanto, bajo en la versión girada). Quieres moverlo un poco hacia arriba. Este 'pequeño' es relativo al tamaño de fuente, de ahí el 'em'. Dependiendo de su elección de fuente, es posible que desee jugar con esto para que se vea bien.
• Esta solución no funciona en IE8. Debería usar un filtro si desea soporte para IE8. El soporte para IE8 no es realmente requerido ni común en 2018.
• Si desea usar esto en combinación con Twitter Bootstrap, cambie el nombre de la clase 'caret' a otra cosa, como 'caret_down' (ya que colisiona con un nombre de clase de Twitter Bootstrap).

U + 2304 FLECHA ABAJO , en HTML como & # 8964;

¿Podría dibujar una ruta svg dentro de un lapso usando document.write? El intervalo no es necesario para que el svg funcione, solo garantiza que el svg permanezca en línea con cualquier texto al lado del quilate. Utilicé el margen inferior para centrarlo verticalmente con el texto, aunque podría haber otra forma de hacerlo. Esto es lo que hice en el navegador lateral de mi blog (menos el js). Si no tiene texto al lado, no necesitaría el espacio o el desplazamiento del margen inferior.

<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>

Así que quería el cursor exactamente como en OWA, así que descargué office365icons.woffdesde https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(tengo que iniciar sesión para hacerlo, lo hice a través del navegador) y luego, copiando el estilo simplificado del sitio web:

  @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;
  }

Y finalmente:

<span class="o-icon">&#xe088;</span>

Si necesita Font-Awesome para React Apps, React Icons es un recurso muy bueno y muy fácil de implementar. Incluye muchas más bibliotecas que solo font-awesome.