Monospace Web

 (owickstrom.github.io)
1 puan yazan GN⁺ 2024-08-28 | 1 yorum | WhatsApp'ta paylaş
  • Karakter birimi ızgarası üzerine web öğelerini hizalayarak metinleri, tabloları, diyagramları ve medyayı 1970’ler tarzı terminal estetiğine yakın biçimde gösteren deneysel bir sayfa
  • Basit bir Markdown belgesini Pandoc ile dönüştürür; CSS ve çok az JavaScript ile semantik HTML’yi monospace ızgarada render eder
  • Duyarlı yapı piksel yerine karakter boyutu birimleriyle küçülür; tablolar ızgaraya göre otomatik ayarlanır, ancak genişleyebilen sütun tek bir sütunla sınırlıdır
  • Normal paragraflar, ayırıcı çizgiler, <details>, listeler, ağaç biçimli listeler, tablolar, formlar, grid kapsayıcısı, <pre> tabanlı ASCII çizimleri, görseller ve videolar gibi standart öğeleri ele alır
  • Tüm kaynak kodu GitHub’da açık; gerekli kısımlar lisans koşullarına uygun şekilde fork’lanabilir veya kopyalanıp kullanılabilir

Karakter ızgarasıyla oluşturulmuş web sayfası

  • Monospace yazı tipleri bazı kullanıcılar için orantılı yazı tiplerinden daha okunabilir, tutarlı ve güzel görünebilir
  • Bu sayfa, tüm öğeleri monospace web olarak kurmayı deneyen teknik ve yaratıcı bir denemedir
  • Uygulama, Markdown belgesini Pandoc ile dönüştürdükten sonra CSS ve az miktarda JavaScript ile semantik HTML’yi karakter ızgarasının üzerine yerleştirme yaklaşımını kullanır
  • Duyarlı yerleşim, ekran genişliğine göre piksel yerine karakter boyutu birimleriyle küçülür
  • Amaç, standart HTML öğelerinin ek karmaşık işler gerektirmeden monospace ızgara içinde doğal biçimde çalışmasını sağlamaktır

Desteklenen öğeler ve yerleşim yaklaşımı

  • Temel işaretleme normal paragrafları, yatay ayırıcıları ve <details> öğesini içerir
  • Listeler normal madde işaretli ve sıralı listeleri destekler; tree sınıfı eklenmiş sırasız listelerle dosya sistemi gibi görünen ağaç yapısı ifade edilebilir
  • Tablolar monospace ızgaraya göre otomatik ayarlanır ve duyarlı çalışır
    • Ancak genişleyebilen sütun tek bir kolonla sınırlıdır
  • Formlar da destek kapsamındadır ve diğer standart öğelerle birlikte aynı karakter ızgarası üzerine yerleştirilir
  • Bir kapsayıcıya grid sınıfı eklendiğinde hücreler yatay alanı eşit şekilde paylaşır
    • Monospace özelliği korunduğundan toplam genişlik her zaman %100 olmayabilir
    • Belirli bir hücrenin kalan alanı doldurması istenirse o hücreye flex-grow: 1; ayarlanır
  • <pre> etiketi ve box-drawing characters kullanılarak ASCII tarzı çizimler yapılabilir
    • Daha belirgin hale getirmek için <figure> ve <figcaption> ile sarılabilir
    • Örnek olarak mesaj iletim diyagramı ve çubuk grafik yer alır
  • Görseller ve videolar gibi medya nesneleri de desteklenir
    • Sayfa genişliğine kadar genişler ve monospace ızgarayı korumak için alt tarafa padding eklenir
  • Tüm kaynak kodu github.com/owickstrom/the-monospace-web adresinde açıktır
  • Tasarım ilhamının kaynağı U.S. Graphics Company’dir

İlgili okumalar

