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

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

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

javascript html css unicode emoji 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

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

Rozwiń fragment

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:

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

możesz wybierać spośród wielu różnych stylów, aby pasowały do projektu Twojej witryny;
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);
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

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

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

Odpowiedzi: