Untuk mengalirkan satu artikel melalui area bergaya majalah di Mac, gunakan kolom CSS untuk tata letak browser atau kotak teks tertaut di Pages untuk area yang posisinya bebas. CSS Regions menjelaskan aliran otomatis di antara kotak browser yang terpisah, tetapi browser desktop saat ini tidak mendukungnya. Kompatibilitas CSS Regions

Panduan ini membantu Anda memilih dan membuat tata letak untuk satu artikel berkelanjutan: teks dimulai di area A, berlanjut di B, lalu berakhir di C. Contoh browser menggunakan teks sintetis dalam dokumen lokal yang Anda kendalikan; contoh ini tidak mengubah situs web publik yang sudah ada.

Bisakah browser secara otomatis mengalirkan teks di antara area yang terpisah?

Draf CSS Regions dari W3C menjelaskan susunan ini secara tepat. Sebuah sumber menyumbangkan konten ke alur bernama menggunakan flow-into, dan kotak tujuan menerimanya menggunakan flow-from. Tujuan-tujuan tersebut membentuk rangkaian sesuai urutan dokumen, sehingga konten dapat berlanjut di antara kotak dengan posisi dan dimensi berbeda. Namun, dokumen yang diterbitkan masih berstatus Draf Kerja tertanggal 9 Oktober 2014. Spesifikasi yang menjelaskan suatu fitur tidak membuktikan ketersediaannya di browser. Modul CSS Regions Level 1

Informasi kompatibilitas terkini mencantumkan CSS Regions sebagai fitur yang tidak didukung di Safari, Chrome, Firefox, dan Edge. WebKit juga mencatat penghapusannya dalam laporan implementasi yang telah diselesaikan. Karena itu, menambahkan deklarasi lama ke halaman modern tidak menyediakan pengaliran artikel yang dapat diandalkan. Kompatibilitas CSS Regions, Hapus dukungan untuk CSS Regions

Mulailah dengan menentukan bagian tata letak yang paling penting. Tiga kolom yang sama, tiga kotak dengan posisi masing-masing, dan tiga halaman cetak memerlukan alat yang berbeda.

Hasil yang diperlukan Cara praktis Batasan
Artikel berkelanjutan dalam kolom browser reguler Tata letak multi-kolom CSS bawaan Kolom berada dalam satu kontainer
Halaman yang dibuat browser untuk cetak atau PDF Paged.js Paginasi memerlukan skrip dan penyiapan dokumennya
Teks yang mengalir melalui kotak berposisi bebas di Mac Kotak teks tertaut di Pages Hasilnya berupa dokumen Pages
Aliran otomatis melalui kotak browser sembarang Implementasi tata letak khusus Fitur CSS Regions yang telah dihentikan tidak dapat menyediakannya

Pilihan ini mengikuti model yang terdokumentasi: MDN menjelaskan kolom yang dihasilkan, Paged.js menjelaskan pemenggalan halaman, dan Apple mendokumentasikan rangkaian kotak teks tertaut. Anggap tabel ini sebagai panduan pengambilan keputusan berdasarkan kemampuan tersebut. Tata letak multi-kolom, Cara kerja Paged.js, Menautkan kotak teks di Pages pada Mac

Membuat artikel browser berkelanjutan dengan kolom CSS

Gunakan cara ini jika kolom reguler sesuai dengan desain. Satukan teks artikel dalam satu kontainer dan biarkan browser menentukan akhir setiap kolom. MDN menjelaskan bahwa tata letak multi-kolom membuat aliran berkelanjutan, tetapi lebar tiap kolom tidak dapat diatur secara terpisah dan setiap kolom tidak dapat diberi warna latar masing-masing. Tata letak multi-kolom

Di Mac, buka TextEdit dan pilih File > New, lalu Format > Make Plain Text. Tempelkan seluruh dokumen di bawah, simpan sebagai article-columns.html, lalu pilih Use .html jika diminta. Langkah-langkah ini sesuai dengan petunjuk Apple untuk membuat file HTML di TextEdit. Bekerja dengan dokumen HTML di TextEdit pada Mac

Berikut dokumen HTML lengkap yang sudah menyertakan semua gaya dan konten contoh. Dokumen ini tidak memerlukan pustaka, sumber jaringan, atau JavaScript. Buka file yang tersimpan di browser untuk memeriksa tata letaknya; hasil render belum diuji di sini.

<!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>

