Monospace Web

 (owickstrom.github.io)
1 puan yazan GN⁺ 2024-08-28 | 1 yorum | WhatsApp'ta paylaş

Giriş

Monospace yazı tipi birçok kişi tarafından sevilir. Okunabilirlik, tutarlılık ve estetik açıdan güçlüdür. Bu sayfa, metinleri ve diyagramları hizalamak için monospace bir ızgara kullanır. Basit bir Markdown belgesinden üretilir ve CSS ile biraz Javascript kullanılarak render edilir. Duyarlı bir tasarım benimser ve karakter boyutu birimine göre ölçeklenir. Amaç, standart öğelerin düzgün çalışmasını sağlamaktır. 70'ler tarzı semantik HTML olarak render edilir.

Temel bilgiler

  • Belgede birkaç ek sınıf kullanılır, ancak büyük kısmı işaretlemedir.
  • Örnek olarak normal paragraflar ve yatay çizgi bulunur.
  • İçeriği gizlemek için <details> öğesi kullanılabilir.

Listeler

  • Tipik madde işaretli liste:

    • muz
    • kâğıt gemi
    • salatalık
    • roket

  • Sıralı liste:

    • hedef
    • motivasyon
      • içsel
      • dışsal
    • ikincil etkiler

  • Ağaç görselleştirmesi:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

Tablolar

  • Monospace ızgaraya otomatik olarak uyan normal tablolar kullanılabilir.
  • Örnek:
    • Ad: Boboli Obelisk, boyut: 1.41m × 1.41m × 4.87m, konum: 43°45’50.78”N 11°15’3.34”E
    • Ad: Pyramid of Khafre, boyut: 215.25m × 215.25m × 136.4m, konum: 29°58’34”N 31°07’51”E

Formlar

  • Düğme ve giriş alanı örnekleri:
    • Düğmeler: RESET, SAVE
    • Giriş alanları: ad, soyad, yaş

Izgara

  • Yatay alanı eşit bölmek için kapsayıcıya ızgara sınıfı eklenebilir.
  • Kalan alanı doldurmak için belirli hücrelere flex-grow: 1; ayarlanabilir.

ASCII çizimleri

  • Kutu çizim karakterleriyle çizim yapmak için <pre> etiketi kullanılabilir.

  • Örnek:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • Vurgulamak için <figure> etiketi ve <figcaption> eklenebilir.

  • Mesaj iletimi örneği:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • Grafik örneği:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

Medya

  • Görsel ve video gibi medya nesneleri desteklenir.
  • Örnek:
    • Bir Fransız şatosunda oda (2024)
    • Web'in merkezi (1914), Wikimedia

Tartışma

  • CSS tekniklerini geliştirmek ve tasarımdan keyif almak için yapılmıştır.
  • Kullanmanız veya geri bildirim vermeniz memnuniyetle karşılanır.
  • Tüm kaynak kodu GitHub'da görülebilir: github.com/owickstrom/the-monospace-web
  • U.S. Graphics Company'ye teşekkür edilir.

GN⁺ özeti

  • Bu proje, monospace yazı tipini kullanan bir web tasarım denemesidir.
  • Duyarlı tasarım ile semantik HTML'yi birleştirerek 70'ler tarzı bir web sayfası oluşturur.
  • Geliştiricilerin CSS ve tasarım becerilerini geliştirmesine yardımcı olabilir.
  • Benzer işlevlere sahip projeler arasında "CSS Zen Garden" bulunur.

İlgili okumalar

1 yorum

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

  • Bir kullanıcı, monospace sayfalardan oluşan bir liste tuttuğunu ve şu anda bunun yaklaşık 50 adet olduğunu söylüyor

    • Orantılı yazı tiplerinden vazgeçildiğinde okunabilirlik düşüyor
    • Orantılı yazı tiplerinde harf aralığı ayarı, harf gruplarının şeklini algılamada büyük fark yaratıyor
    • Kod düzenleyicisinde yapılandırılmış ve vurgulanmış olduğunda monospace metin kabul edilebilir oluyor
    • Unicode tabloları ve ASCII sanatıyla birlikte kullanıldığında özellikle hoş görünüyor

  • Bir kullanıcı, birkaç yıl önce monospace yazı tipiyle yazılmış bir video oyunu rehberi aradığını söylüyor

    • Metin, yalnızca kelime seçimiyle kusursuz biçimde hizalanmıştı
    • Bunu bilen varsa bağlantı paylaşıp paylaşamayacağını soruyor

  • Bir kullanıcı, "indie web" felsefesinden bahsediyor

    • Algoritmaları dışarıda bırakıp geçmişte web'i güzel kılan unsurları benimsiyor
    • RSS, özel bloglar, forumlar ve web ring'leri buna dahil ediyor
    • Kendisi de başlamış ve bunu çok beğendiğini söylüyor

  • Bir kullanıcı, monospace yazı tipinin kendi başına iyi olduğunu ancak zorunlu satır kaydırmanın sorun yarattığını belirtiyor

    • Küçük puntoyla bir metin duvarı oluşuyor ve okuma modu çalışmıyor
    • Yatay konuma çevrildiğinde kaydırma çubuğu çıkma ihtimali oluyor
    • Teknik e-posta listelerinde de aynı şikâyetin bulunduğunu söylüyor

  • Bir kullanıcı, kişisel web sitesindeki yazı tipini monospace olarak değiştirmeyi düşündüğünü söylüyor

    • Uzun metinlerde okunabilirliği iyi olan monospace yazı tipi önerileri istiyor
    • Google Fonts'ta bulunan bir yazı tipiyse ekstra puan veriyor

  • Bir kullanıcı, monospace'in hoş ve duyarlı olduğunu ancak gövde metni için uygun olmadığını belirtiyor

    • Çeşitli sitelerde monospace gövde metni okuduğunu ama orantılı yazı tiplerini daha iyi bulduğunu söylüyor

  • Bir kullanıcı, ünlü C64 kaynağı "VIC article"ın hâlâ monospace olarak sunulduğunu belirtiyor

    • Asıl sorunun baskı olduğunu söylüyor
    • Diyagramlar, sabit referans gerektiren iki boyutlu bir alan kullanıyor
    • Bu makalenin C64 için en önemli teknik başvuru kaynaklarından biri olduğunu belirtiyor
    • Teknik demo efektlerinin %99'unun burada bulunan temel hilelere ayrıştırılabileceğini söylüyor

  • Bir kullanıcı, web'in yeniden eski hâline dönmeye başladığını söylüyor

    • İlk dönem web'in uydu toplulukları giderek çoğalıyor
    • Web'in farklı bölümlerini ziyaret etmek giderek daha ilginç hâle geliyor

  • Bir kullanıcı, tree ul-list CSS sınıfının HTML standardının bir parçası olması gerektiğini düşünüyor

    • Bunun çok kullanışlı olduğunu söylüyor

  • Bir kullanıcı, OpenBSD'nin birkaç yıldır konsol yazı tipini "Spleen" olarak ayarladığını belirtiyor