Bagaimana cara mencegah karakter Unicode dirender sebagai emoji di HTML dari JavaScript?

119

Saya menemukan Unicode untuk karakter khusus dari pencarian FileFormat.Info .

Beberapa karakter ditampilkan sebagai mesin terbang hitam-putih klasik, seperti ⚠ (tanda peringatan, \u26A0atau ⚠). Ini lebih disukai, karena saya bisa menerapkan gaya CSS (seperti warna) padanya.

gambar mesin terbang peringatan

Yang lain dirender sebagai emoji kartun yang lebih baru, seperti ⌛ (jam pasir, \u231Batau ⌛). Ini tidak disukai, karena saya tidak bisa sepenuhnya menatanya.

gambar emoji jam pasir

Tampaknya browser melakukan perubahan ini, karena saya dapat melihat simbol jam pasir di Mac Firefox, bukan Mac Chrome atau Mac Safari.

Apakah ada cara untuk memaksa browser menampilkan versi lama (monoton datar) untuk ditampilkan?

Update : Tampaknya (dari komentar di bawah ini) ada pemilih presentasi teks , FE0E, tersedia untuk menegakkan teks-vs-emoji. Selektor ini digabungkan sebagai sufiks tanpa spasi pada kode karakter, seperti ⌛︎untuk hex HTML atau \u231B\uFE0Euntuk JS. Namun, ini tidak diterapkan oleh semua browser (misalnya Chrome dan Edge).

javascript html css unicode emoji Aritmomaniak
sumber
apakah Anda menetapkan font-family dalam aturan CSS Anda?
G-Cyrillus
2
Kemungkinan duplikat dari Unicode Emoji Glyphs / Symbols yang tidak konsisten
一 二三
1
@janaspage ︎dan \uFE0Ebenar (2 dan 8) dan berfungsi dengan baik di Safari (8 dan 9), tetapi seperti jawabannya: dukungan browser tidak stabil, dan Chrome (46) benar-benar rusak.
一 二三
2
Tidak ada cara standar untuk mengontrol rendering Emoji.
nwellnhof
1
Yang harus Anda lakukan adalah menerapkan font yang berisi mesin terbang untuk karakter ini, dan yang mesin terbangnya terlihat seperti yang Anda inginkan (tanpa warna, tidak ada bentuk, atau apa pun yang Anda suka).
ShreevatsaR

Jawaban:

133

Tambahkan karakter pemilih variasi Unicode untuk memaksa teks, VS15 ︎,.
Ini memaksa karakter sebelumnya untuk dirender sebagai teks daripada sebagai Simbol Emoji.

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

Hasil: 🔒︎

Pelajari lebih lanjut di: Simbol unicode sebagai teks atau emoji

Huang
sumber
1
Ini sangat membantu, itulah mengapa saya memberi suara positif beberapa hari yang lalu. Saya ingin tahu bagaimana cara menempelkan emoji dan karakter tak terlihat ini ke dalam iklan Facebook yang saya tulis? PS Ini juga menarik: apple.stackexchange.com/a/240450/53510
Ryan
3
Saya baru menyadari bahwa &#xFE0E;trik ini tidak berfungsi untuk saya untuk font tertentu. Saya mengalami kesulitan menemukan font yang secara wajar dapat saya perkirakan untuk diinstal pada semua mesin (Windows, iOS, Mac, Android, dll).
Ryan
12
Solusi ini benar-benar tidak dapat diterima untuk simbol yang bahkan mungkin muncul di bidang masukan. Saya mengalami masalah ini dengan simbol ↔ yang digunakan dalam logika, dan seumur hidup saya tidak bisa mengerti mengapa orang berpikir ini harus menjadi emoji!
frabjous
2
Halaman berikut berguna untuk menyalin-dan-menempel karakter khusus itu segera setelah emoji untuk membuatnya tampak datar dan bukan bergaya. Misalnya, Anda mungkin melihat 💬︎ alih-alih 💬 dan 🌟︎ alih-alih 🌟 dan ⌛︎ alih-alih ⌛ dan 🔒︎ alih-alih 🔒 (tergantung pada perangkat Anda) unicode-symbol.com/u/FE0E.html
Ryan
15
Ini menjadikannya sebagai emoji di contoh untuk saya, chrome 71 di mac 10.11.6.
lahwran
13

Saya memiliki karakter Unicode di contentdari a span::before, dan saya memiliki font-familykarakterspan set untuk "Segoe UI Symbol". Tapi Chrome menggunakan "Segoe UI Emoji" sebagai font untuk merendernya.

Namun, ketika saya menyetel font-familyke "Segoe UI Symbol" secara eksplisit untuk span::before, bukan hanya untuk span, maka itu berhasil.

Glia
sumber
Ini harus menjadi jawaban yang benar, terutama karena metode karakter tak terlihat yang lama tidak diterapkan oleh sebagian besar browser utama.
Sarah C. Corriher
2

Untuk solusi khusus CSS untuk mencegah iOS menampilkan emoji, Anda dapat menggunakan font-family: monospacedefault untuk varian teks mesin terbang daripada varian emoji.

cmbuckley.dll
sumber
1

Font Android tidak kaya seperti yang Anda harapkan. File font tidak memiliki mesin terbang eksotis ini dan Android memiliki retasan untuk beberapa karakter tanpa mesin terbang. Mereka diganti dengan ikon.

Jadi solusinya adalah mengintegrasikan situs dengan font web (woff). Buat file font baru dengan FontForge dan pilih mesin terbang yang diperlukan dari serif TTF gratis misalnya. Setiap mesin terbang membutuhkan 1k. Hasilkan file woff.

Siapkan CSS sederhana untuk mengimpor keluarga font khusus.

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

file 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
sumber
1

