Sarmalanmış vurgunun her satırının iki ucunda da dolguyu korumak için, arka planı ve dolguyu da içeren bir satır içi elemana box-decoration-break: clone uygulayın. Safari için WebKit önekli bildirimi de ekleyin. MDN, parçaların dekorasyonunu açıklar.

Bu kılavuz, bir başlık ya da paragraf içindeki vurgulanmış bir ifadenin doğal biçimde satırlara sarılmasını isteyen ve Mac’te bir web sayfasını düzenleyen kişilere yöneliktir. Amaç, satır sonlarını tarayıcıya bırakırken ortaya çıkan her satıra dolgulu bir arka plan vermektir.

Vurgu satıra sarıldığında dolgu neden kayboluyor?

box-decoration-break özelliğinin başlangıç değeri slice şeklindedir. Satır içi bir kutu satırlar arasında bölündüğünde, bu değer dekorasyonunu parçalara ayrılmış sürekli bir kutu olarak ele alır. Kesilme noktalarına dolgu eklenmez. clone ile her parça kendi dolgusunu, kenarlığını ve arka plan dekorasyonunu alır. W3C, her iki parçalanma davranışını tanımlar.

Bu ayrım, sık görülen bir sonucu açıklar: daha fazla yatay dolgu eklemek ifadenin başını ve sonunu genişletir, ancak ara satırların kenarları yine de sıkışık görünür. Eksik ayar, bu kesilme noktalarında ne olacağını belirler; yalnızca dolguyu artırmak bunu değiştirmez.

Vurguyu satır içi kutu olarak bırakın. Blok arka planı, kapsayıcı dikdörtgeni dekore ederken satır içi vurgu metin akışını izler. MDN; blok, satır içi ve satır içi blok kutularının boyutlandırma ve aralık davranışlarını belgeler. MDN’nin kutu modeli kılavuzuna bakın.

Mac’inizde eksiksiz bir örnek oluşturun

Bir kod düzenleyicide wrapped-highlight.html adlı düz metin dosyası oluşturun, aşağıdaki eksiksiz örneği yapıştırın ve kaydedin. Dosyayı masaüstü tarayıcınızda açın. Paket yüklemeniz, harici stil sayfası ya da JavaScript gerekmez.

Örnek başlık, basit bir sayfa girişini temsil eder. Tek bir span, dekore edilen ifadenin tamamını çevreler. WHATWG, span öğesini kendi başına anlamı olmayan genel bir metin düzeyi kapsayıcısı olarak tanımlar; bu nedenle yalnızca görsel amaçlı bu gruplama için uygundur. HTML Standardı’ndaki span tanımını okuyun.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Başlık satırlara sarılana kadar tarayıcı penceresini daraltın, ardından yeniden genişletin. Vurgulanan her satırın başını ve sonunu inceleyin. Amaçlanan sonuç, sarma değiştikçe aynı görünümün sürdüğü, her satırın çevresinde ayrı dolgulu bir arka plan parçası oluşmasıdır. MDN’nin örneklerinde aynı önekli ve standart bildirim çifti kullanılır. Belgelenen sözdizimine ve örneklere bakın.

Buradaki ölçüler örnek tasarım tercihleridir. Uçlar fazla sıkışık ya da geniş görünüyorsa yatay dolgu olan 0.3em değerini değiştirerek başlayın. Dikey dolgu olan 0.08em değerini ayrı olarak değiştirin. Her iki değeri ayarlarken de satır sarma testini sürdürün.

Davranışları karşılaştırmak için her iki dekorasyon bildirimini geçici olarak clone değerinden slice değerine değiştirin, kaydedin ve sayfayı yeniden yükleyin. Ardından ikisini de clone değerine geri döndürün. Her ikisini birden değiştirmek, karşılaştırmanın tarayıcınızın hangi bildirimi tanıdığına bağlı kalmasını önler.

Mac’te hangi tarayıcı desteği ayrıntıları önemlidir?

Örnekteki her iki bildirimi de koruyun. MDN’nin güncel uyumluluk verileri, standart özellik desteğinin Chrome 130 ve Firefox 32 ile başladığını gösterir. Safari desteği -webkit- önekiyle belirtilir ve bu uygulama satır içi öğelerle sınırlıdır. MDN’nin tarayıcı uyumluluk verilerini inceleyin.

