Как предотвратить отображение символов Юникода как эмодзи в HTML из JavaScript?

120

Я нахожу Unicode для специальных символов из поиска FileFormat.Info .

Некоторые символы отображаются как классические черно-белые глифы, например ⚠ (предупреждающий знак \u26A0или ⚠). Это предпочтительнее, поскольку я могу применять к ним стили CSS (например, цвет).

изображение предупреждающего символа

Другие визуализируются как новые мультяшные эмодзи, например ⌛ (песочные часы \u231Bили ⌛). Это нежелательно, так как я не могу полностью их стилизовать.

изображение песочных часов смайликов

Похоже, что браузер вносит это изменение, поскольку я могу видеть символ песочных часов в Mac Firefox, но не в Mac Chrome или Mac Safari.

Есть ли способ заставить браузеры отображать более старые (плоские монотонные) версии для отображения?

Обновление : кажется (из комментариев ниже) есть селектор текст презентация , FE0E, доступный для обеспечения текста-противов-смайликов. Селектор объединяется в виде суффикса без пробела в код символа, например, ⌛︎для шестнадцатеричного HTML или \u231B\uFE0EJS. Однако это не соблюдается всеми браузерами (например, Chrome и Edge).

javascript  html  css  unicode  emoji 
— Arithmomaniac
источник
вы устанавливаете семейство шрифтов в правилах CSS?
— G-Cyrillus
2
— 一 二三
1
@janaspage ︎и \uFE0Eверны (2 и 8) и отлично работают в Safari (8 и 9), но, как сказано в ответе, поддержка браузеров нестабильна, а Chrome (46) полностью не работает.
— 一 二三
2
Просто нет стандартного способа контролировать рендеринг эмодзи.
— nwellnhof
1
Все, что вам нужно сделать, это установить шрифт, который содержит глифы для этих символов и чьи глифы выглядят так, как вы хотите (без цветов, без форм или чего-то еще).
— ShreevatsaR

Ответы:

134

Добавление к вариационному селектору Unicode символа для выгонки текста, VS15, ︎.
Это заставляет предыдущий символ отображаться как текст, а не как символ эмодзи.

<p>🔒&#xFE0E;</p>

Результат: 🔒︎

Дополнительные сведения см. На странице : символ Unicode в виде текста или эмодзи.

— Хуанг
источник
1
Это очень полезно, поэтому на днях я проголосовал за него. Интересно, как я могу вставить смайлик и этот невидимый персонаж в рекламу Facebook, которую я пишу? PS Это тоже было интересно: apple.stackexchange.com/a/240450/53510
— Ryan
3
Я только что понял, что этот &#xFE0E;трюк у меня не работает с некоторыми шрифтами. Мне сложно найти шрифт, который, как я могу разумно ожидать, будет установлен на всех машинах (Windows, iOS, Mac, Android и т. Д.).
— Ryan
12
Это решение действительно неприемлемо для символов, которые могут даже встречаться в полях ввода. У меня проблема с символом ↔, используемым в логике, и я не могу понять, почему кто-то думает, что это должен быть смайлик!
— frabjous
2
Следующая страница полезна для копирования и вставки этого специального символа сразу после эмодзи, чтобы он выглядел плоским, а не стилизованным. Например, вы можете увидеть 💬︎ вместо 💬 и 🌟︎ вместо 🌟 и ⌛︎ вместо ⌛ и 🔒︎ вместо 🔒 (в зависимости от вашего устройства) unicode-symbol.com/u/FE0E.html
— Райан
15
В моем примере это отображается как смайлик chrome 71 на Mac 10.11.6.
— lahwran
13

У меня был символ Юникода в contentиз span::before, и я имел font-familyв spanнаборе для «Segoe UI Symbol». Но Chrome использовал «Segoe UI Emoji» в качестве шрифта для его визуализации.

Однако, когда я установил font-family"Segoe UI Symbol" явно для span::before, а не только для span, то это сработало.

— глия
источник
Это должен быть правильный ответ, тем более что старый метод невидимых символов не поддерживается большинством основных браузеров.
— Сара С. Коррихер,
2

Для решения только с использованием CSS для предотвращения отображения смайликов в iOS вы можете использовать по font-family: monospaceумолчанию текстовый вариант глифа, а не вариант смайликов.

— cmbuckley
источник
1

Шрифты Android не богаты, как можно было ожидать. В файлах шрифтов нет этих экзотических глифов, а в Android есть возможность использовать несколько символов без глифов. Их заменяют значки.

Итак, решение - интегрировать сайт с веб-шрифтом (woff). Создайте новый файл шрифта с помощью FontForge и выберите необходимый глиф, например, из бесплатного шрифта с засечками TTF. Каждый глиф занимает 1к. Создать файл woff.

Подготовьте простой CSS для импорта пользовательского семейства шрифтов.

style.css:

@font-face {
  font-family: 'Exotic Icons';
  src: url('exotic-icons.woff') format('woff');
}

