HTML untuk simbol Jeda dalam kontrol audio dan video

97

Saya mencoba mencari simbol Unicode untuk membuat tombol menampilkan simbol jeda Unicode. Saya dapat menemukan bahwa simbol putar Unicode adalah &#9658tetapi saya sedang mencari padanan simbol jeda Unicode.

html unicode special-characters symbols pengguna3081307
sumber
1
Punya pertanyaan yang sama, tetapi untuk tombol "Stop" (persegi). Jawaban Roko adalah yang terbaik untuk ini.
starmandeluxe

Jawaban:

106

Ada berbagai simbol yang dapat dianggap sebagai pengganti yang memadai, termasuk:

  1. | | - dua batang vertikal standar (dicetak tebal).

  2. ▋▋ - ▋dan lainnya▋

  3. ▌▌ - ▌dan lainnya▌

  4. ▍▍ - ▍dan lainnya▍

  5. ▎▎ - ▎dan lainnya▎

  6. ❚❚ - ❚dan lainnya❚

Saya mungkin melewatkan satu atau dua, tetapi saya pikir ini adalah yang lebih baik. Berikut daftar simbol untuk berjaga-jaga.

dsgriffin.dll
sumber
Saya menggunakan ini: 𝍪.
JoshuaD
& # 9646; adalah simbol jeda sebenarnya dalam HTML.
Fla
@JoshuaD jika Anda ingin mendukung banyak browser, Anda mungkin sebaiknya tidak menggunakan browser itu. Saya menggunakan Firefox terbaru dan tidak dapat dibaca.
Seorang Anak Allah
3
Saya dulu =dengan transform:rotate(90deg);.
Joe DF
1
@AChildofGod - ini bukan (hanya) tentang browser, ini tergantung pada font yang diinstal pada mesin Anda.
kubi
176

Standar Unicode untuk Simbol Kontrol Media

Jeda: ⏸︎

The Unicode Standard 13,0 (update 2020) memberikan Miscellaneous Teknis mesin terbang di kisaran HEX 2300-23FF

Lain-lain Teknis

Mengingat dokumentasi Unicode 13.0 yang ekstensif , beberapa mesin terbang yang dapat kita kaitkan ke simbol kontrol Media umum adalah sebagai berikut:

Simbol keyboard dan UI

23CF ⏏︎ Keluarkan media

Simbol antarmuka pengguna

23E9 ⏩︎ maju cepat
23EA ⏪︎ mundur, mundur cepat
23EB ⏫︎ peningkatan cepat
23EC ⏬︎ penurunan cepat
23ED ⏭︎ lompat ke akhir,
23EE berikutnya ⏮︎ lompat ke awal, sebelumnya
23EF ⏯︎ putar / jeda beralih
23F1 ⏱︎ stopwatch
23F2 ⏲︎ jam
pengatur waktu 23F3 ⏳︎ jam pasir
23F4 ⏴ ︎ mundur, mundur
23F5 ⏵︎ maju, berikutnya, putar
23F6 ⏶︎ tingkatkan
23F7 ⏷︎ kurangi
23F8 ⏸︎ jeda
23F9 ⏹︎ hentikan
23FA ⏺︎ rekor

Simbol daya dari ISO 7000: 2012

23FB ⏻︎ siaga / daya
23FC ⏼︎ daya hidup / mati
23FD ⏽︎ daya hidup
2B58 ⭘︎ matikan

Simbol daya dari IEEE 1621-2004

23FE ⏾︎ power sleep

Gunakan di Web:

File harus disimpan menggunakan pengkodean UTF-8 tanpa BOM (yang di sebagian besar lingkungan pengembangan disetel secara default) untuk menginstruksikan pengurai cara mengubah byte menjadi karakter dengan benar. <meta charset="utf-8"/>harus digunakan segera setelah <head>dalam file HTML , dan pastikan header HTTP yang benar Content-Type: text/html; charset=utf-8telah disetel.

Contoh:

HTML 
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
CSS 
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
JavaScript 
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

Varian standar