Bu satır içi sınırlama bu görevle uyumludur: metin satırlarına bölünen bir ifade, satır içi parçalanmadır. Bu, sütunlar ya da basılı sayfalar arasında bölünen bir blok için eşdeğer desteği kanıtlamaz. Sonucu değerlendirirken bu yerleşim durumlarını ayrı ele alın.

Dosyayı sayfanız için önemli olan Mac tarayıcılarında test edin. Dar ve geniş pencereler kullanın, ardından sayfa metnini büyütüp testi tekrarlayın. Satır sayısını değişken kabul edin; kabul koşulunuz, her tarayıcının gerçekten oluşturduğu parçaların tutarlı dolguya sahip olmasıdır.

Bir ortam iki bildirimi de tanımıyorsa her satıra klonlama geliştirmesi kullanılamaz. Temel metin ve arka planı kullanılabilir durumda tutun ya da tek bir dikdörtgen arka plan tasarım gereksinimini karşılıyorsa dolgulu blok görünümünü seçin. Bu görünümü değiştirir; dolayısıyla bilinçli bir tasarım tercihi olmalıdır.

Üst üste binen arka planları ve garip satır sarmalarını nasıl önlersiniz?

Dolgu ve satır aralığı farklı sorunları çözer. Normal bir satır içi kutuda üst ve alt dolgu, çevredeki içeriği uzaklaştırmadan boyalı alanı genişletebilir. Bu nedenle dikey dolguyu artırmak, bitişik vurgulu satırların üst üste binmesine yol açabilir. MDN bu satır içi kutu davranışını açıkça belgeler. Satır içi dolguyu ve çevresindeki içeriği inceleyin.

Başlığın line-height değerini vurgunun dikey dolgusuyla birlikte ayarlayın. Örnek, özellikle geniş tutulmuş bir 1.65 başlangıç değeri kullanır. Aralıklar fazla geliyorsa değeri azar azar düşürün ve her seferinde en dar yerleşimi kontrol edin. Her yazı tipi ve dekorasyon için uygun tek bir aralık değeri yoktur.

Daha fazla CSS değiştirmeden önce nedeni belirlemek için şu tanılama sırasını kullanın:

Gördüğünüz Önce kontrol edin Sonraki işlem
Dolgu yalnızca ifadenin en başında ve sonunda var Dekorasyon davranışı Vurgulanan satır içi öğeye clone bildirimlerinin ikisini de uygulayın.
Tek büyük arka plan dikdörtgeni Arka planın hangi öğeye ait olduğu Arka planı ve dolguyu iç satır içi span’e taşıyın.
Vurgulu satırlar dikey olarak birbirine değiyor Dikey dolgu ve üst öğenin satır yüksekliği Dikey dolguyu azaltın ya da satır yüksekliğini artırın.
Uzun bir etiket kapsayıcının dışına taşıyor Mevcut satır sarma fırsatları Aşağıdaki isteğe bağlı uzun belirteç kuralını değerlendirin.
Yalnızca Safari’de uç dolgusu istenen gibi görünmüyor Önekli bildirim -webkit-box-decoration-break: clone bildiriminin stil sayfasında bulunduğunu doğrulayın.

AmberTileSequenceAmberTileSequence gibi bölünemeyen örnek bir etiket için .sample-title öğesine overflow-wrap: anywhere ekleyebilirsiniz. Bu, mevcut kurala eklenecek isteğe bağlı bir CSS parçasıdır; örneğin geri kalanı aynı kalır.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Bu, başka türlü bölünemeyen bir dizenin taşmayı önlemek için gerektiğinde tire eklemeden bölünmesine olanak tanır. Satır sarma fırsatlarını düzenler; dolgu oluşturmaz. Boşluk içeren sıradan ifadeler buna ihtiyaç duymayabilir. MDN, overflow-wrap koşullarını belgeler.

