Sıkışık görünen tek bir harf çiftini ayırmak için önce başlığın harf aralığını ve yazı tipi karakter aralığını kontrol edin. Kısa bir Latin harfli etiket için yerel bir satır içi kenar boşluğu tek bir sınırı açabilir, ancak o noktadaki şekillendirmeyi kesintiye uğratır. Bu Mac iş akışı, bu ödünleşimin ne zaman uygun olduğunu açıklar.

Sorun harf aralığı mı, karakter aralığı mı, yoksa yerel bir çakışma mı?

Bu kılavuz, HTML ve CSS düzenleyebilen ve Mac'te bir web başlığını ayarlayan kişiler içindir. Amaç, metnin geri kalanını normal tarayıcı akışında tutarken rahatsız edici tek bir harf çiftini iyileştirmektir. Örnek olarak kullanılan yapay başlık NOVA STUDIO, belirli harflerin her yazı tipinde çakıştığı anlamına gelmez.

Harf aralığı, seçili metnin tamamındaki boşlukları denetler. CSS bunu letter-spacing özelliğiyle sunar: pozitif değerler aralığı artırırken negatif değerler daraltır. Dolayısıyla bu özelliği başlığın tamamında artırmak, sorunlu çiftten fazlasını değiştirir. Önce devralınan negatif bir değerin soruna yol açıp açmadığını kontrol edin. MDN: letter-spacing

Karakter aralığı, yazı tipinde depolanan aralık bilgilerini kullanır. CSS özelliği font-kerning, auto, normal veya none değerlerini kabul eder; adı belirtilen bir harf çifti için özel bir mesafe kabul etmez. Bu özelliği normal olarak ayarlamak, yazı tipinin karakter aralığı bilgilerini kullanmasını ister; ancak eksik bir çift düzeltmesi sağlayamaz veya belirli bir birleşimin iyi görüneceğini garanti edemez. MDN: font-kerning

İşaretleme eklemeden önce şu karar rehberini kullanın:

Gözlem İlk işlem Ne zaman devam etmeli?
Boşlukların çoğu fazla dar görünüyor Başlığı letter-spacing: normal ile karşılaştırın Yalnızca bir harf çifti hâlâ dikkat gerektiriyorsa devam edin
Metin animasyonu başladıktan sonra başlık farklı görünüyor Başlığı bölünmemiş özgün metinle karşılaştırın Düzeltme uygulamadan önce bölme düzenini inceleyin
Genel olarak kabul edilebilir kısa bir Latin harfli sözcükte tek bir sınır sıkışık görünüyor Yerel bir aralık düzeltmesi uygulamayı değerlendirin Bu sınırdaki şekillendirmenin değişeceğini kabul edin
Özgün şekillendirmenin aynen korunması gerekiyor Metin akışını bölmeden bırakın ve uygun başka bir yazı tipini veya yazı tipi sürümünü karşılaştırın Sınır eklemeden işe yarayan bir görünüm seçin

Chrome'da incelediğiniz sayfada Command–Option–C tuşlarına basın, ardından başlığa tıklayın. Elements paneli işaretlemesini seçer; Styles sekmesi de geçerli CSS'yi gösterir. Başlık kurallarını, devralınan harf aralığını ve tek tek karakterlerin çevresindeki sarmalayıcıları arayın. Bu inceleme adımları, Chrome'un belgelenmiş Mac iş akışını izler. Chrome DevTools'u açın

Karşılaştırmaları amaçlanan yazı tipi, kalınlık ve başlık boyutunda yapın. Örnekteki Arial metni için seçilen düzeltme yalnızca gösterim amaçlıdır; asıl ayarı belirlerken kullanmayı düşündüğünüz başlığı görüntüleyin. Her seferinde tek bir değişikliği karşılaştırabilmek için özgün bildirimleri kaydedin.

Yerel bir düzeltme neleri koruyabilir?

Düz bir span, kendi başına anlam eklemeden biçimlendirme olanağı sağlar. İçeriğini temsil eder; böylece başlık NOVA STUDIO metnini korurken bir sınıf, sorunlu sınırda biten öneki tanımlar. WHATWG HTML Standardı: span öğesi

Ancak satır içi bir sarmalayıcı ile aralık düzeltmesinin sonuçları farklıdır. W3C'nin güncel CSS Text Level 3 Candidate Recommendation Draft belgesi, etkili bir biçimlendirme değişikliği olmadığında satır içi sınırlar boyunca şekillendirmenin kesintisiz kalması gerektiğini belirtir. Ayrıca karakterleri ayıran sıfırdan farklı satır içi kenar boşluğu, kenarlık veya iç boşluğun o sınırda şekillendirmeyi bozduğunu açıklar. Dolayısıyla yerel bir kenar boşluğu, düzeltilen harf çifti boyunca özgün karakter aralığının korunacağını garanti edemez. CSS Text Module Level 3: Öğe Sınırlarında Şekillendirme