Jika perhatian utama Anda adalah memaksa tampilan monokromatik sehingga emoji tidak terlalu menonjol dari teks, filter CSS, baik sendiri atau dikombinasikan dengan pemilih variasi Unicode, mungkin adalah sesuatu yang Anda inginkan.

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

Berbeda dengan pemilih variasi, tidak masalah bagaimana emoji ditampilkan, karena filter CSS berlaku untuk semuanya. (Saya menggunakannya untuk ikon "jenis tautan" format PNG skala abu-abu pada hyperlink yang telah dimodifikasi untuk mengarah ke Mesin Wayback.)

Pikirkan saja peringatannya . Anda tidak dapat mengganti filter elemen induk pada anak, jadi teknik ini tidak dapat digunakan untuk membuat paragraf menjadi abu-abu, lalu mewarnai ulang tautan di dalamnya. 😢

... tetap saja, ini berguna untuk situasi di mana Anda akan menjadikan semuanya sebagai hyperlink atau melarang markup kaya di dalamnya. (mis. judul dan deskripsi)

Namun, ini tidak akan berfungsi kecuali CSS benar-benar diterapkan, jadi saya akan memberikan opsi kedua yang lebih dapat diandalkan dalam <title>elemen daripada pemilih variasi Unicode (Saya melihat Anda GitHub. Saya tidak suka ikon palsu di tab browser):

Jika Anda memasukkan string yang disediakan pengguna ke dalam <title>elemen, filter emoji tersebut dengan huruf tebal / miring / garis bawah / dll. markup. (Ya, bagi mereka yang melewatkannya, standar memang meminta konten <title>menjadi teks biasa selain dari ampersand escapes dan browser yang saya uji semua menafsirkan tag di dalamnya sebagai teks literal.)

Dua cara yang bisa saya pikirkan adalah:

  1. Langsung gunakan regex yang dikelola secara manual yang cocok dengan blok tempat Unicode versi terbaru meletakkan emoji dan pengubahnya.
  2. Iterasi melalui kelompok grafik dan buang yang berisi titik kode emoji yang dikenali. (Gugus grafem adalah mesin terbang dasar ditambah semua diakritik dan pengubah lain yang membentuk karakter yang terlihat. Contoh yang saya tautkan ke menggunakan mesin regex Python untuk membuat token dan kemudian emojipaket untuk database, tetapi Rust adalah contoh yang baik dari bahasa di mana pengulangan kelompok grafem cepat dan mudah melalui peti seperti unicode-segmentation.)
ssokolow.dll
sumber
0

Google Chrome, versi desktop 75, tampaknya menghilangkan ambiguitas pendekatannya untuk merender karakter Unicode berdasarkan pelolosan Unicode pertama yang ditemuinya saat memuat laman. Misalnya, ketika diurai sebagai pelolosan Unicode HTML pertama di sumber laman, dan tidak memiliki emoji yang setara, & # 9207; tampaknya memperjelas Chrome bahwa laman tersebut berisi pelarian untuk tidak dirender sebagai emoji.

Clay Allen
sumber
0

Memperluas jawaban ssokolow , menggunakan filter itu bagus dan setidaknya membuat kontur terlihat daripada menggunakan font sederhana, tetapi mengubah warna RGB menjadi urutan filter CSS sangat sulit ketika Anda ingin menggunakan warna tertentu.

Pilihan yang lebih baik (meskipun cukup bertele-tele) adalah menggunakan <feColorMatrix>filter SVG. Dikombinasikan dengan filter grayscale dan skema URI data, Anda dapat merepresentasikan warna melalui RGB dan CSS sebaris:

.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");
}

Sayangnya, Anda tidak dapat menginterpolasi URL dengan data (diambil dari atribut atau variabel), tetapi setidaknya Anda tidak harus menghitung filter CSS dari RGB.

IllidanS4 ingin Monica kembali
sumber
-2

Saya tidak tahu cara mematikan rendering jenis emoji. Biasanya saya menggunakan icon font seperti font awesome atau glyphicons (dilengkapi dengan Bootstrap 3).

Manfaat menggunakan ini selama karakter unicode adalah itu

  1. Anda dapat memilih dari berbagai gaya sehingga sesuai dengan desain situs Anda;
  2. mereka konsisten di seluruh browser (jika Anda pernah mencoba melakukan karakter bintang unicode, Anda akan melihat itu berbeda di IE vs browser lain);
  3. juga, mereka sepenuhnya dapat diubah, seperti karakter unicode yang Anda coba gunakan.

Satu-satunya downside adalah bahwa itu satu hal lagi bagi browser untuk mendownload ketika mereka melihat halaman Anda.

dave.mcalpine
sumber
-2

Bagi saya di OSX, solusinya adalah mengatur font-family ke EmojiSymbols

Nathan
sumber
-3

Tak satu pun dari solusi di atas berfungsi untuk Ekstensi "Emoji untuk Google Chrome".

Jadi sebagai solusinya saya membuat tangkapan layar dari Karakter Unicode 'BALLOT BOX WITH CHECK' (U + 2611) dan menambahkannya sebagai gambar dengan php:

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

masukkan deskripsi gambar di sini

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

rubo77
sumber
Hampir pasti lebih baik menempelkannya ke Inkscape menggunakan alat teks (dengan font yang memiliki lisensi yang sesuai dipilih) dan kemudian menjalankan pelacakan otomatis, sehingga Anda bisa mendapatkan SVG darinya yang akan menskalakan ke ukuran apa pun yang Anda butuhkan. (Untuk membuatnya sekecil mungkin, pasangkan minifier SVG dengan beberapa pengeditan manual untuk mengurangi jumlah node di jalur di mana pelacakan otomatis salah.)
ssokolow