1 yorum

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

  • Sabit genişlikli sayfaların bir listesini topluyorum: https://wonger.dev/posts/monospace-dump#web. Şimdilik yaklaşık 50 tane var
    Aralıklandırma zor; orantılı yazı tipinden vazgeçince okunabilirlikten de bir ölçüde kaybediyorsunuz
    Orantılı yazı tiplerindeki kerning’in, gözün harf kümelerinin şeklini algılamasında büyük fark yarattığını düşünüyorum
    Sabit genişlikli metin, kod editörü gibi yapılandırılmış ve vurgulanmış yerlerde iyi, ama uzun yazılarda kaçınmak daha iyi
    Yine de özellikle Unicode tablolarında ve ASCII art’ta gerçekten çok güzel

    • Orantılı yazı tiplerinde kerning muazzam fark yaratır. Düzgün kerning, beynin kelime şekillerini çok daha hızlı işlemesini sağlar
    • ASCII art gerçekten harikaydı. Daktilo dersinde günlük ödevi bitirdikten sonra, nihai görselin ne olduğunu bilmeden bir komut listesini izleyerek ASCII art yapabiliyorduk
      Örneğin 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x gibi; yaklaşık 250 satırı bitirince Jordan’ın smaç bastığı bir resim ortaya çıkıyor ve çıktısını alabiliyordunuz
    • Örneklerden biri artık satılık bir domain olmuş. Yine de WBM’de duruyor: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • Renk ve azıcık biçimlendirme olmadan sabit genişlikli metin, bir duyuyu ya da uzamsal boyutu feda etmek gibi. Anlamsız bir çileciliğe yakın
    • Listeye bir tane daha eklenebilir :) https://jarek.lupin.ski/tape-deck/

  • Bu soruyu sormak için tam uygun başlık gibi. Birkaç yıl önce gördüğüm, muhtemelen bir video oyunu rehberi gibi bir yazı vardı; sabit genişlikli yazı tipinde okunacak şekilde yazılmıştı ve binlerce satırın tamamı sadece kelime seçimiyle kusursuz biçimde iki yana yaslanmıştı
    Ne olduğunu bilen ve linki olan var mı?

    • Benzer bir şey olarak http://tom7.org/bovex/ de var. Girdiyi LLM ile yeniden yazarak benzer bir etki üretmeye çalışan bir layout engine
    • Buna bricktext deniyor. Eskiden usenet’te veya GameFAQs gibi yerlerde ara sıra görülürdü
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      Bu kavramın Google arama sonuçlarından tamamen kaybolmuş olması biraz şaşırtıcı
    • Laravel de benzer bir şey yapıyor. Çok satırlı yorumda her satır, bir önceki satırdan tam olarak 3 karakter daha kısa
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • GameFAQs rehberlerinde böyle bir şey gördüğüme dair silik bir anım var. Sanırım bir Final Fantasy oyunuydu, ama daha fazlasını hatırlamıyorum
    • Ben de bu başlığa bir soru eklemek istiyorum
      Yıllardır Visual Studio Code eklentisi olarak, yazarken yorumları tirelemeyi de içerecek şekilde iki yana yaslayan, gerektiğinde ek boşluklara da izin veren bir özellik yapmak istedim
      İlgili algoritma ve kütüphaneleri biraz araştırmak dışında başlayamadım; çünkü epey karmaşık görünüyordu
      fmt ya da par gibi şeyleri denemeyi düşündüm, ama sonunda, elle yapmadıkça güzel hizalanmış yorumlardan vazgeçmek gerektiğini kabul ettim; küçük bir değişiklik çoğu zaman birçok satırı yeniden işlemeyi gerektirdiğinden çok zaman alıyor
      Uzun identifier’ları mümkünse satır ortasında bölmek istemiyorum; iç içe listeleri, tabloları, code block’ları, yorum içindeki ASCII art’ı, kelime içi tirelerle tireleme için eklenen tirelerin ayrımını, XML dokümantasyon yorumları veya Javadoc tag’leri gibi yapılandırılmış yorumları da ele almak gerekiyor
      Tom7’nin Badness 0’ını görünce LLM’e versem mi diye de düşündüm, ama gerçek zamanlı çalışması ve halüsinasyon yorumlar üretmemesi gerekiyorsa bunun henüz pratik olmadığını düşünüyorum
      Böyle bir özellik zaten var mı, ya da bir eklenti yapmayı 1 yıllık işe çevirmeyecek bir temel var mı?

  • Sabit genişliğin kendisi rahatsız etmiyor
    Rahatsız eden şey zorunlu satır sonları
    “Retro” web sitesi deyip fiilen pre etiketi kullanan yerler var
    Telefonda küçük puntolu bir metin duvarına dönüşüyor; okuma modu çalışmıyor; yatay çevirince kaydırma çubuğu çıkabilir de çıkmayabilir de
    Günümüz teknik mailing list’leriyle ilgili neredeyse tek şikâyetim de zorunlu satır sonları ve katı layout

    • Bu web sitesi öyle değil. Tamamen responsive
    • Telefonda bir RFC okumaya çalıştım; basit bir paragrafı görmek için sürekli sağa sola kaydırmam gerekti. Ya da yazıyı okunamayacak kadar küçültmem gerekiyordu
    • Kaydırma çubuğunun tam olarak nesi sorun, merak ediyorum

  • Bugün izlediğim bir videoda buna indie web diyorlardı; algoritmalara karşı çıkan ve geçmişte web’i harika yapan şeyleri benimsemeye çalışan bir felsefe olduğunu söylüyordu
    RSS, kişisel bloglar, forumlar, webring’ler gibi şeyler
    Ben de kendim bir tane başlattım ve epey iyi hissettiriyor

  • Güzel görünmesi, semantik ve duyarlı olması iyi; ama temelde sabit genişlikli yazı tipleri gövde metni için pek iyi değil
    Çeşitli sitelerde sabit genişlikli gövdeyle yazılmış blog yazıları okudum ve fena değildi; ama bana göre doğru yön orantılı genişlik

    • Sanırım ben sabit genişlikliyi daha çok tercih ediyorum. En azından siyah arka plan üzerine beyaz yazı renk düzeni kesinlikle daha iyi
      Eski basılı dergi havası vermeye çalışan “güzel” sayfalardan çok daha iyi olduğunu düşünüyorum
    • Katılıyorum. Markdown belgeleri yazarken de bu gözüme batmaya başladı; ama Markdown’da sabit genişlikten kaçınmak çoğu zaman gerçekçi değil
    • Meraktan soruyorum, gövde metni için hangi yazı tipini tercih ediyorsun?
      Blogumda görme yetim iyi olmadığı ve yakınlaştırma ayarı kullandığım için sabit genişlikli kullanıyorum; ama erişilebilirliğin önemli olduğunu düşündüğümden, herkes için daha okunabilir seçimin ne olduğunu hep merak ediyorum

  • Başka şeyleri bilmem ama tree ul-list CSS sınıfı, HTML spesifikasyonuna etiket olarak girecek kadar iyi bence. İnanılmaz kullanışlı bir bileşen

  • Satır aralığı çok dar, okunabilirliği kötü etkiliyor. Böyle sıkışık gövde metnindeki uzun paragrafları okumak zor
    Ancak tablolar ve karakter grafikleri bu dar satır aralığına ihtiyaç duyuyor
    Aynı karakter ızgarasını hem grafik hem metin için kullanmak sorun
    x-height özellikle düşük olduğundan, harflerin üstünde ve altında daha fazla boşluk bırakan bir yazı tipi kullanmak bunu hafifletebilir gibi

    • İlk başta satır genişliğinden bahsettiğini sanıp kafam karıştı. Satır genişliği, genel kabul gören aralık olan yaklaşık 70 karakter içinde
      Satır yüksekliği konusunda katılıyorum. 16px yazı tipi boyutuna 19.2px olunca yalnızca 1.2 kat; fazla bunaltıcı. 24px yapmak ciddi biçimde iyileştiriyor
      Yine de benim gözüme daha büyük satır yüksekliği tabloları veya karakter grafiklerini etkilemiyor gibi görünüyor. Böyle bir ayar eklenirse sabit genişlikli stil epey iyi ayakta kalıyor
      Düzenleme: Sanırım ana fikri anladım. Yazarın sabit ızgara kavramını bozuyor. p öğesine line-height: 24px koyup yazarın “debug mode”unu açarak ızgaraya bakınca görülebiliyor
    • Okuma için sabit genişlikliye hiç katlanamadığım için bir bookmarklet yaptım. Bu sitede yalnızca normal metin etiketlerini sans-serif’e çevirmek iyi çalışıyor; ama tüm okuma modları yazı tipi tercihlerini berbat ediyor
      javascript: (function() {
      (function() {
      const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');
      textElements.forEach((element) => {
      const textColor = getComputedStyle(element).getPropertyValue('color');
      element.style.fontFamily = 'system-ui, -apple-system, sans-serif';
      element.style.WebkitTextStroke = \0.4px ${textColor}`; }); location.hash = ""; history.replaceState("", "", location.pathname); })(); })();`
      https://caiorss.github.io/bookmarklet-maker/
    • Buradaki HN yorumlarının sıkışıklığıyla karşılaştırınca nasıl?
    • Sorun sıkışık satır yüksekliği mi, yoksa sabit genişlikli yazı tipinin orantılı genişlikli yazı tipinden zaten daha zor okunması mı?
      Çünkü sabit genişlikli sözcüklerin “şekilleri” orantılı genişlikli sözcüklere göre daha benzer hale geliyor
    • Görür görmez içimde hemen bir itici his oluştu

  • OpenBSD birkaç yıl önce konsol yazı tipini Spleen olarak ayarlamaya başladı
    TrueType sürümünün olmaması üzücü
    https://github.com/fcambus/spleen

    • Bunun yerine OTF dosyasını kullanamaz mısın? README, yayın tarball’ının içinde OTF dosyası olduğunu söylüyor

  • Bugün bile ünlü bir C64 kaynağı olan sözde VIC article sabit genişlikli olarak sunuluyor
    https://www.cebix.net/VIC-Article.txt
    Asıl mesele çıktı
    Bu yazı, iki boyutlu uzayda sabit referans gerektiren diyagramlar kullandığı için burada sabit genişlik çok önemli
    Bu yazı C64 için en önemli teknik referanslardan biri ve teknik demo efektlerinin %99’u buradaki temel numaralara indirgenebilir

  • Kişisel web sitemin yazı tipini sabit genişlikliye çevirmeyi düşünüyorum
    Uzun yazılarda okunabilirliği özellikle iyi olan sabit genişlikli yazı tipi bilen var mı?
    Google Fonts’ta varsa daha da iyi

    • Paragraf gösterimi için Drafting Mono’yu seviyorum: https://indestructibletype.com/Drafting/
      Google Fonts’ta yok ama ücretsiz; değişken yazı tipi sürümü de oldukça ucuz
    • IBM Plex Mono oldukça iyi ve lisansı da makul. Google Fonts’ta var, deposu da burada: https://github.com/IBM/plex
    • Konu dışı ama Google Fonts yerine https://fontsource.org/ kullanmayı düşünmek iyi olabilir. Kullanması aynı derecede kolay ve en azından Google takibi yok