Örnekte NOV öğesini tek bir satır içi span içine yerleştirin ve A öğesini hemen arkasında bırakın. Bu öneke bir bitiş kenar boşluğu eklemek, V–A sınırını açar. Diğer harfler normal satır içi metin olarak kalır; her karaktere ayrı bir kutu vermeniz gerekmez. Yatay, soldan sağa akan metinde margin-inline-end, sağ kenar boşluğuna karşılık gelir. MDN: margin-inline-end

Sonucu değerlendirirken bu sınırlamayı göz önünde bulundurun: görünen değişiklik, bu sınır boyunca olabilecek şekillendirme düzeltmesinin kaybını ve eklenen kenar boşluğunu içerir. Bu, özgün harf çifti aralığına belirtilen mesafenin tam olarak eklenmiş hâli olmak zorunda değildir. Özgün şekillendirmenin korunması gerekiyorsa metin akışını bölmeden bırakın ve yazı tipi seçeneklerini karşılaştırın.

Mac'inizde eksiksiz bir yerel örnek deneyin

Tekniği bakımını yaptığınız bir başlığa uyarlamadan önce ayrı bir önizleme oluşturun. TextEdit'te File → New öğesini, ardından Format → Make Plain Text öğesini seçin. Aşağıdaki belgenin tamamını yapıştırın, pair-preview.html adıyla kaydedin ve sorulursa Use .html seçeneğini belirleyin. Apple, HTML dosyaları oluşturma sürecini belgeliyor. Mac'te TextEdit'te HTML belgeleriyle çalışma

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Kaydedilmiş belgeyi tarayıcınızda açın. Başlıktaki metni gösterilen tek kaynak satırında tutun: NOV ile A arasında boşluk yoktur; STUDIO öncesinde ise normal bir boşluk vardır. Böylece etikete görünür veya özel bir boşluk karakteri eklemek yerine sözcüğün yazımı korunur.

Özel --pair-gap özelliği, seçili sınırdaki kenar boşluğunu denetler. Başlangıç değeri örnek amaçlıdır. 64px yazı tipi boyutunda 0.02em, 1.28 CSS pikseli kenar boşluğu demektir; 40px boyutunda ise 0.8 CSS pikseline karşılık gelir. Kenar boşluğu metin boyutuna göre ölçeklenir, ancak görsel düzeltmeyi yine de incelemeniz gerekir. MDN, em kenar boşluklarının metin boyutuna göre belirlendiğini açıklar. MDN: margin-inline-end

Dıştaki .keep-word span'i white-space: nowrap özelliğini yalnızca NOVA için uygular. Böylece bu kısa sözcük bir arada kalırken önündeki STUDIO öncesindeki normal boşluk satır kaydırmaya açık olur. Tek satırda kalması özellikle gerekmiyorsa bu özelliği başlığın tamamına uygulamaktan kaçının. MDN: white-space

TextEdit daha sonra dosyayı biçimlendirilmiş içerik olarak açarsa File → Open öğesini kullanın, dosyayı seçin, Show Options seçeneğini belirleyin ve Ignore rich text commands seçeneğini işaretleyin. Alternatif olarak TextEdit → Settings → Open and Save altında Display HTML files as HTML code instead of formatted text seçeneğini etkinleştirin. Apple'ın TextEdit HTML kılavuzu

En küçük işe yarar düzeltmeyi nasıl seçersiniz?

Dikkat çekene kadar aralığı tekrar tekrar artırmak yerine kontrollü bir karşılaştırma yapın:

  1. --pair-gap değerini 0em yapın, kaydedin ve yeniden yükleyin. Önce düzeltilmemiş başlığı inceleyin.
  2. Karşılaştırmalar arasında kaydedip yeniden yükleyerek önce 0.01em, sonra 0.02em deneyin. Bunlar deneme değerleridir; önerilen tipografi standartları değildir.
  3. Harf çiftini hemen yanındaki harflerle birlikte değerlendirin. Sözcüğün genel ritmine uyduğu noktada durun.
  4. Başlık satıra kayana kadar tarayıcı penceresini daraltın. Yalnızca düzeltilen harfleri değil, başlığın tamamını kontrol edin.
  5. Düzeninizde gerçekten kullanılan her başlık boyutu ve kalınlığında yineleyin.

