많은 수의 클래식 ASP 페이지를 유지해야합니다. 대부분의 페이지에는 정렬 기능이없는 테이블 형식 데이터가 있습니다. 데이터베이스 쿼리에 사용 된 원래 개발자가 무엇을 주문하든 문제가 있습니다.

이 페이지들에 대한 몇 가지 기본 정렬을 다루고 싶습니다. 모든 클라이언트 측에서 자바 스크립트를 사용하고 있습니다. 주어진 열의 주어진 테이블에서 주어진 방향으로 주어진 테이블을 정렬하기 위해 이미 기본 스크립트를 수행했으며 테이블이 우리가 따르는 특정 규칙에 의해 제한되는 한 잘 작동합니다.

UI에 대해하고 싶은 것은 캐럿 문자 (^)로 정렬 방향을 나타내는 것입니다 ... 무엇입니까? 캐럿과 직접적으로 반대되는 특별한 특성이 있습니까? 편지 v가 잘리지 않을 것입니다. 또는 사용할 수있는 다른 문자 쌍이 있습니까?

▲ : & # 9650; 및 ▼ : & # 9660;

잊어하지 마십시오 ∧(논리적) 및 ∨HTML 엔티티 : 나는 정렬 방향을 나타 내기 위해 무엇을 사용하는, (논리 또는) 문자 ∧및 ∨각각입니다.

항상 소문자 "v"가 있습니다. 그러나 진지하게 유니 코드를 제외하고는 &darr↓처럼 보입니다.

거꾸로 된 곡절을 caron 또는 háček 이라고합니다 .

TADS Latin-2 확장에 HTML에 대한 HTML 엔티티가 ˇ있으며 다음과 같이 보입니다 : ˇ 불행하게도 ^ 캐럿과 같은 크기 / 비율로 표시되지 않습니다.

또는 유니 코드를 사용할 수 있습니다 U+30C.

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

 ˅˅˅  Hǝɹǝ,의 ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 여기에  일치하는 설정입니다.  ˄˄˄

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

"실제 크기": ˅˄˅˄  
_{(추가 정보)}

편집 : 다른 옵션 ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{유니 코드 # 8897 / U + 22C1 ( 정보 )}} 라는 이름의 논리적 N-ARY OR

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{유니 코드 # 8896 / U + 22C0 ( 정보 )}} 논리적 N-ARY 이름과

"실제 크기": ⋁⋀⋁⋀

창의력을 높이는 강력한 옵션은 상자 그리기 문자를 사용하여 나만의 문자를 디자인하는 것 입니다.

아래로 향한 "캐럿"을 원하십니까? 여기 하나가 있습니다 : ╲╱

나는 최근에 그것들을 발견했다. 그리고 나는 모든 것들에 레이블을 붙이기 위해 그러한 맞춤 디자인 된 캐릭터를 사용하는 것을 매우 기쁘게 생각한다 :).

검은 색 삼각형, 유니 코드 값 U + 25b2 및 U + 25bc를 사용할 수 있습니다. 또는 화살표 U + 2191 및 U + 2193입니다.

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

당신은 고려할 수 있습니다 글꼴 최고 대신 유니 코드 또는 다른 아이콘을 사용하여

코드는 다음과 같이 간단합니다. (a) 멋진 글꼴을 포함합니다. 예 : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(b) 다음과 같은 버튼 만들기<button><i class="fa fa-arrow-down"></i></button>

작은 이미지 몇 개를 사용하겠습니다. 더 좋아 보일 것입니다.

또는 Windows와 함께 제공되는 문자표 유틸리티를 사용하거나 여기를 참조하십시오 .

내가 본 또 다른 해결책은 기호에 Wingdings 글꼴을 사용하는 것입니다. 많은 화살표가 있습니다.

나는 첨자를 대문자로하고 대담한 V를 썼다. 그것은 완벽하게 작동한다 (반복적으로 수행해야한다면 약간의 노력이 필요하지만)

통사론:

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

출력 :
_v

^(캐럿 - 또는 ASCII 곡절)는, 가압에 의해 생산 shift+를6 , 아스키 반대측, 즉 아스키 반전 곡절이 나타나지 않는다.

그러나 키보드 조합이있는 대체 문자 쌍의 경우 다음을 사용할 수 있습니다.

ˆ (Circumflex) shift+ alt+ i및
ˇ (Caron) shift+ alt+t

출처 : fileformat.info

뒤집힌 캐럿 문자는 없지만 CSS를 사용하여 캐럿을 쉽게 회전 할 수 있습니다. 이것은 완벽한 것처럼 보이는 간단한 솔루션입니다. '실행 코드 스 니펫'을 눌러 작동 상태를 확인하십시오.

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

다음 사항에 유의하십시오 ...

• 캐럿의 위치는 일반적으로 높기 때문에 (회전 버전에서는 낮음) 약간 수정했습니다. 조금 위로 옮기고 싶습니다. 이 '작은'은 글꼴 크기와 관련이 있으므로 'em'입니다. 글꼴 선택에 따라이 글꼴로 좋아 보이게 만들 수 있습니다.
• 이 솔루션은 IE8에서 작동하지 않습니다. IE8을 지원하려면 필터를 사용해야합니다. 2018 년에는 IE8 지원이 실제로 필요하거나 일반적이지 않습니다.
• 이것을 트위터 부트 스트랩과 함께 사용하려면 '캐럿'클래스 이름을 '캐럿 _ 다운'과 같은 다른 이름으로 바꾸십시오 (트위터 부트 스트랩의 클래스 이름과 충돌하기 때문에).

HTML에서 & # 8964; U + 2304 DOWN ARROWHEAD

document.write를 사용하여 스팬 안에 svg 경로를 그릴 수 있습니까? 스팬은 svg가 작동하는 데 필요하지 않으며 svg가 캐럿 옆에있는 텍스트와 인라인으로 유지되도록합니다. 나는 margin-bottom을 사용하여 텍스트를 세로로 가운데에 배치했지만 다른 방법이있을 수 있습니다. 이것이 내 블로그의 측면 탐색 에서 수행 한 작업입니다 (js 제외). 옆에 텍스트가 없으면 범위 또는 여백 하단 오프셋이 필요하지 않습니다.

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

그래서 OWA에서와 마찬가지로 캐럿을 원했기 때문에 다운로드 office365icons.woff하여 https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(로그인하여 브라우저를 통해 로그인해야 함) 웹 사이트에서 삶은 스타일을 복사했습니다.

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

그리고 마지막으로:

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

React Apps를 위해 멋진 글꼴이 필요한 경우 React Icons 는 매우 훌륭한 리소스이며 구현하기 매우 쉽습니다. 글꼴보다 더 많은 라이브러리가 포함되어 있습니다.