Есть ли перевернутый каретный персонаж? - PullRequest
Новая
       40

Есть ли перевернутый каретный персонаж?

229 голосов
/ 04 декабря 2008

Мне нужно поддерживать большое количество классических ASP-страниц, многие из которых имеют табличные данные без каких-либо возможностей сортировки. Какой бы порядок не использовал исходный разработчик в запросе к базе данных, это то, с чем вы застряли.

Я хочу использовать некоторые базовые функции сортировки для нескольких страниц, и я делаю все это на стороне клиента с помощью JavaScript. У меня уже есть базовый скрипт, выполненный для сортировки заданной таблицы по заданному столбцу в заданном направлении, и он работает хорошо, пока таблица ограничена определенными соглашениями, которым мы следуем здесь.

Что я хочу сделать для пользовательского интерфейса, это просто указать направление сортировки с помощью символа вставки (^) и ... что? Есть ли специальный персонаж, который прямо противоположен карету? Буква v не совсем разрезает его. В качестве альтернативы, можно ли использовать другое сочетание символов?

Ответы [ 16 ]

3 голосов
/ 31 мая 2017

Вы можете рассмотреть возможность использования Font Awesome вместо использования Юникода или других значков

Код может быть таким простым, как (a), включая font-awesome, например <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (б) создание такой кнопки, как <button><i class="fa fa-arrow-down"></i></button>

2 голосов
/ 02 марта 2018

Нет перевернутого символа каретки, но вы можете легко вращать каретку с помощью 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>

Обратите внимание на следующее ...

  • Я внес небольшую поправку в положение каретки, так как обычно она высокая (таким образом, низкая в повернутой версии). Вы хотите переместить это немного вверх. Это «маленький» относится к размеру шрифта, следовательно, «их». В зависимости от вашего выбора шрифта, вы можете захотеть поиграть с этим, чтобы он выглядел хорошо.
  • Это решение не работает в IE8. Вы должны использовать фильтр, если вы хотите поддержку IE8. Поддержка IE8 на самом деле не требуется и не распространена в 2018 году.
  • Если вы хотите использовать это в сочетании с Twitter Bootstrap, переименуйте класс 'caret' во что-то еще, например 'caret_down' (так как он сталкивается с именем класса из Twitter Bootstrap).
2 голосов
/ 27 июня 2017

^ (Caret - или Ascii Circumflex), полученный нажатием shift + 6, похоже, не имеет противоположности Ascii, а именно Ascii Inverted Circumflex.

Но для альтернативного сочетания символов, в котором также есть комбинации клавиш, вы можете использовать:

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

Источник: fileformat.info

1 голос
/ 15 апреля 2019
0 голосов
/ 09 января 2018

Если вам нужен потрясающий шрифт для приложений React, тогда React Icons - очень хороший ресурс, который очень легко реализовать. Он включает в себя гораздо больше библиотек, чем просто шрифт.

0 голосов
/ 26 апреля 2017

Не могли бы вы просто нарисовать путь SVG внутри диапазона, используя document.write? Интервал не требуется для работы svg, он просто гарантирует, что svg останется встроенным в любой текст, рядом с которым находится карат. Я использовал margin-bottom для вертикального центрирования текста, возможно, есть другой способ сделать это. Это то, что я сделал на стороне моего блога nav (минус 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>
Страница:
...