.exotic-symbol-font {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Exotic Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

index.html файл:

<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet"></head>
    <title>Test custom glyphs</title>
  </head>
  <body>
    <table>
      <tr>
        <td class="exotic-symbol-font">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>
— Даниэль С. Яицков
источник
1

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

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}
<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>
Развернуть фрагмент

В отличие от селектора вариантов, не должно иметь значения, как отображаются смайлики, потому что фильтры CSS применяются ко всему. (Я использую их для выделения значков типа ссылки в формате PNG в оттенках серого на гиперссылках, которые были изменены, чтобы указывать на Wayback Machine.)

Только помните о нюансе . Вы не можете переопределить фильтр родительского элемента в дочернем элементе, поэтому этот метод нельзя использовать для оттенков серого абзаца, а затем перекрашивать ссылки в нем. 😢

... тем не менее, это полезно в ситуациях, когда вы либо собираетесь сделать все это гиперссылкой, либо запретить расширенную разметку внутри нее. (например, названия и описания)

Однако это не сработает, если на самом деле CSS не будет применен, поэтому я дам второй вариант, который более надежен в <title>элементах, чем селектор вариантов Unicode (я смотрю на вас, GitHub. Мне не нравятся поддельные значки в моем вкладки браузера):

Если вы помещаете в <title>элемент строку, предоставленную пользователем , отфильтруйте смайлы вместе с жирным шрифтом / курсивом / подчеркиванием и т. Д. разметки. (Да, для тех, кто его пропустил, стандарт действительно требует, чтобы содержимое <title>было простым текстом, за исключением экранирования амперсанда и браузеров, которые я тестировал, все теги интерпретируются как буквальный текст.)

Я могу думать о двух способах:

  1. Непосредственно используйте поддерживаемое вручную регулярное выражение, которое соответствует блокам, в которые новейшая версия Unicode помещает свои эмодзи и их модификаторы.
  2. Пройдитесь по кластерам графем и отбросьте все, которые содержат распознанные кодовые точки эмодзи. (Кластер графемы - это базовый глиф плюс все диакритические знаки и другие модификаторы, составляющие видимый символ. В примере, на который я ссылаюсь, используется механизм регулярных выражений Python для токенизации, а затем emojiпакет для базы данных, но Rust является хорошим примером языка где итерация кластеров графем выполняется быстро и легко с помощью такого ящика unicode-segmentation.)
— ssokolow
источник
0

Google Chrome, настольная версия 75, похоже, устраняет двусмысленность своего подхода к рендерингу символов Unicode на основе первого escape-кода Unicode, с которым он сталкивается при загрузке страницы. Например, при синтаксическом анализе в качестве первого escape-кода HTML Unicode в источнике страницы и не имеющем эквивалента смайликов & # 9207; похоже, проясняет Chrome, что страница содержит экраны, которые не должны отображаться как эмодзи.

— Клэй Аллен
источник
0

Расширяя ответ ssokolow , использование фильтра - это хорошо и, по крайней мере, делает контуры видимыми вместо использования простого шрифта, но преобразование цвета RGB в последовательность фильтров CSS очень сложно, если вы хотите использовать определенный цвет.

Лучше (хотя и довольно многословно) использовать <feColorMatrix>фильтр SVG. В сочетании с фильтром оттенков серого и схемой URI данных вы можете представлять цвет через RGB и встроенный CSS:

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

К сожалению, вы не можете интерполировать URL-адрес с данными (взятыми из атрибутов или переменных), но, по крайней мере, вам не нужно вычислять фильтры CSS из RGB.

— IllidanS4 хочет вернуть Монику
источник
-2

Я не знаю, как отключить рендеринг типа эмодзи. Обычно я использую иконочный шрифт, такой как font awesome или glyphicons (поставляется с Bootstrap 3).

Преимущество их использования по сравнению с символами Юникода заключается в том, что

  1. вы можете выбирать из множества разных стилей, чтобы они соответствовали дизайну вашего сайта;
  2. они согласованы во всех браузерах (если вы когда-нибудь пробовали использовать символ звезды в Юникоде, вы заметите, что в IE он отличается от другого браузера);
  3. кроме того, они полностью стилизованы, как и символы Юникода, которые вы пытаетесь использовать.

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

— Дэйв. кальпина
источник
-2

Для меня в OSX решением было установить семейство шрифтов на EmojiSymbols

— Натан
источник
-3

Ни одно из вышеперечисленных решений не работало с расширением «Emoji for Google Chrome».

Поэтому в качестве обходного пути я сделал снимок экрана с символом Unicode 'BALLOT BOX WITH CHECK' (U + 2611) и добавил его как изображение с помощью php:

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

введите описание изображения здесь

См. Https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

— rubo77
источник
Почти наверняка лучше вставить его в Inkscape с помощью текстового инструмента (со шрифтом, для которого выбрана подходящая лицензия), а затем запустить автоматическую трассировку, чтобы вы могли получить из него SVG, который масштабируется до любого размера, который вам нужен. (Чтобы сделать его как можно меньше, объедините минификатор SVG с некоторым ручным редактированием, чтобы уменьшить количество узлов в путях, где автодорожка не работает.)
— ssokolow
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.