Singkatan columns meminta lebar yang diutamakan sebesar 260 piksel CSS dan maksimal tiga kolom. Browser menentukan jumlah kolom yang muat. Pada lebar konten penuh contoh sebesar 960 piksel, tiga kolom yang dipisahkan oleh dua celah 24 piksel masing-masing memiliki lebar ilustratif (960 − 2 × 24) ÷ 3 = 304 piksel CSS. Perhitungan itu telah diperiksa; angka tersebut bukan hasil pengukuran browser. Tata letak multi-kolom

Judul tetap berada di atas artikel karena letaknya di luar kontainer kolom. Keenam paragraf tetap berada dalam urutan semula di dalamnya. Ubah ukuran jendela browser untuk memeriksa tata letak yang lebih sempit, lalu cari penanda terakhir END-A untuk memastikan Anda dapat mencapai akhir artikel.

Mengatur pengisian kolom tanpa menyembunyikan bagian yang tersisa

Contoh ini membiarkan tinggi artikel tetap otomatis dan menggunakan column-fill: balance. Penyeimbangan berupaya membagi konten ke seluruh kolom. Jika desain Anda mengharuskan satu kolom diisi hingga tinggi tertentu sebelum teks berlanjut, gunakan pengaturan column-fill: auto. MDN mendokumentasikan perbedaan interoperabilitas dan mencatat bahwa Chrome hanya memperhatikan auto jika kontainer memiliki ukuran pada dimensi blok, misalnya tinggi dalam tata letak horizontal ini. column-fill

Tinggi tetap menimbulkan kondisi kegagalan penting: teks berlebih dapat menghasilkan kolom tambahan secara horizontal di luar kontainer. Mengatur tinggi tidak membatasi artikel pada kolom yang terlihat. MDN secara eksplisit mendokumentasikan perilaku luapan ini. Hindari menyembunyikan bagian yang tersisa dengan overflow: hidden. Menangani luapan dalam tata letak multi-kolom

Untuk tata letak membaca, pertahankan tinggi otomatis seperti di atas kecuali kelanjutan horizontal memang disengaja. Jika Anda bereksperimen dengan kolom setinggi tetap, periksa seluruh bentangan horizontal dan periksa kembali penanda akhir setiap kali ukuran font atau lebar berubah. Tampilan layar pertama yang rapi bukan bukti yang cukup bahwa seluruh artikel muat.

Perlakukan jeda paragraf sebagai struktur konten, bukan sebagai penentu akhir kolom. Butir pendek yang dikelompokkan dapat menggunakan break-inside: avoid untuk mencegah pemisahan, sebagaimana ditunjukkan MDN untuk kartu. Menerapkan aturan itu pada setiap paragraf panjang dapat mengurangi keluwesan tata letak, jadi gunakan hanya jika mempertahankan satu unit tertentu membantu pembaca. Tata letak multi-kolom

Bagaimana jika area harus memiliki bentuk atau posisi berbeda?

Pertimbangkan tata letak abstrak dengan area A yang lebar di atas area B yang sempit dan area C terpisah di sudut kanan bawah. Kolom CSS tidak dapat mereproduksi rangkaian sembarang tersebut hanya dengan menempatkan tiga kontainer di halaman. Aliran otomatisnya berada dalam kontainer multi-kolom; draf CSS Regions merupakan mekanisme terpisah yang dimaksudkan untuk menghubungkan kotak tujuan. Tata letak multi-kolom, Modul CSS Regions Level 1

Untuk komposisi desktop Mac yang memerlukan kotak berposisi bebas, Pages menyediakan fitur aliran teks yang terdokumentasi. Mulailah dengan tiga kotak teks yang disusun sebagai A, B, dan C, lalu masukkan seluruh artikel ke kotak pertama. Apple mengizinkan rangkaian dimulai dengan kotak kosong maupun kotak yang sudah berisi teks. Menautkan kotak teks di Pages pada Mac

  1. Pilih kotak A, lalu klik lingkaran putih di bagian atas untuk memulai rangkaian.
  2. Pilih setiap kotak tujuan yang kosong dan klik lingkaran putihnya untuk menggabungkannya ke rangkaian. Periksa warna lingkaran dan nomor urut yang sama.
  3. Untuk memperbaiki urutannya, klik lingkaran sebuah kotak dan pilih nomornya di bawah Layout Order.
  4. Jika kotak terakhir menampilkan indikator pemotongan teks, perbesar kotak atau tambahkan kotak tertaut lainnya. Kotak yang dikunci atau dikelompokkan tidak dapat ditautkan. Menautkan kotak teks di Pages pada Mac

