Bir web etiketindeki tek bir ligatür oluşumunu devre dışı bırakmak için harflerini satır içi bir span içine alın ve ilgili ligatür özelliğini burada devre dışı bırakın. Diğer metin kendi ayarlarını korur. CSS’te, bir yazı tipinde adı belirtilen tek bir ligatürü genel olarak devre dışı bırakan bir anahtar yoktur. MDN’nin ligatür denetimleri, tek tek ikamaları değil özellik kategorilerini tanımlar.

Bu kılavuz, bir web sayfasının HTML ve CSS kodunu düzenleyen bir Mac kullanıcısına yöneliktir. Somut görev, sentetik fine flake office fine etiketindeki ilk fi öğesini ayırırken metnin geri kalanındaki ligatürleri korumaktır. Küçük bir yerel test, tek bir oluşumu değiştirmenin tüm özelliği değiştirmekten farkını görünür kılar.

CSS neyi seçerek devre dışı bırakabilir?

Bir ligatür özelliği birden çok ikame içerebilir. liga özelliğini devre dışı bırakmak, bu özelliği etkilenen metin için devre dışı bırakmak demektir; belirli bir harf çiftini seçmek anlamına gelmez. Benzer şekilde, font-variant-ligatures: no-common-ligatures, liga ve clig üzerinden yaygın ligatürleri denetler. Gerçek ikameler yazı tipine bağlıdır. MDN: font-variant-ligatures

Burada önemli olan ayrım, bir ayarın nerede geçerli olduğu ile hangi yazı tipi özelliğini denetlediği arasındadır. Özelliğin kendisi birçok ligatür içerse bile, işaretleme kullanarak ayarı iki harfle sınırlayabilirsiniz. Böylece yazı tipi genelinde dışlama anahtarına gerek kalmadan tek bir oluşumu hedefleyen bir geçici çözüm elde edersiniz.

İstenen sonuç Uygun yaklaşım Koşul
fi öğesinin tek bir oluşumunu ayırmak Bu oluşumu sarın ve özelliğini yerel olarak devre dışı bırakın İşaretlemeyi düzenleyebiliyorsunuz
Yaygın ligatürleri korurken isteğe bağlı ligatürleri kaldırmak İstenen öğede no-discretionary-ligatures kullanın İstenmeyen ikame dlig özelliğine ait
Diğer tüm yaygın ligatürleri korurken her fi öğesini kaldırmak Varsa, yazı tipine özgü belgelenmiş bir özellik kullanın Yazı tipi gerekli denetimi sağlamalı
Düzenleyemediğiniz bir uygulamadaki tek bir oluşumu değiştirmek Uygulamanın belgelenmiş karakter düzeyinde biçimlendirme seçeneklerine bakın Web CSS’i, masaüstü bir uygulamanın hangi özellikleri desteklediğini belirlemez

Desteklediği kategoriler için font-variant-ligatures kullanmayı tercih edin. MDN, mümkün olduğunda daha üst düzey yazı tipi özelliklerini önerir; font-feature-settings diğer durumlarda daha alt düzey OpenType özelliklerine erişim sağlar. font-feature-settings: \"liga\" off yazmak, çift özelinde denetim sağlamaz. MDN: font-feature-settings

Mac’inizde yerel bir karşılaştırma yapın

Sonucu ilgisiz sayfa stillerinden etkilenmeden karşılaştırabilmek için önce tek başına bir dosya kullanın. TextEdit’te File > New seçeneğine, ardından Format > Make Plain Text seçeneğine tıklayın. Aşağıdaki örneğin tamamını girin, dosyayı ligature-demo.html adıyla kaydedin ve sorulursa Use .html seçeneğini belirleyin. Bunlar, TextEdit’te HTML dosyası oluşturmak için Apple’ın belgelediği adımlardır. Apple: Mac’te TextEdit’te HTML belgeleriyle çalışma

