Web İçin Bir Metin Düzenleyici Nasıl Geliştirilir

İnsanların kodlama yapmadan web siteleri, portföyler ve her türlü çevrimiçi yayın oluşturmasına yardımcı olan tarayıcı tabanlı bir tasarım aracı yapan Readymag için çalışıyorum. Aracımızda birçok widget mevcuttur ve metin widget'ı en yaygın kullanılanlardan biridir.

Metin pencere aracı, kullanıcının düzenleyicideki bir dizi kontrol kullanarak metni biçimlendirebileceği bir metin giriş alanıdır. Her kontrol metne bir CSS özelliği uygular. Kullanıcı tarafından, metin girmek için sıradan bir alan gibi görünüyor, ancak görünen basitliğinin arkasında çok sayıda karmaşık süreç gizli.

Bu yazıda, şirketimin karşılaştığı zorlukları ve uygulamamızda bir metin widget'ı oluşturmak için kullandığımız çözümleri açıklayacağım. Ayrıca onu nasıl uyguladığımıza ve bu süreçte neler öğrendiğimize ve genel olarak web'de yazmanın nasıl çalıştığına da değineceğim.

Web'de Metin Düzenleme

Web'de metin giriş alanlarını uygulamanın birkaç yolu vardır. Bir girdiyi düzenlenebilir yapmak için basit bir metin alanı veya çok satırlı bir textarea öğesi veya contenteditable niteliği veya document.designMode = on . Nasıl farklılar?

input ve textarea alanı öğeleri, bir sayfaya metin eklemek için idealdir, ancak zengin bir metin biçimlendirme deneyimi sağlamazlar. Bunun için, hemen hemen her öğeyi düzenlenebilir hale getirmek ve metin stillerinin kullanımını etkinleştirmek için contenteditable niteliğini kullanabiliriz.

Tüm sayfayı bir kerede düzenlemeniz gerekiyorsa, document.designMode öğesini kullanabilirsiniz. Bu mod, belirli bir belgedeki herhangi bir öğenin, hatta bir iframe bile düzenlenmesine izin verir.

Gerekli tüm metin düzenleme yeteneklerini içeren içerik düzenlenebilir özniteliğini contenteditable . Bu öznitelikle, sayfadaki herhangi bir metin düzenlenebilir hale gelir; bu, insanların metne CSS ile stil vermesini sağlamak istiyorsak çok önemlidir. Örneğin, kullanıcılar daha sonra seçilen bölümlere veya metnin tamamına doğrudan stil verebilir.

Metin Stilleri ve Yazı Tipi Özellikleri

CSS'nin kutudan çıktığı tüm seçeneklere erişim sağlayarak, kullanıcıların metne istedikleri şekilde stil vermelerini sağlıyoruz. Yazı tipi, stil, renk ve dekorasyon gibi iyi bilinen özelliklere ek olarak, kullanıcılara bitişik harfler, biçimsel kümeler, kesirler vb. gibi OpenType yazı tipi özelliklerini kullanma fırsatı veriyoruz. Bu özellikler, kullanıcıların metin stillerini özelleştirmesine olanak tanıyan font-feature-settings CSS özelliği aracılığıyla çalışır.

Not : Sparanoid'in OpenType'ın tüm özelliklerini gösteren mükemmel makalesini okumanızı şiddetle tavsiye ederim.

Modern tipografi, font-variation-settings özelliği aracılığıyla web'de değişken fontların kullanımına izin vererek ileriye doğru büyük bir adım attı.

Her değişken yazı tipi, değerlerini değiştirebileceğiniz değişken özelliklere sahiptir. Örneğin, standart bir yazı tipinde, kesin olarak belirtilen değerleri ( 400 , 500 , 600 , vb.) metin stili için.

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

Aşağıda, bir metin widget'ında değişken bir yazı tipiyle çalışmanın nasıl göründüğüne dair bir örnek görebilirsiniz.

Kayıtlı değerlere ( wght , wdth , slnt , vb.) ek olarak, yazı tipi üreticileri kendi benzersiz yazı tipi özelliklerini de oluşturabilirler (yukarıdaki örnekte olduğu gibi). Kullanıcılarımıza olası tüm yazı tipi özelliklerini kullanma fırsatı vermek için öncelikle bu bilgilere ihtiyacımız var.

Kullanmak istediğiniz tüm özellikler font dosyasında tanımlanmalıdır. Spesifikasyonlarına bakalım. Her yazı tipi, karakterleri oluşturulurken kullanılan tüm farklı bilgileri sağlayan tablolar şeklinde temsil edilebilir.

