Mac'te tek bir makaleyi dergi tarzı alanlara akıtmak için tarayıcı düzeninde CSS sütunlarını, serbestçe konumlandırılmış alanlarda ise Pages'teki bağlantılı metin kutularını kullanın. CSS Regions, ayrı tarayıcı kutuları arasında otomatik akışı tanımlıyordu; ancak güncel masaüstü tarayıcılar bunu desteklemiyor. CSS Regions uyumluluğu

Bu kılavuz, tek ve kesintisiz bir makale için düzen seçmenize ve oluşturmanıza yardımcı olur: metin A alanında başlar, B'de devam eder ve C'de biter. Tarayıcı örneği, denetiminizdeki yerel bir belgede yapay metin kullanır; mevcut herkese açık bir web sitesini değiştirmez.

Tarayıcı ayrı metin alanlarını otomatik olarak birbirine bağlayabilir mi?

W3C'nin CSS Regions taslağı tam olarak bu düzeni tanımlar. Bir kaynak, flow-into kullanarak içeriği adlandırılmış bir akışa aktarır; hedef kutular ise içeriği flow-from kullanarak alır. Hedefler, belge sırasına göre bir zincir oluşturur ve içeriğin farklı konum ve boyutlardaki kutular arasında devam etmesini sağlar. Ancak yayımlanmış belge, 9 Ekim 2014 tarihli bir Çalışma Taslağı olarak kalmıştır. Bir özelliği tanımlayan belirtim, tarayıcılarda kullanılabilir olduğunu göstermez. CSS Regions Modül Düzey 1

Güncel uyumluluk bilgilerine göre CSS Regions; Safari, Chrome, Firefox ve Edge'de desteklenmiyor. WebKit de tamamlanmış bir uygulama kaydında özelliğin kaldırıldığını belirtiyor. Bu nedenle eski bildirimleri modern bir sayfaya eklemek, makalelerin güvenilir biçimde birbirine akmasını sağlamaz. CSS Regions uyumluluğu, CSS Regions desteğini kaldırma

Önce, tasarımda hangi özelliğin vazgeçilmez olduğuna karar verin. Üç eşit sütun, ayrı ayrı konumlandırılmış üç kutu ve basılı üç sayfa farklı araçlar gerektirir.

İstenen sonuç Uygun yöntem Sınır
Tarayıcıda düzenli sütunlara akan kesintisiz makale Yerel CSS çok sütunlu düzeni Sütunlar tek bir kapsayıcıya aittir
Yazdırma veya PDF için tarayıcının oluşturduğu sayfalar Paged.js Sayfalama için betiği ve belge kurulumunu gerektirir
Mac'te serbestçe konumlandırılmış kutulara akan metin Pages'te bağlantılı metin kutuları Sonuç bir Pages belgesidir
Tarayıcıda isteğe göre konumlandırılmış kutulara otomatik akış Özel bir düzen uygulaması Artık kullanılmayan CSS Regions özelliği bunu sağlayamaz

Bu seçenekler belgelenmiş modellere dayanır: MDN oluşturulan sütunları, Paged.js sayfa bölünmesini, Apple ise bağlantılı metin kutusu dizilerini açıklar. Tabloyu bu özelliklerden çıkarılmış bir karar yardımı olarak değerlendirin. Çok sütunlu düzen, Paged.js nasıl çalışır?, Mac'te Pages'te metin kutularını bağlama

CSS sütunlarıyla kesintisiz bir tarayıcı makalesi oluşturun

Düzenli sütunlar tasarıma uyuyorsa bu yöntemi kullanın. Makale metnini tek bir kapsayıcıda tutun ve her sütunun nerede biteceğini tarayıcının belirlemesine izin verin. MDN'ye göre çok sütunlu düzen kesintisiz bir akış oluşturur; ancak sütunlara birbirinden farklı genişlikler verilemez ve her birine ayrı arka plan rengi atanamaz. Çok sütunlu düzen

Mac'inizde TextEdit'i açıp Dosya > Yeni, ardından Biçim > Düz Metin Yap seçeneklerini belirleyin. Aşağıdaki belgenin tamamını yapıştırın, article-columns.html olarak 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. Mac'te TextEdit ile HTML belgeleri üzerinde çalışma

Aşağıdaki, tüm stilleri ve örnek içeriği içeren eksiksiz bir HTML belgesidir. Kitaplık, ağ kaynağı veya JavaScript gerektirmez. Düzeni incelemek için kaydettiğiniz dosyayı tarayıcınızda açın; burada görüntüleme sonucu test edilmemiştir.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

