Bagaimana Mengembangkan Editor Teks Untuk Web

Saya bekerja untuk Readymag, yang membuat alat desain berbasis browser yang membantu orang membuat situs web, portofolio, dan semua jenis publikasi online, tanpa coding. Banyak widget tersedia di alat kami, dan widget teks adalah salah satu yang paling banyak digunakan.

Widget teks adalah bidang entri teks tempat pengguna dapat mengatur gaya teks menggunakan berbagai kontrol di editor. Setiap kontrol menerapkan properti CSS ke teks. Dari sisi pengguna, ini terlihat seperti bidang biasa untuk memasukkan teks, tetapi sejumlah besar proses kompleks tersembunyi di balik kesederhanaannya.

Dalam artikel ini, saya akan menjelaskan tantangan yang dihadapi perusahaan saya dan solusi yang kami gunakan untuk membuat widget teks di aplikasi kami. Saya juga akan mempelajari bagaimana kami menerapkannya dan apa yang kami pelajari selama ini — dan cara kerja mengetik di web secara umum.

Mengedit Teks Di Web

Ada beberapa cara untuk mengimplementasikan bidang input teks di web. Kita dapat menggunakan bidang teks sederhana, atau elemen contenteditable textarea membuat input dapat diedit, atau document.designMode = on . Bagaimana mereka berbeda?

Elemen input dan textarea ideal untuk menambahkan teks ke halaman, tetapi mereka tidak memberikan pengalaman pemformatan teks yang kaya. Untuk ini, kita dapat menggunakan atribut contenteditable untuk membuat hampir semua elemen dapat diedit dan memungkinkan penggunaan gaya teks.

Jika Anda perlu mengedit seluruh halaman sekaligus, Anda dapat menggunakan document.designMode . Mode ini memungkinkan elemen apa pun dalam dokumen tertentu untuk diedit, bahkan iframe .

Kami memilih atribut contenteditable , yang mencakup semua kemampuan pengeditan teks yang diperlukan. Dengan atribut ini, teks apa pun pada halaman menjadi dapat diedit, yang sangat penting jika kita ingin memungkinkan orang untuk menata teks dengan CSS . Misalnya, pengguna kemudian dapat menata gaya bagian yang dipilih atau seluruh teks secara langsung.

Gaya Teks Dan Properti Font

Kami memungkinkan pengguna untuk menata teks dengan cara apa pun yang mereka inginkan dengan menyediakan akses ke semua opsi yang disediakan CSS di luar kotak. Selain properti terkenal, seperti font, gaya, warna, dan dekorasi, kami memberi pengguna kesempatan untuk menggunakan fitur font OpenType, seperti ligatur, set gaya, pecahan, dan sebagainya. Fitur-fitur ini bekerja melalui properti CSS font-feature-settings , yang memungkinkan pengguna untuk menyesuaikan gaya teks.

Catatan : Saya sangat merekomendasikan membaca artikel luar biasa Sparanoid yang menampilkan semua fitur OpenType.

Tipografi modern telah mengambil langkah maju yang besar, memungkinkan penggunaan font variabel di web melalui properti font-variation-settings .

Setiap font variabel memiliki properti variabel yang nilainya dapat Anda ubah. Misalnya, dalam font standar, Anda dapat mengubah bobot font menggunakan nilai yang ditentukan secara ketat ( 400 , 500 , 600 , dan seterusnya), sedangkan dalam font variabel, Anda dapat menggunakan nilai apa pun dalam rentang yang tersedia, memberikan kemungkinan yang lebih luas untuk penataan teks.

 .style-1 { font-weight: 600; } .style-2 { font-variation-settings: "wght" 777; }

Di bawah ini Anda dapat melihat contoh bagaimana bekerja dengan font variabel terlihat di widget teks.

Selain nilai terdaftar ( wght , wdth , slnt , dll.), pembuat font juga dapat membuat fitur font unik mereka sendiri (seperti pada contoh di atas). Untuk memberikan kesempatan kepada pengguna kami untuk menggunakan semua fitur font yang mungkin, kami memerlukan informasi ini terlebih dahulu.

Semua fitur yang ingin Anda gunakan harus didefinisikan dalam file font. Mari kita lihat spesifikasinya. Setiap font dapat direpresentasikan dalam bentuk tabel, memberikan semua informasi berbeda yang digunakan saat merender karakternya.

Kami menggunakan dua tabel untuk mengumpulkan informasi tentang font ini:

