<br> etiketleriyle ayrılmış ve satır kaydırılan öğelere asılı girinti vermek için blok kapsayıcılarına text-indent: 2em hanging each-line uygulayın. Her iki anahtar sözcüğün de desteklendiğini kontrol edin; eski tarayıcılar önemliyse her öğeyi kendi bloğuna alın ve negatif girintiyle birlikte dolgu kullanın.

Bu kılavuz, her öğenin sol kenardan başlamasını, devam satırlarının ise daha içeriden başlamasını isteyen ve Mac'te küçük bir HTML sayfasını düzenleyen kişiler içindir. Örneklerde yapay metin kullanılır; yalnızca düz metin veya kod düzenleyici ve bir tarayıcı gerekir.

Satır sonu etiketi sonrasında normal asılı girinti neden işe yaramaz?

Dikkate alınması gereken iki farklı satır sonu türü vardır. <br> açık bir satır sonu oluşturur. Yumuşak satır kaydırma, tarayıcı metni kullanılabilir genişliğe sığdırdığında gerçekleşir. İstediğiniz düzende ilki yeni bir öğenin başlangıcı, ikincisi ise devam satırı olarak değerlendirilir. WHATWG, <br> etiketini satır sonu olarak tanımlar; bu etiket yeni bir paragraf ya da öğe kapsayıcısı oluşturmaz. HTML Standard: The br element.

Düz bir negatif text-indent, bloğun ilk biçimlendirilmiş satırını etkiler. Bu nedenle dolgu eklemek o blok için asılı girinti oluşturabilir, ancak her <br> sonrasında dışa taşmayı yeniden başlatmaz. Sonraki öğeler hâlâ aynı bloğa aittir. MDN: text-indent.

CSS belirtimi burada gereken birleşimi tanımlar: each-line ilk satırı ve zorunlu satır sonlarının hemen ardından gelen satırları kapsar; hanging bu seçimi tersine çevirir. Birlikte kullanıldıklarında, açıkça başlatılan her satırı kenarda bırakırken yumuşak satır kaydırmayla oluşan devam satırlarını girintilerler. W3C: First Line Indentation.

Hedeflenen görünüm şöyledir. Aşağıdaki satır sonları örnek amaçlıdır; tarayıcı gerçek kaydırma noktalarını kullanılabilir genişliğe ve yazı tipi ölçülerine göre belirler.

Öğe A dış kenardan başlar ve devam eder
    kullanılabilir genişlik dolduğunda içeriye kayar.
Öğe B de dış kenardan başlar ve kendi girintili
    devam satırına sahiptir.
Öğe C kısadır.

Sayfayı değiştirmeden önce bir yöntem seçin

Yaklaşımınızı mevcut işaretlemeye ve tarayıcı gereksinimlerine göre seçin. Bu karar tablosu, belgelenmiş girinti davranışına ve tarayıcı destek verilerine dayanır; ayrı bir tarayıcı özelliği değil, uygulama yardımcısıdır.

Durumunuz Önerilen yaklaşım
Açık satır sonları tek bir metin parçasının parçasıdır ve desteklenen tarayıcılar yeterlidir Satır sonlarını koruyun ve hanging each-line kullanın
Öğeler ayrı paragraflar veya liste öğeleridir Her öğeye uygun yapısal işaretleme verin
Eski tarayıcıların da asılı girintiyi göstermesi gerekir Dolgu ve negatif girintiyle her öğe için bir blok kullanın
Yalnızca CSS'yi düzenleyebiliyorsunuz ve eski bir tarayıcı anahtar sözcükleri desteklemiyor Okunaklı, girintisiz düzeni koruyun veya işaretlemenin değiştirilmesini isteyin

Temel text-indent desteğinden anahtar sözcüklerin desteklendiği sonucunu çıkarmayın. MDN'nin güncel uyumluluk verileri, hem hanging hem de each-line için Safari 15, Firefox 121 ve Chrome 146'dan itibaren destek listeliyor. Eski kurulumlar sıradan girintiyi destekleyip bu birleşimi reddedebilir. MDN browser compatibility data: text-indent.

Ayrıca satır sonlarının doğru yapıyı ifade edip etmediğini kontrol edin. WHATWG, <br> etiketini içeriğe ait satır sonları için ayırır ve bir paragraf içindeki tematik grupları ayırmak için kullanılmaması gerektiğini belirtir. Ayrı paragraflar paragraf öğeleri içinde yer almalıdır; öğe koleksiyonlarında ise liste işaretlemesi kullanılmalıdır. HTML Standard: The br element, HTML Standard: Grouping content.

Yerel CSS çözümüyle satır sonu etiketlerini koruyun

Aşağıdaki tam HTML belgesi, satır sonlarını koruyan yöntemi gösterir. Mac'inizde bunu düz metin veya kod düzenleyiciye yapıştırın, hanging-indent.html olarak kaydedin ve dosyayı tarayıcıda açın. Zengin metin belgesi yerine HTML dosyası kullanın.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

@supports koşulu, uygulamadan önce bildirimin tamamını kontrol eder. Bu birleşimi desteklemeyen tarayıcılar, açıkça tanımlanmış kenara hizalı düzeni korur. Özellik sorguları, tarayıcı desteğine göre CSS'yi koşullu olarak uygular. MDN: @supports.