columns kısa gösterimi, tercih edilen genişliği 260 CSS pikseli ve sütun sayısı üst sınırını üç olarak belirtir. Kaç sütunun sığacağına tarayıcı karar verir. Örnekteki içerik alanı tam 960 piksel genişliğindeyken, aralarında 24'er piksel boşluk bulunan üç sütunun her biri yaklaşık (960 − 2 × 24) ÷ 3 = 304 CSS pikseli genişliğinde olur. Bu hesap doğrulandı; tarayıcıda ölçüm yapılmadı. Çok sütunlu düzen

Başlık, sütun kapsayıcısının dışında olduğu için makalenin üstünde kalır. Altı paragrafın tamamı, kapsayıcının içinde özgün sıralarını korur. Daha dar düzeni incelemek için tarayıcı penceresini yeniden boyutlandırın, ardından makalenin sonuna ulaşabildiğinizi doğrulamak için END-A son işaretini bulun.

Geri kalanını gizlemeden sütun dolumunu denetleyin

Örnekte makalenin yüksekliği otomatik bırakılmış ve column-fill: balance kullanılmıştır. Dengeleme, içeriği sütunlara dağıtmaya çalışır. Tasarımınız devam etmeden önce bir sütunun belirli bir yüksekliğe kadar doldurulmasını gerektiriyorsa uygun ayar column-fill: auto olur. MDN, tarayıcılar arası uyumluluk farklılıklarını belgeliyor ve Chrome'un auto ayarını yalnızca kapsayıcının blok boyutunda bir boyutu varsa, örneğin bu yatay düzende bir yüksekliği varsa dikkate aldığını belirtiyor. column-fill

Sabit yükseklik önemli bir hata koşulu doğurur: fazla metin, kapsayıcının dışında yatay olarak ek sütunlar oluşturabilir. Yükseklik belirlemek, makaleyi görünür sütunlarla sınırlamaz. MDN bu taşma davranışını açıkça belgeliyor. Artakalan içeriği overflow: hidden ile gizlemekten kaçının. Çok sütunlu düzende taşmayı yönetme

Okuma düzeninde, yatay devam kasıtlı değilse yukarıdaki gibi otomatik yüksekliği kullanın. Sabit yükseklikli sütunları deniyorsanız tüm yatay alanı inceleyin ve yazı tipi boyutunda ya da genişlikte her değişiklikten sonra son işaretini yeniden kontrol edin. İlk ekranın düzgün görünmesi, makalenin tamamının sığdığına kanıt değildir.

Paragraf sonlarını önceden belirlenmiş sütun bitişleri olarak değil, içerik yapısının bir parçası olarak değerlendirin. MDN'nin kartlar için gösterdiği gibi, kısa ve gruplanmış ögelerde break-inside: avoid kullanarak bölünmeyi engellemeye çalışabilirsiniz. Bu kuralı her uzun paragrafa uygulamak düzeni daha az esnek hâle getirebilir; bu nedenle yalnızca belirli bir birimi bir arada tutmak okumayı kolaylaştırıyorsa kullanın. Çok sütunlu düzen

Alanların farklı şekil veya konumlarda olması gerekiyorsa ne yapmalı?

Üstte geniş bir A alanı, altında dar bir B alanı ve sağ alt köşede ayrı bir C alanı bulunan soyut bir düzen düşünün. CSS sütunları, sayfaya üç kapsayıcı yerleştirerek böyle keyfî bir zinciri oluşturamaz. Otomatik akışları çok sütunlu bir kapsayıcıya aittir; hedef kutuları birbirine bağlamak için tasarlanmış ayrı mekanizma CSS Regions taslağıydı. Çok sütunlu düzen, CSS Regions Modül Düzey 1

Serbestçe konumlandırılmış kutuların vazgeçilmez olduğu bir Mac masaüstü düzenlemesi için Pages, belgelenmiş metin akışı özelliğini sunar. A, B ve C olarak düzenlenmiş üç metin kutusuyla başlayın ve makalenin tamamını ilk kutuya yerleştirin. Apple, bir akışın hem boş bir kutuyla hem de içinde zaten metin bulunan bir kutuyla başlatılmasına izin verir. Mac'te Pages'te metin kutularını bağlama

  1. A kutusunu seçin ve akışı başlatmak için üstündeki beyaz daireye tıklayın.
  2. Boş hedef kutuların her birini seçip akışa eklemek için beyaz dairesine tıklayın. Dairelerin renginin aynı olduğunu ve sıra numaralarını kontrol edin.
  3. Sırayı düzeltmek için bir kutunun dairesine tıklayın ve Layout Order altındaki numarasını seçin.
  4. Son kutuda bir kırpılma göstergesi görünüyorsa kutuyu büyütün veya bağlantılı başka bir kutu ekleyin. Kilitli ya da gruplanmış kutular bağlanamaz. Mac'te Pages'te metin kutularını bağlama