1. Tabel Substitusi Glyph
   Tabel substitusi mesin terbang (GSUB) berisi daftar data rendering mesin terbang. Objek GSUB.featureList adalah enumerasi fitur font dan propertinya. Anda dapat melihat contoh data dalam tabel di GitHub. Di tabel ini, bidang tag paling menarik. Ini adalah nama fitur font, dan ini menunjukkan bahwa fitur ini tersedia dengan font ini. Kita dapat menggunakan tag dengan aman di properti font-feature-settings .
2. Tabel Variasi Font
   Tabel variasi font (fvar) adalah representasi dari properti variabel yang terkait dengan font. Contoh tabel juga tersedia di GitHub. Setiap objek adalah properti font, dengan deskripsi kemungkinan nilai ( min , max , default) dan nama lokal (jika ada). Kami menggunakan nilai-nilai ini dengan properti font-variation-settings .

Dengan bantuan dua tabel ini, kami dapat memenuhi semua persyaratan kami: menggunakan properti font variabel dan berbagai fitur font. Data yang dihasilkan ditampilkan dalam kontrol widget teks di editor, tempat pengguna dapat menata teks tanpa menggunakan kode apa pun.

Menggunakan Keyboard Anda

Input teks adalah salah satu aspek terpenting dari pengalaman pengguna widget teks. Selain mengaktifkan pintasan untuk bekerja dengan teks, kami harus menghadapi beberapa tantangan yang tidak biasa. Menavigasi teks dengan tombol panah jelas salah satunya.

Saat pengguna mengedit, widget teks juga menampilkan karakter tersembunyi, seperti spasi yang tidak terputus dan jeda baris. Mereka diimplementasikan sebagai ikon SVG yang disisipkan ke dalam teks, yang menimbulkan masalah: Jika kami menggunakan contenteditable , maka ikon ini mencegah pengguna memindahkan kursor mereka dengan tombol panah.

Solusinya cukup sederhana: Gunakan span dan pseudo-element :before . Dengan cara ini, browser menganggap ikon sebagai teks dan tombol panah berfungsi dengan baik.

 span:before { content: ""; height: 1em; position: relative; background-repeat: no-repeat; background-image: url("data:image/svg+xml,..."); background-position: center bottom; background-size: 1em; }

Jalan pintas

Ada dua pintasan keyboard untuk menempelkan teks di widget teks.

Cmd / Ctrl + V menempelkan teks dari clipboard dan menyimpan gaya apa pun yang ada di dokumen asli. Jika teks disalin dari aplikasi seperti Pages, Notes, Word atau Google Docs, maka clipboard Anda akan berisi informasi HTML, bukan hanya teks biasa. HTML ini dapat diurai dan ditempel sambil mempertahankan gaya aslinya.

Anda bisa mendapatkan data HTML sebagai berikut:

 // https://www.w3.org/TR/clipboard-apis/#reading-from-clipboard document.addEventListener('paste', (e) => { const text = e.clipboardData.getData('text/plain'); const html = e.clipboardData.getData('text/html'); handlePaste(); });

Selain itu, kami memiliki pintasan Cmd + Shift + V. Saat Anda menyisipkan teks menggunakan kombinasi keyboard ini, browser akan meninggalkan data biasa di payload, jadi penataan gaya dikontrol oleh tujuan tempel. Pintasan ini ada di browser secara default, tetapi Anda harus ingat untuk mengimplementasikannya di proyek Anda.

Pemilihan Teks Dan Fokus

Pemilihan teks membantu pengguna melihat bagian teks mana yang sedang diedit. Mari kita coba contoh sederhana: bidang input dengan tombol untuk mengontrol ketebalan teks.

Dalam contoh ini, kita dapat memilih sepotong teks dan menekan tombol Bold , dan pilihan dalam teks akan tetap ada setelahnya. Tetapi bagaimana jika contoh kita lebih rumit? Katakanlah kita menambahkan bidang input ke pemilih ukuran teks. Dalam hal ini, fokus akan beralih ke input baru.

Ada dua opsi untuk menyelesaikan masalah ini :

• Setelah setiap kejadian input, kami memaksa fokus untuk kembali ke blok teks. Dalam hal ini, pemilihan akan mulai berkedip setelah sejumlah kejadian input tertentu — kami tidak menginginkannya.
• Kita dapat menambahkan blok teks ke iframe . Seperti yang mungkin Anda ketahui, iframe memiliki objek window globalnya sendiri. Jadi, selama pemilihan berada di dalam iframe , pemilihan akan tetap ada meskipun fokus di luar dipindahkan.

