Highlighters Kütüphanesi: Web Metinlerinde Gerçek Marker Darbeleri

Şöyle bir düşünün: Web'de metin vurgulama denilince çoğumuzun aklına sadece düz bir arka plan rengi geliyor. Halbuki gerçek bir marker gibi hissettirmek istiyorsunuz — tıpkı kâğıt üzerinde gezinen sarı bir keçeli kalem gibi. Ama çoğu zaman elde ettiğiniz şey, yirmi yıllık bir çantanın dibinde unutulmuş fosilleşmiş bir vurgulama oluyor.

İşte Highlighters kütüphanesi tam olarak bu sorunu çözüyor.

Arka Plan Renginin Ötesinde

Burada söz konusu olan şey background-color: #ffff00 değil. Gerçek fırça izleri oluşturmak — "çalışıyor" ile "harika hissettiriyor" arasındaki farkı belirleyen cinsten bir detay. Bir marker darbesi çektiğinizde göreceğiniz şeyler:

• Darbenin başladığı ve bittiği noktalarda mürekkep birikimi
• İkin kurumaya başladığı andaki izlenimler
• Son harfin hemen ötesine taşan o karakteristik akma, tıpkı gerçek mürekkebin kâğıt üzerinde davranışı gibi

Metniniz bu ressamsı efektlerin altında hiçbir değişikliğe uğramadan duruyor. Kullanıcılar vurgulanmış metni eskisi gibi seçebilir, kopyalayabilir, arayabilir ve etkileşime girebilir.

Üç Farklı Uç, Sınırsız İmkan

Kütüphane üç yaygın marker ucu şekli sunuyor:

| Uç Tipi | Karakter | Kullanım Alanı | |---------|----------|----------------| | Geniş keski uç | Yassı, geniş darbeler | Tüm cümleleri vurgulamak için | | Yuvarlak bullet uç | Orta genişlikte, yumuşak kenarlar | Günlük kullanıma uygun | | İnce sivri uç | Hassas, dar çizgiler | Tek kelimeleri işaretlemek için |

Bunları karıştırın, katmanlayın ve gerçek bir markerda olduğu gibi üst üste binen kısımların koyulaştığını görün. Bazı renklerde ise neon parlaklığı göz alıcı bir şekilde yansıyor.

Kolay Entegrasyon

Kütüphane oldukça hafif ve her yerde çalışıyor, ama modern framework'ler kullanıyorsanız, resmi bağlantılar mevcut:

npm install @highlighters/core
npm install @highlighters/react
npm install @highlighters/vue
npm install @highlighters/svelte

Nerelerde Parlıyor

Şimdi canlandırın gözünüzde:

• Kullanıcıların birlikte metin üzerinde işaretleme yapabildiği işbirliğine dayalı doküman editörleri
• Öğrencilerin okuma materyallerine not ekleyebildiği çevrimiçi eğitim platformları
• Fiziksel not alma hissi veren yaratıcı yazım araçları
• Paydaşların önemli bölümleri işaretleyebildiği inceleme sistemleri
• Kullanıcıların okuma pozisyonunu görsel olarak takip etmesine yardımcı olan erişilebilirlik araçları

Küçük Detaylar, Büyük Fark

Beni en çok etkileyen şey gerçek dünya davranışına gösterilen özen. Vurgulamalar kaydırma ve pencere boyutu değişikliklerinde konumlarını koruyor. Darbeler içeriğinizi değiştirmek yerine üzerinde duruyor. Bu da şu anlama geliyor: layout kaymaları yok, z-index sorunları yok, erişilebilirlik endişesi yok.

Web geliştirme dünyasında çoğu zaman kolaylık uğruna ustalığı feda ediyoruz. Highlighters bize dokunsal detayların en büyük etkiyi bıraktığını hatırlatıyor. Bazen kullanıcılarınızın "vay be, bu farklı hissettiriyor" dedirtecek özellik, onların hiç bilmediği ihtiyacı karşılayan özelliktir.

Projenin sitesini ziyaret edin: https://highlighte.rs/ ve bir sonraki projenize biraz daha renk katın.