Girintiyi metni içeren blok olan .entries öğesine uygulayın. İlgili özellik blok kapsayıcılarına uygulanır; bildirimi <br> etiketine koymak, sonraki öğe için bir kapsayıcı sağlamaz. MDN: text-indent.

2em değeri ayarlanabilir bir tasarım tercihidir. Dar düzeni kontrol ettikten sonra daha küçük veya büyük bir değer deneyin. Bu değer tutarlı bir devam girintisi oluşturur; Entry A: metninin genişliğini ölçmez ve değişken uzunluktaki bir etiketin ardından metni otomatik olarak ilk sözcüğün altına hizalamaz.

Her tarayıcıda girinti gerekiyorsa ayrı bloklar kullanın

Her öğe bağımsız bir paragrafsa, işaretlemeyi her öğenin kendi ilk satırı olacak şekilde değiştirin. Aşağıdaki tam alternatif, ayırıcı satır sonlarını kaldırır ve geleneksel asılı girinti hesabını her paragrafa ayrı ayrı uygular.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

Dolgu, paragrafın içerik başlangıcını 2em içeri taşır. Negatif girinti yalnızca ilk satırı aynı miktarda geriye alır. Kaydırılan satırlar dolguyla belirlenen başlangıç konumunda kalır. Eşit değerler önemlidir: yalnızca birini değiştirmek ilk satırın nerede başlayacağını değiştirir. Negatif girinti MDN'de belgelenmiştir; padding-inline-start ise mantıksal başlangıç kenarına dolgu ekler. MDN: text-indent, MDN: padding-inline-start.

Örnek olarak yazı tipi boyutu 16 piksel olduğunda 2em girinti 32 piksele karşılık gelir: devam satırı 32 piksel içeriden başlar ve ilk satır ayarı −32 pikseldir. Bu, örnek için yapılan bir hesaplamadır; ölçülmüş bir görüntüleme sonucu değildir.

Bu yapıya geçerken eski ayırıcıları kaldırın. Her öğenin tümünü ve mevcut satır içi biçimlendirmesini yeni paragrafının içinde tutun. İçerik bir listeyse bunun yerine liste öğeleri kullanın; paragraf örneği özellikle bağımsız paragraflar içindir. HTML Standard: Grouping content.

Bitirmeden önce satır kaydırmayı ve metin akışını kontrol edin

Her iki uzun öğenin de satır kaydırdığı bir genişlikte sayfayı test edin. Ardından öğeler tek satıra sığana kadar pencereyi genişletin. Girinti sorununu satır kaydırma veya yapı sorunundan ayırt etmek için aşağıdaki kontrolleri kullanın.

  1. Her öğenin başlangıcını kontrol edin. Satır sonlarını koruyan örnekte, her <br> sonrasındaki metin dış kenara dönmelidir. Dönmüyorsa anahtar sözcüklerin tamamından oluşan birleşimin desteklenip desteklenmediğini kontrol edin.
  2. Her devam satırını kontrol edin. Uzun öğeler içeriden başlamalıdır. Kısa öğeler başında fazladan boşluk olmadan kenarda kalmalıdır.
  3. Hedeflenen en dar sütunu kontrol edin. Girinti kullanılabilir satır genişliğinin fazla bir kısmını kaplıyorsa azaltın.
  4. Gerçek içeriği kontrol edin. İçeriği ayrı bir bloğa taşırken her öğenin sözcüklerini, satır içi vurgularını ve amaçlanan açık satır sonlarını koruyun.

Hiçbir şey kaymıyorsa white-space ayarını inceleyin. Örnekte, kaynak boşluklarını daraltan ve satır kaydırmaya izin veren normal kullanılır. pre boşlukları korur ancak olağan yumuşak satır kaydırmayı önler; pre-wrap ise boşlukları korurken kaydırmaya izin verir. Hiç oluşmayan bir devam satırında girinti görünür hâle gelemez. MDN: white-space.

Girintiyi taklit etmek için boşluk eklemeyin. white-space: normal altında birden fazla boşluk daraltılır. Geçerli pencere boyutunda kaydırmanın gerçekleştiği yerlere fazladan satır sonu etiketleri eklemekten de kaçının: bu, tarayıcının seçtiği devam noktalarını açık başlangıçlara dönüştürerek each-line ayarının bunları ele alış biçimini değiştirir. MDN: white-space, W3C: First Line Indentation.

Satır sonlarını ve glif şekillendirmesini tarayıcının yönetmesine izin verin. Görünen satırları hesaplamak için bir öğeyi karakter sarmalayıcılarına bölmeyin. W3C, karakterler arasında sıfırdan farklı satır içi dolgu, kenarlık veya kenar boşluğu bulunduğu durumlar da dahil, satır içi sınırların şekillendirmeyi kesintiye uğrattığı koşulları belgeler. Bu görevde, sözcüklerin içine ek sınırlar sokmamak için öğelerin tamamını amaçlanan sınırlarında kaydırın. W3C: Shaping Across Element Boundaries.

İçeriğinize uygun yapıyla bitirin: anlamlı açık satır sonlarını hanging each-line ile koruyun veya bağımsız öğeleri kendi bloklarına alın. Kullanmayı planladığınız genişliklerde her öğenin kenarda başladığını ve yalnızca doğal satır kaydırmayla oluşan devam satırlarının içeri taşındığını doğrulayın.

Kaynaklar