Kami berakhir dengan widget teks iframe -wrapped. Jadi, selama pemilihan berada di dalam iframe , pemilihan akan tetap ada meskipun fokus di luar dipindahkan. Lihatlah tangkapan layar di bawah ini. Kami memiliki dua pilihan di halaman: fragmen yang dipilih di widget teks dan nilai yang dipilih dari ukuran teks di kontrol.

Performa Selama Input Teks

Responsivitas antarmuka pengeditan teks Anda adalah penting. Pantau nilai frame-per-second (FPS) dengan cermat, terutama jika menyangkut tugas seperti mengedit teks dengan kecepatan tinggi atau mengubah ukuran font.

Readymag memiliki dua area pandang: desktop dan seluler . Gaya teks dapat muncul berbeda di masing-masing. Saat teks sedang dimasukkan, editor akan melakukan berbagai perhitungan untuk menyinkronkan data antar viewports. Responsivitas tinggi dicapai dengan menggunakan API browser: requestAnimationFrame dan requestIdleCallback :

• requestAnimationFrame dipanggil setiap kali layar di-refresh;
• requestIdleCallback dipanggil hanya saat browser dalam keadaan idle.

Ini adalah cara yang bagus untuk melakukan operasi yang membosankan tanpa memblokir utas utama.

Aksesibilitas

Mengaktifkan aksesibilitas adalah salah satu praktik terpenting dalam pengembangan web saat ini. Jika situs web Anda dirancang dengan mempertimbangkan aksesibilitas, itu akan memberi lebih banyak orang akses ke produk Anda . Ini berarti mengakomodasi tidak hanya penyandang disabilitas tetapi juga pengguna di berbagai platform: desktop dan perangkat sentuh, pembaca layar, alat bantu dengar, dan sebagainya. Untuk memahami betapa pentingnya membuat proyek dapat diakses, saya sarankan untuk memeriksa statistik aksesibilitas terbaru.

Untuk mulai menggabungkan praktik aksesibilitas web, periksa terlebih dahulu Pedoman Aksesibilitas Konten Web (WCAG), sumber daya paling komprehensif tentang topik tersebut. Dan selama Readymag adalah alat untuk publikasi, selain WCAG, kita juga perlu mengikuti Authoring Tool Accessibility Guidelines (ATAG).

Tim kami saat ini sedang dalam tahap mengintegrasikan aksesibilitas ke dalam editor. Dalam artikel berikutnya, kami akan berbagi lebih banyak tentang perjalanan kami menuju aksesibilitas yang terintegrasi penuh di Readymag. Anda juga dapat memeriksa pekerjaan apa pun yang dibuat dengan Readymag menggunakan daftar periksa aksesibilitas kami.

Praktik terbaik

Terakhir, berikut adalah beberapa tip untuk membantu Anda mengembangkan editor teks di web:

• Pikirkan baik-baik tentang tata letak.
  Identifikasi terlebih dahulu kemampuan apa yang Anda butuhkan dan bagaimana Anda akan bekerja dengan elemen dalam editor teks.
• Siapkan pengujian visual.
  Saat Anda bekerja dengan teks, Anda tidak dapat sepenuhnya mengandalkan hasil tes snapshot. Anda mungkin mendapatkan hasil yang benar dalam pengujian, mengharapkan CSS yang diberikan untuk blok tersebut, tetapi terkadang hasilnya mungkin tidak seperti yang Anda harapkan.
• Uji pekerjaan Anda di browser yang berbeda.
  Meskipun sebagian besar browser mendukung fitur online baru dengan cukup baik, sering kali ada masalah dengan menampilkan gaya yang sama di browser yang berbeda.
• Gunakan tanda fitur untuk pengembangan fitur baru yang lebih aman.
• Ukur FPS di browser saat memasukkan teks.
  Jangan melakukan tugas-tugas CPU-intensif dalam satu thread.
• Jangan takut untuk bereksperimen .
• Terakhir, coba Widget Teks di Readymag.

Beberapa Tautan Berguna

• “Demo CSS Lengkap Untuk Fitur OpenType,” Spanoid
• “Pengantar Font Variabel Di Web,” web.dev
• “Tipografi yang Luar Biasa,” Joel Galeran
• “Fon Variabel,” Nick Sherman
• Fontkit
• OpenType.js