Yazı tipleriyle ilgili bu bilgileri toplamak için iki tablo kullanıyoruz:

1. Glif Değiştirme Tablosu
   Glif değiştirme tablosu (GSUB), glif oluşturma verilerinin bir listesini içerir. GSUB.featureList nesnesi, yazı tipi özelliklerinin ve özelliklerinin bir listesidir. GitHub'daki tabloda bir veri örneğini görüntüleyebilirsiniz. Bu tabloda, tag alanı en ilginç olanıdır. Bu, yazı tipi özelliğinin adıdır ve bu özelliğin bu yazı tipiyle kullanılabildiğini gösterir. font-feature-settings özelliğinde tag güvenle kullanabiliriz.
2. Yazı Tipi Varyasyonları Tablosu
   Yazı tipi varyasyonları tablosu (fvar), bir yazı tipiyle ilişkili değişken özelliklerinin bir temsilidir. Tablonun bir örneği GitHub'da da mevcuttur. Her nesne, olası değerlerin ( min , max , varsayılan) ve yerelleştirilmiş bir adın (varsa) tanımını içeren bir yazı tipi özelliğidir. Bu değerleri font-variation-settings özelliği ile kullanıyoruz.

Bu iki tablonun yardımıyla tüm gereksinimlerimizi karşılayabiliriz: değişken yazı tipi özelliklerini ve çeşitli yazı tipi özelliklerini kullanma. Ortaya çıkan veriler, kullanıcıların herhangi bir kod kullanmadan metni biçimlendirebilecekleri düzenleyicideki metin widget'ı denetimlerinde görüntülenir.

Klavyenizi Kullanma

Metin girişi, metin widget'ı kullanıcı deneyiminin en önemli yönlerinden biridir. Metinle çalışmak için kısayolları etkinleştirmenin yanı sıra bazı olağandışı zorluklarla da uğraşmak zorunda kaldık. Ok tuşlarıyla metinde gezinmek kesinlikle bunlardan biriydi.

Kullanıcı düzenleme yaparken, metin widget'ı ayrıca bölünmeyen boşluklar ve satır sonları gibi gizli karakterleri de gösterir. Metin içine yerleştirilmiş SVG simgeleri olarak uygulanırlar ve bu bir sorun teşkil eder: contenteditable kullanırsak, bu simgeler kullanıcıların imleçlerini ok tuşlarıyla hareket ettirmesini engeller.

Çözüm yeterince basit: Bir span ve :before sözde öğesini kullanın. Bu şekilde, tarayıcı simgeyi metin olarak algılar ve ok tuşları harika çalışır.

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

Kısayollar

Bir metin widget'ına metin yapıştırmak için iki klavye kısayolu vardır.

Cmd / Ctrl + V , metni panodan yapıştırır ve orijinal belgede sahip olduğu stilleri korur. Metin Pages, Notes, Word veya Google Docs gibi bir uygulamadan kopyalandıysa, panonuz yalnızca düz metin değil, HTML bilgilerini de içerecektir. Bu HTML, orijinal stiller korunurken ayrıştırılabilir ve yapıştırılabilir.

HTML verilerini aşağıdaki gibi alabilirsiniz:

 // 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(); });

Ayrıca Cmd + Shift + V kısayolumuz var. Bu klavye kombinasyonunu kullanarak metin eklediğinizde, tarayıcı düz verileri yükte bırakır, böylece stil yapıştırma hedefi tarafından kontrol edilir. Bu kısayollar varsayılan olarak tarayıcıda bulunur, ancak bunları projenize uygulamayı hatırlamanız gerekir.

Metin Seçimi ve Odaklanma

Metin seçimi, kullanıcıların şu anda hangi metin parçasının düzenlenmekte olduğunu görmelerine yardımcı olur. Basit bir örnek deneyelim: Metnin kalınlığını kontrol etmek için düğmeli bir giriş alanı.

Bu örnekte, bir metin parçası seçip Bold düğmesine basabiliriz ve metindeki seçim daha sonra kalacaktır. Peki ya örneğimiz daha karmaşıksa? Metin boyutu seçiciye bir giriş alanı eklediğimizi varsayalım. Bu durumda, odak yeni girdiye kayar.

Bu sorunu çözmek için iki seçenek vardır:

• Her giriş olayından sonra odağı metin bloğuna geri gitmeye zorlarız. Bu durumda, belirli sayıda giriş olayından sonra seçim yanıp sönmeye başlayacaktır - bunu istemiyoruz.
• Metin bloğunu bir iframe ekleyebiliriz. Muhtemelen bildiğiniz gibi, bir iframe kendi global window nesnesi vardır. Bu nedenle, seçim iframe içinde olduğu sürece, odak dışarı taşınsa bile devam eder.

