Jak zapobiec renderowaniu znaków Unicode jako emoji w HTML z JavaScript?

119

Znajduję Unicode dla znaków specjalnych z wyszukiwania FileFormat.Info .

Niektóre znaki są renderowane jako klasyczne czarno-białe glify, takie jak ⚠ (znak ostrzegawczy \u26A0lub ⚠). Są lepsze, ponieważ mogę zastosować do nich style CSS (takie jak kolor).

obraz znaku ostrzegawczego

Inne renderują się jako nowsze emotikony z kreskówek, takie jak ⌛ (klepsydra \u231Blub ⌛). Nie są preferowane, ponieważ nie mogę ich w pełni stylizować.

obraz emoji klepsydry

Wygląda na to, że przeglądarka wprowadza tę zmianę, ponieważ jestem w stanie zobaczyć glif klepsydry na Mac Firefox, ale nie w Mac Chrome ani Mac Safari.

Czy istnieje sposób, aby zmusić przeglądarki do wyświetlania starszych (płaskich monotonicznych) wersji?

Aktualizacja : Wygląda na to (z uwagi poniżej) istnieje selektor prezentacja tekstu , FE0Edostępny do egzekwowania tekst-VS-emotikonów. Selektor jest konkatenowany jako przyrostek bez spacji w kodzie znaku, na przykład ⌛︎dla kodu szesnastkowego HTML lub \u231B\uFE0Edla JS. Jednak po prostu nie jest honorowany przez wszystkie przeglądarki (np. Chrome i Edge).

Arithmomaniac
źródło
czy ustawiasz rodzinę czcionek w swoich regułach CSS?
G-Cyrillus
2
Możliwy duplikat niespójnych
glifów
1
@janaspage ︎i \uFE0Esą poprawne (2 i 8) i działają dobrze w Safari (8 i 9), ale zgodnie z odpowiedzią: obsługa przeglądarki jest nierówna, a Chrome (46) jest całkowicie zepsuty.
一 二三
2
Po prostu nie ma standardowego sposobu kontrolowania renderowania emotikonów.
nwellnhof
1
Wszystko, co musisz zrobić, to narzucić czcionkę, która zawiera glify dla tych znaków i której glify wyglądają tak, jak chcesz (bez kolorów, bez kształtów lub cokolwiek wolisz).
ShreevatsaR

Odpowiedzi:

133

Dołącza zmienności wyboru Unicode znaków dla zmuszając tekst, VS15, ︎.
To zmusza poprzedni znak do renderowania jako tekst, a nie jako symbol Emoji.

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

Wynik: 🔒︎

Więcej informacji pod adresem: symbol Unicode jako tekst lub emoji

Huang
źródło
1
Jest to bardzo pomocne, dlatego niedawno na to zagłosowałem. Zastanawiam się, jak mogę wkleić emoji i tę niewidzialną postać do reklamy na Facebooku, którą piszę? PS To też było interesujące: apple.stackexchange.com/a/240450/53510
Ryan
3
Właśnie zdałem sobie sprawę, że ta &#xFE0E;sztuczka nie działa w przypadku niektórych czcionek. Trudno mi znaleźć czcionkę, której mogę się spodziewać na wszystkich komputerach (Windows, iOS, Mac, Android itp.).
Ryan
12
To rozwiązanie jest naprawdę nie do przyjęcia w przypadku symboli, które mogą nawet występować w polach wejściowych. Mam problem z symbolem ↔ używanym w logice i do końca życia nie mogę zrozumieć, dlaczego ktokolwiek uważa, że ​​to kiedykolwiek powinno być emoji!
frabjous
2
Poniższa strona jest pomocna przy kopiowaniu i wklejaniu tego znaku specjalnego bezpośrednio po emoji, aby wyglądał on raczej płasko niż stylizowany. Np. Możesz zobaczyć 💬︎ zamiast 💬 i 🌟︎ zamiast 🌟 i ⌛︎ zamiast ⌛ i 🔒︎ zamiast 🔒 (w zależności od urządzenia) unicode-symbol.com/u/FE0E.html
Ryan
15
Renderuje się to jako emoji w moim przykładzie Chrome 71 na Macu 10.11.6.
lahwran
13