Arka planın kendisini de değerlendirin. clone ile arka planlar her parça için bağımsız çizilir; dolayısıyla bir gradyan ya da arka plan görseli her satırda yeniden başlayabilir. Tekrarlanan görsel desen olmadan tekdüze bir vurgu istiyorsanız düz renk kullanın. W3C, bağımsız parça arka planlarını açıklar.

Doğal metin akışını ve biçimlendirme sınırlarını koruyun

Bugün görünen satırlar için ayrı sarmalayıcılar oluşturmak yerine, amaçlanan ifadenin tamamının çevresine tek bir sarmalayıcı kullanın. Böylece biçimlendirme, geçerli pencere genişliğinden ve yazı tipi seçiminden bağımsız kalır.

Efekti taklit etmek için bir sözcüğü dolgulu karakter aralıklarına bölmekten kaçının. CSS Text belirtimi, sıfırdan farklı satır içi eksen dolgusu, kenarlık ya da kenar boşlukları bitişik tipografik karakter birimlerini ayırdığında, biçimlendirmenin satır içi sınırların ötesinde kesilmesini gerektirir. Bu nedenle bir sözcüğün içindeki dolgulu sınır gliflerin biçimlendirilmesini etkileyebilir. W3C’nin sınırları aşan biçimlendirme kurallarına bakın.

Bu başlıkta sarmalayıcıyı ifadenin sınırlarına yerleştirin ve iç metni kesintisiz bırakın. Bunun pratik yararı, ifadenin içine ek dolgulu sınırlar koymaktan kaçınmanızdır. Bu, farklı tarayıcı ve yazı tiplerinde gliflerin ya da satır sonlarının aynı olacağını garanti etmez; kullanmayı düşündüğünüz gerçek görünümü inceleyin.

Projede Tailwind CSS kullanılıyorsa ne yapılmalı?

Mevcut bir Tailwind projesinde, vurgulu arka plana ve dolguya zaten sahip olan satır içi öğeye box-decoration-clone ekleyin. Tailwind’in güncel belgeleri bu yardımcı sınıfı box-decoration-break: clone olarak eşler. box-decoration-slice yardımcı sınıfı diğer davranışı seçer. Tailwind’in box-decoration-break yardımcı sınıflarına bakın.

Düz CSS örneğindeki tarayıcı gereksinimini koruyun: Safari desteğinin gerektiği yerde oluşturulan stil sayfasında önekli bildirimi kontrol edin ve yoksa projenin özel CSS’iyle ekleyin. Yardımcı sınıf dekorasyon davranışını seçer; tarayıcı uygulamasının sınırlarını ortadan kaldırmaz.

Bu efekt için Tailwind’i projeye eklemeniz gerekmez. Eksiksiz yerel örnek gerekli CSS’i zaten içerir.

Özel bir vurgu aynı dolguyu kullanabilir mi?

::highlight() ile biçimlendirilen bir CSS Custom Highlight API aralığı, biçimlendirilmiş satır içi öğeden farklı yeteneklere sahiptir. MDN; metin rengi, arka plan rengi ve metin dekorasyonları dâhil, izin verilen özellikleri listeler. Dolgu ve box-decoration-break bu listeye dâhil değildir. Özel vurgu biçimlendirmesine ilişkin belgelenmiş sınırları okuyun.

Biçimlendirmeyi denetliyorsanız ve satırlara sarılan her satırda gerçek dolguya ihtiyacınız varsa yukarıda gösterildiği gibi satır içi bir sarmalayıcı kullanın. Sarmalayıcılar olmadan aralık tabanlı vurgulamayı korumanız gerekiyorsa desteklenen renk ve dekorasyon özelliklerini kullanın ve bu API’nin dolgulu parça kutuları sağlamadığını kabul edin.

Satırlara sarılan bir sayfa başlığı ya da ifade için tek bir satır içi sarmalayıcı kullanın, arka planla dolguyu birlikte uygulayın ve clone bildirimlerinin ikisini de ekleyin. Son olarak farklı genişliklerde test edin ve dikey aralığı kontrol edin. Bu kontroller, vurgunun yalnızca elverişli bir pencere boyutunda değil, gerçek metin akışıyla da çalışıp çalışmadığını gösterir.

Kaynaklar