Söz dizimi vurgusu yerleşik font

 (blog.glyphdrawing.club)
8 puan yazan GN⁺ 2024-08-15 | 1 yorum | WhatsApp'ta paylaş

Sorunlar

  • HTML ve CSS ile elle kodlanmış bir web sitesi oluştururken söz dizimi vurgusu yapmak zor
  • Kod parçacıklarının kolay okunup anlaşılması için renklerle vurgulanması isteniyor
  • Genellikle Prism veya highlight.js gibi karmaşık söz dizimi vurgulama kütüphaneleri kullanmak gerekiyor
  • Harici script kullanmadan elle kod yazmak isteniyor

OpenType özelliklerini kullanarak söz dizimi vurgusunu doğrudan fontun içine yerleştirmek

  • Monaspace Krypton adlı açık kaynaklı font değiştirilerek her karakterin renkli sürümleri eklendi
  • OpenType'ın COLR tablosu ve bağlamsal değiştirme özellikleri kullanılarak belirli dizgeler bulunup değiştiriliyor
  • Sonuç olarak, fontun içine gömülü basit bir söz dizimi vurgulayıcı ortaya çıkıyor

Avantajlar ve dezavantajlar

Avantajlar

  • Kurulum basit: fontu içe aktarıp OpenType COLR (renk) ve CALT (bağlamsal değiştirme) özelliklerini etkinleştirmek yeterli
  • JavaScript gerekmiyor
  • CSS teması gerekmiyor
  • Düz metin kadar hızlı
  • Kod parçacıkları <pre> ve <code> etiketlerine eklenebiliyor
  • Temiz HTML kaynak kodu
  • InDesign gibi OpenType özelliklerini destekleyen her yerde çalışıyor
  • Bakım ya da güncelleme gerekmiyor
  • <textarea> ve <input> içinde de çalışıyor

Dezavantajlar

  • Renk paletini değiştirmek veya dil desteği eklemek gibi düzenlemeler gerektiğinde font dosyasını değiştirmek gerekiyor
  • Yalnızca OpenType'ı destekleyen ortamlarda çalışıyor
  • OpenType bağlamsal değiştirme ile yapılan desen bulma temel düzeyde; regular expression kullanan script'lerle kıyaslanamaz

Gerçekte nasıl çalışıyor

  • OpenType COLR tablosu ve bağlamsal değiştirme özellikleri kullanılıyor
  • COLR tablosu çok renkli fontları mümkün kılıyor
  • Bağlamsal değiştirme, bitişik karakterleri algılayıp değiştiriyor
  • Örnek: JavaScript anahtar sözcüğü if bulunup renkli bir varyantla değiştiriliyor

GN⁺ özeti

  • Bu yazı, web sitelerini elle kodlarken söz dizimi vurgusu uygulamak için yeni bir yöntem sunuyor
  • OpenType özelliklerinden yararlanarak söz dizimi vurgusunu doğrudan fontun içine gömüyor; böylece JavaScript veya CSS temaları olmadan da söz dizimi vurgusu mümkün oluyor
  • Bu yöntem basit söz dizimi vurgusu için uygun olsa da, karmaşık söz dizimi vurgulama kütüphanelerine kıyasla sınırlamaları var
  • Benzer işlev sunan projeler arasında Prism ve highlight.js bulunuyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-08-15
Hacker News görüşü

  • İlginç bir hack

    • OpenType özelliklerinin kullanımı konusunda biraz kafa karışıklığı var
    • font-feature-settings: "colr", "calt"; ayarının bir anlamı yok
    • colr özellik etiketi OpenType düzen tablolarında yok
    • Muhtemelen COLR tablosunu etkinleştirme niyeti vardı
    • calt özelliği zaten varsayılan olarak etkin
    • Firefox ve Chrome'da iyi çalışıyor ama Safari'de çalışmıyor

  • Orijinal metin olduğu gibi korunuyor

    • Etiket sarmalama veya JS olmadan userContent.css ile çalışıyor
    • Bambaşka bir yaklaşım seviyesi

  • OpenType uzmanı değilim, bu yüzden yedek mantık geliştirilebilir

    • Düzenlenmiş kaynak dosyayı paylaşmaya istekliyim
    • Fikir veya geri bildiriminiz varsa iletişime geçin

  • Bu hack korkunç ama hayranlık uyandırıcı

    • OpenType bağlamsal ikame özelliğini harika biçimde kötüye kullanıyor
    • Paylaştığın için teşekkürler

  • Harika bir hack

    • Yaklaşık 45kB; baseline highlight.js ile benzer boyutta
    • JavaScript'in devre dışı olduğu ortamlarda da çalışıyor
    • Çalışma zamanında yapılandırılabilirlik ve dil desteği daha sınırlı

  • Sayfanın altında güzel bir mesaj var

    • "Bu site çerez kullanmıyor ve üçüncü taraf sitelere bağlantı vermiyor"
    • Bu hoşuma gitti

  • Bunun kodla otomatikleştirilebileceği gibi görünüyor

    • Genel kullanım senaryoları için faydalı bir yöntem

  • Chromium tabanlı tarayıcılarda bir hata var

    • color: blue yazınca yalnızca r vurgulanıyor
    • Kopyala-yapıştır yapınca düzgün çalışıyor
    • Yine de harika bir özellik

  • Gerçekten çok havalı bir özellik

    • Yalnızca textarea ve giriş alanlarında değil, büyük HTML belgelerinde de kullanılabilir
    • Çok sayıda span ve HTML etiketi kullanmaya gerek kalmaz
    • Donanım hızlandırmalı yazı tipi oluşturma yazılımı her şeyi halleder
    • Bellek ve CPU açısından büyük tasarruf sağlayabilir

  • Bir parser generator gibi çalışan bir şeye ihtiyaç var gibi görünüyor

    • Kuralların ne kadar ifade gücüne sahip olduğu net değil

  • Gerçekten şaşırtıcı bir özellik

    • Bunu daha iyi bir yazı tipinde görmeyi isterim (ör. Inconsolata veya JetBrains Mono)
    • JSON'u kolayca görüntülemek için faydalı olur