Miałem znak Unicode w contenttematyce span::before, a miałem font-familyz spanzestawem do Segoe UI „symbol”. Ale Chrome użył „Segoe UI Emoji” jako czcionki do renderowania.

Jednak kiedy ustawiłem font-family„Segoe UI Symbol” wyraźnie dla span::before, a nie tylko dla span, to zadziałało.

Glia
źródło
To powinna być prawidłowa odpowiedź, zwłaszcza że stara metoda niewidzialnych znaków nie jest honorowana przez większość głównych przeglądarek.
Sarah C. Corriher
2

W przypadku rozwiązania opartego tylko na CSS, które zapobiega wyświetlaniu emotikonów w systemie iOS, możesz użyć font-family: monospacedomyślnej wersji glifu zamiast wariantu emoji.

cmbuckley
źródło
1

Czcionki Androida nie są bogate, jak można się spodziewać. Pliki czcionek nie mają tych egzotycznych glifów, a Android ma hack dla kilku znaków bez glifu. Zostały zastąpione ikonami.

Rozwiązaniem jest więc zintegrowanie serwisu z czcionką internetową (woff). Utwórz nowy plik czcionki za pomocą FontForge i wybierz wymagany glif na przykład z wolnego szeryfowego TTF. Każdy glif zajmuje 1k. Wygeneruj plik woff.

Przygotuj prosty CSS, aby zaimportować niestandardową rodzinę czcionek.

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

Plik 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>
Daneel S. Yaitskov
źródło
1

Jeśli Twoim głównym zmartwieniem jest wymuszenie wyświetlania monochromatycznego, aby emoji nie wyróżniały się zbytnio z tekstu, filtry CSS, same lub w połączeniu z selektorem odmian Unicode, mogą być czymś, czego chcesz.

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>

W przeciwieństwie do selektora odmian, nie powinno mieć znaczenia, jak renderowane są emoji, ponieważ filtry CSS mają zastosowanie do wszystkiego. (Używam ich do skalowania ikon typu łącza w formacie PNG w skali szarości w hiperłączach, które zostały zmodyfikowane tak, aby wskazywały Wayback Machine).

Tylko pamiętaj o zastrzeżeniu . Nie możesz zastąpić filtru elementu nadrzędnego w podrzędnym, więc tej techniki nie można użyć do przeskalowania akapitu w skali szarości, a następnie ponownego pokolorowania linków w nim. 😢

... nadal jest to przydatne w sytuacjach, w których zamierzasz uczynić całość hiperłączem lub uniemożliwić w niej bogate znaczniki. (np. tytuły i opisy)

Jednak to nie zadziała, chyba że CSS faktycznie zostanie zastosowany, więc podam drugą opcję, która jest bardziej niezawodna w <title>elementach niż selektor odmian Unicode (patrzę na ciebie GitHub. Nie lubię fałszywych ikon w moim karty przeglądarki):

Jeśli umieszczasz ciąg dostarczony przez użytkownika w <title>elemencie, odfiltruj emoji wraz z pogrubieniem / kursywą / podkreśleniem / itp. narzut. (Tak, dla tych, którzy to przegapili, standard wymaga, aby zawartość <title>była czystym tekstem, poza znakami „ampersand”, a wszystkie przeglądarki, które testowałem, interpretują tagi jako tekst dosłowny).