Memindahkan kotak ke tempat lain di halaman yang sama tidak otomatis mengubah urutan baca rangkaian. Gunakan Layout Order dengan cermat. Dengan begitu, Pages menjadi cara praktis untuk membuat komposisi visual, sekaligus menegaskan bahwa rangkaian kotak teksnya tidak menambahkan fitur ke browser. Menautkan kotak teks di Pages pada Mac

Kapan sebaiknya menggunakan Paged.js atau polyfill Regions?

Pilih Paged.js jika hasil yang diinginkan berupa rangkaian halaman. Dokumentasi resminya menjelaskan chunker yang menempatkan konten pada sebuah halaman, mendeteksi luapan, lalu melanjutkannya ke halaman baru yang dibuat. Ini merupakan model paginasi berbasis browser yang berguna, tetapi dokumentasinya tidak membuktikan adanya pengaliran melalui area layar yang berposisi terpisah-pisah. Cara kerja Paged.js

Penyiapan browser yang terdokumentasi memerlukan HTML dan CSS Anda, skrip Paged.js, server web, dan browser. Prasyaratnya berbeda dari contoh file lokal mandiri di atas. Ikuti panduan penyiapan pustaka tersebut dan periksa halaman yang dihasilkannya sebelum mengekspor. Memulai dengan Paged.js

Untuk keluaran PDF, panduan tersebut menyarankan membuka dialog cetak browser setelah paginasi, memilih keluaran PDF, menghapus margin cetak serta header dan footer browser, dan mengaktifkan grafik latar belakang. Istilah pada kontrol cetak dapat berbeda antarbrowser. Memulai dengan Paged.js

Proyek CSSRegions.js lama dari Adobe lebih langsung menyimulasikan pengaliran antararea, tetapi dokumentasinya sendiri menyebutnya eksperimental dan secara tegas menyarankan agar proyek tersebut tidak digunakan di lingkungan produksi sebagai pengganti dukungan bawaan. Contohnya berguna untuk memahami usulan historis ini, bukan sebagai bukti kemampuan browser saat ini. Polyfill JavaScript CSS Regions

Mempertahankan pembentukan teks browser saat menyesuaikan tata letak

Sebisa mungkin, pertahankan paragraf lengkap sebagai teks browser. Hindari memperkirakan kapasitas area dengan menetapkan jumlah karakter tetap. Spesifikasi teks W3C menjelaskan pembentukan teks lintas batas sebaris dan kondisi yang menyela proses tersebut, termasuk perubahan yang melibatkan jarak, perataan, atau isolasi. Karena itu, memisahkan fragmen teks dan memberinya gaya secara terpisah dapat mengubah lebih dari sekadar posisinya. Modul CSS Text Level 3

Pengukuran teks kanvas juga tidak cukup untuk menangani tata letak artikel. WHATWG menetapkan bahwa measureText() mengembalikan metrik untuk teks yang diberikan, sedangkan fillText() menggambar teks pada koordinat tertentu. Algoritme persiapan teksnya menggunakan kotak baris dengan lebar tak terbatas; lebar maksimum yang diberikan dapat membuat teks disesuaikan dengan lebar tersebut. Operasi ini tidak otomatis melanjutkan paragraf melalui beberapa area DOM. Standar HTML: Canvas

Untuk tugas ini, kolom bawaan mempertahankan peran browser dalam pemenggalan baris dan perenderan teks. Jika area browser sembarang tetap diwajibkan, implementasi khusus perlu memperhitungkan perubahan teks, metrik font, dimensi yang tersedia, dan konten yang belum tertampung. Perlakukan itu sebagai proyek tata letak tersendiri, bukan skrip singkat untuk memisah karakter.

Sebelum menetapkan desain, periksa tampilannya pada jendela lebar, jendela sempit, dan ukuran teks browser yang diperbesar. Ikuti artikel dari paragraf pertama hingga END-A, periksa urutan kelanjutannya, serta cari konten yang terpotong atau bergeser secara horizontal. Gunakan kolom browser jika aliran reguler sesuai dengan kebutuhan, Paged.js jika tujuannya adalah halaman, dan rangkaian Pages jika posisi setiap kotak menentukan komposisi.

Sumber