Kaydettiğiniz dosyayı tarayıcınızda açın. Örnek, yerel olarak kullanılabilen yazı tiplerini kullanır ve herhangi bir kitaplık ya da indirme gerektirmez. Yazı tipi listesi örnek amaçlıdır: görünür bir fark oluşması, seçilen yazı tipinin ilgili ligatürleri içermesine bağlıdır. Test, tarayıcıdaki görüntülemedir; belirli bir glif görünümü varsayılmaz.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

Orta satırdaki span, hedeflenen fi öğesinin her iki harfini de içerir. Bu satırın geri kalanı yaygın ligatür ayarını devralır. Bu tür yalnızca biçimsel gruplama için span uygundur: WHATWG, span’i kendi başına anlam katmadan çocuklarını temsil eden bir öğe olarak tanımlar. WHATWG: span öğesi

Karşılaştırmayı üç adımda inceleyin:

  1. İlk fine öğesini temel satırla orta satırda karşılaştırın. Yalnızca toplam genişliğe değil, harf biçimlerine bakın.
  2. İki satırdaki flake, office ve sondaki fine öğelerini karşılaştırın. Bunlar istisnanın dışında kalır ve özgün özellik ayarlarını korumalıdır.
  3. Alt satırı diğerleriyle karşılaştırın. Bu, daha geniş kapsamlı denetimdir: o satır boyunca yaygın ligatürler devre dışıdır.

Üç satırın tümü aynı görünüyorsa karşılaştırma sonuçsuz kalmıştır. Örnek yazı tipini gerçekten kullanmayı düşündüğünüz yazı tipiyle değiştirin ve bu yazı tipinin ligatür içerdiği belgelenmiş harf dizilerini seçin. CSS bildirimi, seçilen yazı tipinin sağlamadığı bir ikameyi gösteremez.

Metin akışını bozmadan istisnayı uygulayın

Kısa bir etiket için span’i doğrudan ayırmak istediğiniz dizinin tamamını saracak şekilde yerleştirin. Örnekte fi ve ne ile yapıldığı gibi, öncesindeki ve sonrasındaki karakterleri kaynak kodda bitişik tutun. İşaretlemeyi okumayı kolaylaştırmak için sözcüğün içine boşluk veya satır sonu eklemeyin.

Span’in özellik ayarının değişmesi gerekir. Bir harfi, biçimlendirilmemiş başka bir span’in içine koymak ligatürü güvenilir biçimde bozmaz: W3C’nin metin belirtimi, etkili bir biçimlendirme değişikliği yoksa şekillendirmenin satır içi sınırları aşarak sürmesini gerektirir. Ayrıca kenar boşluklarının, kenarlıkların, iç boşlukların veya diğer biçimlendirme özelliklerinin şekillendirmeyi hangi koşullarda bozduğunu da tanımlar. W3C: Öğeler Arasında Şekillendirme

Bu istisnayı sıradan bir satır içi span olarak tutun. inline-block, boşluk veya düzen sarmalayıcıları eklemek, bu görevde gerekmeyen ek düzen kararları doğurur. Tipografi ayarını uyguladıktan sonra tarayıcı penceresini daraltın ve etiketi amaçlanan kapsayıcısında inceleyin. Farklı bir glif seçimi metnin kapladığı alanı değiştirebileceğinden, satır kaymasının aynı kalıp kalmadığını kontrol edin.

Daha uzun dizilerde, amaçlanan sınırı açıkça belirleyin. İstenmeyen ikame ffi öğesini içeriyorsa yalnızca fi öğesini sarmak da daha büyük dizinin içinde bir biçimlendirme sınırı oluşturur. Birbiriyle örtüşen her ikamenin birbirinden bağımsız davranacağını varsaymak yerine sözcüğün tamamını ve bitişik harfleri test edin.

Örneği mevcut bir sayfaya uyarlarken ilgili etiketi kaynak kodunda veya bileşeninde düzenleyin. Tek bir istisna eklemek için görünür metinden bütün bir paragrafı yeniden oluşturmayın; mevcut bağlantıları, vurguları ve öğe yapısını koruyun. Bu örnek, rastgele bir sayfada otomatik değiştirme yapmaya çalışmak yerine bilinen tek bir oluşumu ele alır.