Przychodzą mi na myśl dwa sposoby:

  1. Bezpośrednio użyj ręcznie obsługiwanego wyrażenia regularnego, które pasuje do bloków, w których najnowsza wersja Unicode umieszcza swoje emoji i ich modyfikatory.
  2. Przejdź przez klastry grafemów i odrzuć wszystkie, które zawierają rozpoznane punkty kodowe emoji. (Klaster grafemowy to glif podstawowy plus wszystkie znaki diakrytyczne i inne modyfikatory, które składają się na widoczny znak. Przykład, do którego odsyłam, wykorzystuje silnik regex Pythona do tokenizacji, a następnie emojipakiet dla bazy danych, ale Rust jest dobrym przykładem języka gdzie iterowanie klastrów grafemowych jest szybkie i łatwe dzięki skrzynce takiej jak unicode-segmentation).
ssokolow
źródło
0

Wydaje się, że Google Chrome, wersja 75 na komputery stacjonarne, ujednoznacznia swoje podejście do renderowania znaków Unicode w oparciu o pierwszy znak ucieczki Unicode napotkany podczas ładowania strony. Na przykład po przeanalizowaniu jako pierwsza zmiana znaczenia kodu HTML Unicode w źródle strony i bez odpowiednika emoji & # 9207; wydaje się wyjaśniać Chrome, że strona zawiera znaki ucieczki, których nie można renderować jako emoji.

Clay Allen
źródło
0

Rozwijając odpowiedź ssokolow , użycie filtra jest przyjemne i przynajmniej sprawia, że ​​kontury są widoczne zamiast używać prostej czcionki, ale konwersja koloru RGB na sekwencję filtrów CSS jest bardzo trudna, gdy chcesz użyć określonego koloru.

Lepszą (choć dość rozwlekłą) opcją jest użycie <feColorMatrix>filtra SVG. W połączeniu z filtrem skali szarości i schematem URI danych, możesz przedstawić kolor za pomocą RGB i wbudowanego 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");
}

Niestety nie możesz interpolować adresu URL danymi (pobranymi z atrybutów lub zmiennych), ale przynajmniej nie musisz obliczać filtrów CSS z RGB.

IllidanS4 chce powrotu Moniki
źródło
-2

Nie wiem, jak wyłączyć renderowanie typu emoji. Zwykle używam czcionki ikon, takiej jak awesome lub glificons (dostarczana z Bootstrap 3).

Zaletą używania ich w porównaniu ze znakami Unicode jest to

  1. możesz wybierać spośród wielu różnych stylów, aby pasowały do ​​projektu Twojej witryny;
  2. są spójne we wszystkich przeglądarkach (jeśli kiedykolwiek próbowałeś użyć znaku Unicode, zauważysz, że różni się to w IE od innych przeglądarek);
  3. są również w pełni stylizowane, podobnie jak znaki Unicode, których próbujesz użyć.

Jedynym minusem jest to, że przeglądarka może pobierać jeszcze jedną rzecz, gdy przegląda Twoją stronę.

dave.mcalpine
źródło
-2

Dla mnie na OSX rozwiązaniem było ustawienie rodziny czcionek na EmojiSymbols

Nathan
źródło
-3

Żadne z powyższych rozwiązań nie działało w przypadku rozszerzenia „Emoji dla Google Chrome”.

Aby obejść ten problem , zrobiłem zrzut ekranu znaku Unicode `` BALLOT BOX WITH CHECK '' (U + 2611) i dodałem go jako obraz z php:

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

wprowadź opis obrazu tutaj

Zobacz: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

rubo77
źródło
Niemal na pewno lepiej wkleić go do Inkscape za pomocą narzędzia tekstowego (z czcionką, która ma wybraną odpowiednią licencję), a następnie uruchomić automatyczne śledzenie, dzięki czemu można uzyskać z niego SVG, który skaluje się do dowolnego potrzebnego rozmiaru. (Aby był jak najmniejszy, sparuj minifier SVG z ręczną edycją, aby zmniejszyć liczbę węzłów w ścieżkach, w których automatyczne śledzenie zostało popełnione).
doszło do błędu