Untuk mencegah mesin terbang dari menjadi "warna-emojified" ⏩︎ / ⏩ append kode U + FE0E Teks Presentasi Selector untuk meminta Standar varian : (contoh: &#x23e9;&#xfe0e;)

Inkonsistensi

Karakter dalam kisaran Unicode rentan terhadap lingkungan keluarga font yang digunakan, aplikasi, browser, OS, platform.
Jika tidak diketahui atau hilang - kami mungkin melihat simbol seperti atau ▯, atau bahkan perilaku yang tidak konsisten karena perbedaan dalam penerapan parser HTML oleh vendor yang berbeda.
Misalnya, pada browser Windows Chromium, sufiks Varian Standar U + FE0E bermasalah, dan simbol semacam itu masih lebih baik disertai dengan CSS yaitu: font-family: "Segoe UI Symbol"untuk memaksa Font tertentu di atas Emoji Berwarna (biasanya dikenal sebagai "Segoe UI Emoji") - yang menentang tujuan dari U + FE0E di tempat pertama - waktu akan memberi tahu ...

Font ikon yang skalabel

Untuk menghindari masalah yang terkait dengan karakter yang tidak didukung - solusi yang layak adalah dengan menggunakan set font ikon yang dapat diskalakan seperti misalnya:

Font Luar Biasa

Ikon pemain - skalabel - font mengagumkan

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-arrows-alt"></i>
<i class="fa fa-backward"></i>
<i class="fa fa-compress"></i>
<i class="fa fa-eject"></i>
<i class="fa fa-expand"></i>
<i class="fa fa-fast-backward"></i>
<i class="fa fa-fast-forward"></i>
<i class="fa fa-forward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-stop"></i>
<i class="fa fa-youtube-play"></i>
Luaskan cuplikan

Ikon Google

masukkan deskripsi gambar di sini

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">pause</i>
<i class="material-icons">pause_circle_filled</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">fast_forward</i>
<i class="material-icons">fast_rewind</i>
<i class="material-icons">fiber_manual_record</i>
<i class="material-icons">play_arrow</i>
<i class="material-icons">play_circle_filled</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">skip_next</i>
<i class="material-icons">skip_previous</i>
<i class="material-icons">replay</i>
<i class="material-icons">repeat</i>
<i class="material-icons">stop</i>
<i class="material-icons">loop</i>
<i class="material-icons">mic</i>
<i class="material-icons">volume_up</i>
<i class="material-icons">volume_down</i>
<i class="material-icons">volume_mute</i>
<i class="material-icons">volume_off</i>
Luaskan cuplikan

dan banyak lagi yang dapat Anda temukan di alam liar; dan yang tak kalah pentingnya, alat online yang sangat berguna ini: generator font-icons, Icomoon.io .

Roko C. Buljan
sumber
2
Terima kasih sobat, jawaban yang sangat membantu.
Daniel Barde
1
Sayangnya tidak ada tombol "stop yang dilingkari" di font / ikon Google, jadi set "putar yang dilingkari" dan "jeda yang dilingkari" tidak lengkap ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan
Jawaban Luar Biasa - Saya suka usaha yang telah dilakukan untuk itu. Apakah Anda memperhatikan "Simbol ISO 7000 / IEC 60417 untuk Jeda; Interupsi # 5111B. Lihat Media_Controls" resmi, yang ditunjukkan oleh @intotecho dalam jawaban yang diremehkan ini? → stackoverflow.com/a/48918561/4575793
Cadoiz
58

Berikut ini mungkin berguna:

  • ⏩ &#x23e9;
  • ⏪ &#x23ea;
  • ⏫ &#x24eb;
  • ⏬ &#x23ec;
  • ⏭ &#x23ed;
  • ⏮ &#x23ee;
  • ⏯ &#x23ef;
  • ⏴ &#x23f4;
  • ⏵ &#x23f5;
  • ⏶ &#x23f6;
  • ⏷ &#x23f7;
  • ⏸ &#x23f8;
  • ⏹ &#x23f9;
  • ⏺ &#x23fa;

CATATAN : tampaknya, karakter ini tidak didukung dengan baik dalam font populer, jadi jika Anda berencana menggunakannya di web, pastikan untuk memilih font web yang mendukung ini.

rr-
sumber
22

Saya menemukannya, itu ada di blok Miscellaneous Technical. ⏸ (U + 23F8)

birtannic124
sumber
3
Tidak yakin bagaimana jawaban yang benar diturunkan suara. Lihat tautan di bawah ini di mana "bilah vertikal ganda" ini juga dicatat sebagai "jeda" di komentarnya. Sayang sekali sepertinya tidak didukung dengan baik di font (ditambahkan ke Unicode pada Juni 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm
12

Saya menggunakan ▐ ▌

HTML: &#9616;&nbsp;&#9612;

CSS: \2590\A0\258C

Nathan Goings
sumber
5

Jika Anda ingin salah satu karakter tunggal cocok dengan segitiga sisi kanan untuk "bermain", coba angka romawi 2. Ⅱ ada &#8545;dalam HTML. Jika Anda dapat meletakkan tag pemformatan di sekitarnya, itu terlihat sangat bagus dalam huruf tebal. Ⅱ adalah <b>&#8545;</b>di HTML. Ini memiliki dukungan yang jauh lebih baik daripada bilah vertikal ganda yang disebutkan sebelumnya.

StarCrashr
sumber
Saya senang Anda menyebutkan membuatnya berani. Saya menggunakan & # 2405; dan terlihat lebih baik jika dicetak tebal.
efreed
5

Browser modern juga mendukung 'DOUBLE VERTICAL BAR' (U + 23F8):

http://www.fileformat.info/info/unicode/char/23f8/index.htm

Untuk pemutar musik, ini dapat bertindak sebagai pendamping untuk 'BLACK RIGHT-POINTING POINTER' (U + 25BA) karena keduanya memiliki lebar dan tinggi yang sama sehingga cocok untuk tombol putar / jeda:

http://www.fileformat.info/info/unicode/char/25ba/index.htm

midzer
sumber
1
Pada mac batang vertikal ganda yang dikelilingi oleh kotak skeuomorphic tampak berbeda dengan hitam menunjuk ke kanan.
Akankah
2

Tidak ada karakter yang dikodekan untuk digunakan sebagai simbol jeda, meskipun berbagai karakter atau kombinasi karakter mungkin terlihat kurang lebih seperti simbol jeda, tergantung fontnya.

Dalam diskusi di milis Unicode publik tahun 2005, disarankan untuk menggunakan dua salinan karakter U + 275A HEAVY VERTICAL BAR: ❚❚. Tetapi kecukupan hasil tergantung pada font; misalnya, mesin terbang mungkin telah dirancang sedemikian rupa sehingga batang-batangnya terlalu jauh. - Diskusi daftar menjelaskan mengapa simbol jeda belum dikodekan, dan ini tidak berubah.

Jadi, opsi terbaik adalah menggunakan gambar. Jika Anda perlu menggunakan simbol dalam teks, yang terbaik adalah membuatnya dalam ukuran besar yang sesuai (katakanlah 60 kali 60 piksel) dan turunkan ke ukuran teks dengan CSS (misalnya, pengaturan height: 0.8empada imgelemen).

Jukka K. Korpela
sumber
Anda juga dapat menambahkan beberapa CSS seperti "letter-spacing: -6px" ke Double Heavy Vertical Bar, sehingga lebih terlihat seperti simbol jeda yang sebenarnya. Contoh: jsfiddle.net/enKaA
JaGo
Ini lebih baik daripada # 9616 karena tingginya sama.
Aram Kocharyan
2
Jawaban ini sudah usang. Unicode 7.0 (dirilis 2014) telah menambahkan U + 23F8 dan mencocokkan simbol (putar, hentikan, rekam) secara tepat untuk tujuan ini unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz
2

Simbol ISO 7000 / IEC 60417 untuk Jeda; Interupsi # 5111B. Lihat Media_Controls

intotecho
sumber