Ligatür kalırsa veya diğer ligatürler kaybolursa ne yapmalı?

Hemen daha fazla geçersiz kılma kuralı eklemek yerine karşılaştırmayı tanılama adımları olarak kullanın.

Önce, özellik kategorisini kontrol edin. Örnek yaygın ligatürleri hedefler. Yazı tipi istenmeyen ikamenin dlig kapsamında olduğunu belgeliyorsa istisnaya bunun yerine no-discretionary-ligatures uygulayın. Bağlamsal bir ikame calt içerebilir ve no-contextual tarafından denetlenebilir; bu ayar, seçilen metindeki diğer bağlamsal biçimleri etkileyebilir. MDN’nin özellik kategorisi tanımları

Sonra, çakışan ayarları kontrol edin. Mevcut bir font-feature-settings bildirimi, font-variant-ligatures tarafından belirlenen özellik seçimlerini geçersiz kılabilir. W3C, alt düzey özellik ayarlarının özellik çözümlemesi sırasında daha sonra uygulandığını belirtir. Span yaklaşımının desteklenmediği sonucuna varmadan önce bu bildirimi gözden geçirin. W3C: Yazı Tipi Özelliği ve Değişken Çözümlemesi

Ardından, kapsamı kontrol edin. Başka sözcüklerde de ligatürler kayboluyorsa istisna sınıfının yalnızca hedef span’e ekli olduğunu doğrulayın. Paragrafa veya kapsayıcısına uygulanan bir ayar, çok daha geniş bir metin aralığını etkiler. Yerel örnekte alt satır, bu daha geniş kapsamlı sonucu bilerek gösterir.

Son olarak, isteğe bağlı tipografiyi zorunlu şekillendirmeden ayırın. font-variant-ligatures: none, bu görevin gerektirdiğinden daha geniş kapsamlıdır ve zorunlu ligatürleri devre dışı bırakma denetimleri kapsamına almaz. W3C, bu özelliğin zorunlu ligatürleri koruduğunu açıkça belirtir. W3C: Ligatürler

Amaç her yerde tek bir ligatür türünü kaldırmaksa, yerel span tekniğinin istenen her oluşuma uygulanması gerekir. Yazı tipine özgü bir özellik daha temiz bir çözüm sunabilir; ancak etiket ve etkisi o yazı tipinin belgelerinden doğrulanmalıdır. Stil kümesi numarasının farklı yazı tiplerinde aynı anlama geldiğini varsaymayın.

Bir şekillendirme kitaplığı daha hassas denetim sağlar mı?

HarfBuzz, hb_feature_t üzerinden özellik aralıklarını sunar: bir özellik; etiket, değer, kapsayıcı başlangıç ve dışlayıcı bitiş değerlerine sahiptir ve bunlar küme değerleriyle ifade edilir. Böylece şekillendirme kitaplığını çağıran bir uygulama, özellik ayarını sınırlı bir aralığa uygulayabilir. Yine de aralık, adı belirli tek bir ligatür için evrensel bir seçici değil, bir özellik aralığıdır. HarfBuzz: hb_feature_t

Bu API, sıradan sayfa CSS’inden farklı bir katmana aittir. HarfBuzz’ın belgelenmiş mekanizması, özellik isteklerini hb_shape() öğesine iletir. Örneklerinde, tarayıcı stil sayfasına yeni bir seçenek eklemek yerine şekillendirme arabellekleri ve yazı tipi arama kuralları açıklanır. Bu Mac web etiketi görevi için özel bir şekillendirme hattı kurmak, satır içi istisnanın gerektirdiğinden fazla iş çıkarır. HarfBuzz: OpenType özellikleri

Hedeflenen çifti, çevresindeki ligatürleri ve etiketi gerçek görüntüleme genişliğinde kontrol ederek işi tamamlayın. Çalışan en küçük istisnayı koruyun: istenmeyen dizinin tamamı tek bir span içinde olsun, uygun özellik orada devre dışı bırakılsın ve geri kalan metin amaçlanan ayarlarını korusun.

Kaynaklar