Sıfır kenar boşluğu ile sıfırdan farklı kenar boşluğu arasındaki karşılaştırmayı dikkatle değerlendirin. Bu eşiği aşmak, daha önce açıklanan şekillendirme sınırını oluşturur; dolayısıyla ilk değişiklik, sayısal kenar boşluğu değerinin düşündürdüğünden daha büyük olabilir. Çok küçük bir pozitif değer harf çiftini zaten fazla açıyorsa geçici çözümü kaldırıp yazı tipini veya başlığın mevcut biçimlendirmesini yeniden değerlendirin.

Düzeltme ayrıca düzende yer kaplar. Sınırdan sonraki harfler metinle birlikte yer değiştirir ve kullanılabilir genişliğin sınırındaki bir başlık farklı biçimde alt satıra kayabilir. Yerel aralık, tüm boşluklara harf aralığı eklenmesini önler; ancak satır sonunun değişmeyeceğini garanti edemez. Düzenlemeyi korumadan önce dar ve geniş görünümlerdeki genel düzeni kontrol edin.

Satır kaydırmayan sarmalayıcıyı kısa bir sözcükle sınırlı tutun. Sözcüğün kendisi kullanılabilir genişliği aşarsa taşabilir. Taşmayı gizlemek yerine o düzen için başlık boyutunu küçültün veya sarmalayıcıyı yeniden değerlendirin. MDN, white-space ile satır kaydırmayı denetlemeyi, sözcük içindeki kırılmalara izin veren özelliklerden ayırır. MDN: white-space

Başlıkta zaten SplitType kullanılıyorsa ne yapmalısınız?

SplitType, satırları, sözcükleri ve karakterleri öğelere saran bir animasyon aracıdır. Resmî belgeleri, bölme veya eski hâline döndürme sırasında karakterlerin hafifçe kaymasını önlemek için hedef öğelerde font-kerning: none kullanılmasını önerir. Bu öneri aracın animasyon iş akışına yöneliktir; uygulanması başlık genelindeki aralığı değiştirebilir. SplitType belgeleri

Mevcut bir başlık SplitType kullanıyorsa başka bir düzeltme eklemeden önce özgün metni karşılaştırın. Kütümanın belgeleri, özgün içeriği geri yükleyen bir örnek yöntem olan instance.revert() yöntemini açıklar. SplitType örneğini zaten yöneten bir uygulamada özgün durumu incelemek için belgelenmiş yaşam döngüsünü kullanın. Yukarıdaki yerel HTML örneğinde bu kütüphaneye bağımlılık yoktur. SplitType: Bölünmüş Metni Geri Alma

Yeniden boyutlandırma davranışını da kontrol edin. SplitType, göreli konumlandırılmış sözcük ve karakter bölmelerinin yeniden akışa girebildiğini; satır bölmenin veya mutlak konumlandırmanın ise kapsayıcı yeniden boyutlandırıldıktan sonra metnin yeniden bölünmesini gerektirdiğini belirtir. Görünürdeki çakışma yalnızca genişlik değiştikten sonra oluşuyorsa kalıcı bir harf çifti düzeltmesi kodlamadan önce bu düzen davranışını inceleyin. SplitType: Duyarlı Metin

Bu tek harf çifti görevi için pratik çıkarım, yalnızca aralığı ayarlayabilmek amacıyla karakter bölme kullanmaktan kaçınmaktır. Bu, örneğin gerektirdiğinden daha fazla düzen sınırı ekler.

Metin akışını ne zaman bölmeden bırakmalısınız?

Yerel kenar boşluğu örneğini yalnızca basit Latin harfleri arasından bilinçli olarak seçilmiş bir sınır için kullanın. Her dize konumunu saran rutinlere dönüştürmeyin. W3C, grafik kümelerini veya bitişik harfleri öğe sınırlarıyla bölmenin tutarsız ya da istenmeyen görüntülemeye yol açabileceği konusunda uyarır. Bir dizedeki karakter konumu, şekillendirmeyi kesintiye uğratmak için kendiliğinden uygun bir yer değildir. CSS Text Module Level 3: Karakterler ve Harfler

Şekillendirmenin aynen korunması gerekiyorsa başlığı kesintisiz metin olarak bırakın, doğal karakter aralığı ayarlarını karşılaştırın ve harf çiftini tatmin edici biçimde çözen bir yazı tipi görünümü seçin. Kontrollü bir yerel istisna kabul edilebilirse tek bir sınır ekleyin, işe yarayan en küçük kenar boşluğunu kullanın ve ortaya çıkan sözcük ile satır sonlarını birlikte kontrol edin.

Kaynaklar