Sonunda bir iframe ile sarılmış metin widget'ı elde ettik. Bu nedenle, seçim iframe içinde olduğu sürece, odak dışarı taşınsa bile devam eder. Aşağıdaki ekran görüntüsüne bir göz atın. Sayfada iki seçimimiz var: metin widget'ında seçilen parça ve kontroldeki metin boyutunun seçilen değeri.

Metin Girişi Sırasında Performans

Metin düzenleme arayüzünüzün duyarlılığı önemlidir. Özellikle metinleri yüksek hızda düzenleme veya yazı tipi boyutunu değiştirme gibi görevler söz konusu olduğunda, saniye başına kare (FPS) değerini yakından izleyin.

Readymag'in iki görünümü vardır: masaüstü ve mobil . Metin stilleri her birinde farklı görünebilir. Metin girilirken editör, görünüm alanları arasında verileri senkronize etmek için çeşitli hesaplamalar yapacaktır. Tarayıcı API'si kullanılarak yüksek yanıt hızı elde edilir: requestAnimationFrame ve requestIdleCallback :

• ekran her yenilendiğinde requestAnimationFrame çağrılır;
• requestIdleCallback yalnızca tarayıcı boştayken çağrılır.

Bu, ana iş parçacığını engellemeden sıkıcı işlemleri gerçekleştirmenin harika bir yoludur.

Ulaşılabilirlik

Erişilebilirliği etkinleştirmek, günümüzde web geliştirmedeki en önemli uygulamalardan biridir. Web siteniz erişilebilirlik düşünülerek tasarlanmışsa , ürününüze daha fazla kişinin erişmesini sağlayacaktır . Bu, yalnızca engellileri değil, aynı zamanda farklı platformlardaki kullanıcıları da barındırmak anlamına gelir: masaüstü ve dokunmatik cihazlar, ekran okuyucular, işitme cihazları vb. Projeleri erişilebilir kılmanın ne kadar önemli olabileceğini anlamak için son erişilebilirlik istatistiklerine göz atmanızı tavsiye ederim.

Web erişilebilirlik uygulamalarını dahil etmeye başlamak için önce konuyla ilgili en kapsamlı kaynak olan Web İçeriği Erişilebilirlik Yönergelerini (WCAG) kontrol edin. Readymag bir yayın aracı olduğu sürece, WCAG'ye ek olarak, Yazma Aracı Erişilebilirlik Yönergeleri'ni (ATAG) da izlememiz gerekir.

Ekibimiz şu anda erişilebilirliği düzenleyiciye entegre etme aşamasındadır. Sonraki makalelerde, Readymag'de erişilebilirliği tam olarak entegre etme yolculuğumuz hakkında daha fazla bilgi paylaşacağız. Erişilebilirlik kontrol listemizi kullanarak Readymag ile yapılan tüm çalışmaları da kontrol edebilirsiniz.

En İyi Uygulamalar

Son olarak, web'de bir metin düzenleyici geliştirmenize yardımcı olacak bazı ipuçları:

• Düzen hakkında dikkatlice düşünün.
  Hangi yeteneklere ihtiyacınız olduğunu ve metin düzenleyicideki öğelerle nasıl çalışacağınızı önceden belirleyin.
• Görsel testi ayarlayın.
  Metinle çalışırken, tamamen anlık görüntü testi sonucuna güvenemezsiniz. Blok için verilen CSS'yi bekleyerek testte doğru sonucu alabilirsiniz, ancak bazen sonuç beklediğiniz gibi olmayabilir.
• Çalışmanızı farklı tarayıcılarda test edin.
  Tarayıcıların çoğu yeni çevrimiçi özellikleri oldukça iyi desteklerken, aynı stilleri farklı tarayıcılarda görüntülemekle ilgili genellikle sorunlar vardır.
• Yeni özelliklerin daha güvenli geliştirilmesi için özellik bayraklarını kullanın .
• Metin girerken tarayıcıda FPS'yi ölçün.
  Tek bir iş parçacığında CPU yoğun görevler yapmayın.
• Denemekten korkmayın .
• Son olarak, Readymag'de Metin Widget'ını deneyin .

Bazı Faydalı Bağlantılar

• “OpenType Özellikleri İçin Eksiksiz CSS Demosu,” Sparanoid
• “Web'deki Değişken Yazı Tiplerine Giriş,” web.dev
• “Muhteşem Tipografi,” Joel Galeran
• “Değişken Yazı Tipleri,” Nick Sherman
• yazı seti
• OpenType.js