Bir kutuyu aynı sayfada başka bir yere taşımak, akışın okuma sırasını otomatik olarak değiştirmez. Layout Order ayarını bilinçli kullanın. Böylece Pages, görsel düzeni oluşturmak için kullanışlı bir yöntem sunarken metin kutusu akışlarının tarayıcıya yeni bir özellik kazandırmadığı da açık kalır. Mac'te Pages'te metin kutularını bağlama

Paged.js veya Regions polyfill'ini ne zaman kullanmalısınız?

Amaçlanan sonuç bir sayfa dizisiyse Paged.js'i seçin. Resmî belgeleri, içeriği bir sayfaya yerleştiren, taşmayı algılayan ve yeni oluşturulan sayfalarda devam ettiren bir parçalayıcıyı açıklar. Bu, tarayıcı tabanlı kullanışlı bir sayfalama modelidir; ancak belgeler, bağımsız konumlandırılmış ekran alanları arasında isteğe göre akış sağladığını göstermez. Paged.js nasıl çalışır?

Belgelenen tarayıcı kurulumu HTML ve CSS'nizi, Paged.js betiğini, bir web sunucusunu ve bir tarayıcıyı gerektirir. Bu, yukarıdaki bağımsız yerel dosya örneğinin ön koşullarını değiştirir. Kitaplığın kurulum kılavuzunu izleyin ve dışa aktarmadan önce oluşturulan sayfaları inceleyin. Paged.js ile çalışmaya başlama

PDF çıktısı için bu kılavuz, sayfalama tamamlandıktan sonra tarayıcının yazdırma iletişim kutusunu açmayı, PDF çıktısını seçmeyi, kenar boşluklarını ve tarayıcı üstbilgi ve altbilgilerini kaldırmayı ve arka plan grafiklerini etkinleştirmeyi önerir. Yazdırma denetimlerinin adları tarayıcıya göre değişebilir. Paged.js ile çalışmaya başlama

Eski Adobe CSSRegions.js projesi, bölgeler arasında metin akışını daha doğrudan taklit eder; ancak kendi belgeleri bunun deneysel olduğunu belirtir ve yerel desteğin yerine üretimde kullanılmamasını açıkça önerir. Örnekleri tarihî öneriyi anlamaya yarar; güncel tarayıcı yeteneklerinin kanıtı değildir. CSS Regions JavaScript Polyfill

Düzeni uyarlarken tarayıcının metin biçimlendirmesini koruyun

Mümkün olduğunda paragrafları eksiksiz biçimde tarayıcı metni olarak tutun. Bir alanın kapasitesini sabit sayıda karakter belirleyerek tahmin etmekten kaçının. W3C'nin metin belirtimi, satır içi sınırlar boyunca biçimlendirmeyi ve aralık, hizalama ya da yalıtımla ilgili değişiklikler dâhil, bunu kesintiye uğratan koşulları açıklar. Bu nedenle metin parçalarını bölmek ve bağımsız biçimlendirmek, konumlarından fazlasını değiştirebilir. CSS Text Modül Düzey 3

Canvas metin ölçümü de makale düzenini oluşturmak için yeterli değildir. WHATWG, measureText() işlevinin verilen metnin ölçülerini döndürdüğünü, fillText() işlevinin ise metni koordinatlarda çizdiğini belirtir. Metin hazırlama algoritması sonsuz genişlikte bir satır kutusu kullanır; verilen bir maksimum genişlik, metnin bu genişliğe sığdırılmasına neden olabilir. Bu işlemler, bir paragrafı birden fazla DOM alanında otomatik olarak devam ettirmez. HTML Standardı: Canvas

Bu görevde yerel sütunlar, satır sonlarını ve metin oluşturmayı tarayıcının yönetmesini sağlar. Tarayıcıda isteğe göre konumlandırılmış alanlar hâlâ zorunluysa özel bir uygulama değişen metni, yazı tipi ölçülerini, kullanılabilir boyutları ve yerleştirilemeyen içeriği hesaba katmalıdır. Bunu kısa bir karakter bölme betiği olarak değil, ayrı bir düzen projesi olarak değerlendirin.

Tasarımı kesinleştirmeden önce geniş ve dar bir pencerede, ayrıca tarayıcı metni büyütülmüş hâlde inceleyin. Makaleyi ilk paragraftan END-A işaretine kadar takip edin, devam sırasını kontrol edin ve kırpılmış ya da yatay olarak yer değiştirmiş içerik olup olmadığına bakın. Düzenli akış için tarayıcı sütunlarını, hedef sayfalarsa Paged.js'i, kutuların tek tek yerleşimi kompozisyonu belirliyorsa Pages akışlarını kullanın.

Kaynaklar