Tata letak seperti majalah untuk web dengan wilayah dan pengecualian CSS

Christian Cantrell
Christian Cantrell
X Halaman Beranda

Pengantar

Web adalah platform yang sangat canggih untuk teks, sebuah area yang memiliki banyak pengalaman dan keahlian Adobe. Saat Adobe mencari cara untuk membantu memajukan web, meningkatkan kemampuan teks web lebih jauh tampaknya merupakan tempat yang jelas untuk memulai. Web biasanya mengasumsikan orientasi vertikal satu kolom untuk teks. Meskipun Anda dapat mengalirkan teks di sekitar grafik, dan bahkan memformat teks ke dalam beberapa kolom dengan CSS, masih sangat sulit untuk mencapai tata letak seperti majalah yang sebenarnya di web. Dengan Wilayah CSS dan Pengecualian CSS, Adobe mempelopori upaya untuk menghadirkan kecanggihan desktop publishing ke browser modern. Misalnya, pada screenshot di bawah, CSS Exclusions digunakan untuk mengalirkan teks di sepanjang kontur gunung:

Contoh Pengecualian CSS yang diterapkan
Contoh penerapan Pengecualian CSS

Dokumen dalam screenshot di bawah juga menggunakan CSS Exclusions untuk memungkinkan teks melingkari bentuk dalam gambar, serta CSS Regions untuk memformat teks ke dalam kolom dan di sekitar kutipan menarik:

Contoh cara kerja Wilayah CSS
Contoh cara kerja Region CSS

Wilayah CSS

Sebelum membahas detail Region CSS, saya ingin membahas cara mengaktifkan region di Google Chrome. Setelah mengaktifkan Wilayah CSS, Anda dapat mencoba beberapa contoh yang dirujuk dalam artikel ini, dan membuat contoh Anda sendiri.

Mengaktifkan Wilayah CSS di Google Chrome

Mulai Chrome versi 20 (versi 20.0.1132.57, tepatnya), Wilayah CSS diaktifkan melalui antarmuka chrome://flags. Untuk mengaktifkan Wilayah CSS, ikuti langkah-langkah berikut:

  1. Buka tab atau jendela baru di Chrome.
  2. Ketik chrome://flags di kolom lokasi.
  3. Gunakan temukan di halaman (control/command + f) dan telusuri bagian "fitur Platform Web eksperimental".
  4. Klik link Aktifkan.
  5. Klik tombol Relaunch Now di bagian bawah.

Untuk mengetahui informasi selengkapnya tentang flag Chrome, lihat postingan blog saya tentang Semua Tentang Flag Chrome.

Setelah meluncurkan kembali browser, Anda dapat mulai bereksperimen dengan Region CSS.

Ringkasan Region CSS

Region CSS memungkinkan blok teks yang diberi markup secara semantik mengalir secara otomatis ke "kotak" (saat ini elemen). Diagram di bawah menunjukkan pemisahan teks (alur) dan kotak (wilayah tempat teks mengalir):

Konten mengalir ke wilayah yang ditentukan
Konten mengalir ke wilayah yang ditentukan

Mari kita lihat kasus penggunaan CSS Regions yang sebenarnya. Selain menjadi developer di Adobe, saya juga seorang penulis fiksi ilmiah. Saya sering memublikasikan karya saya secara online dengan lisensi Creative Commons, dan agar dapat berfungsi di jumlah perangkat dan browser maksimum, saya sering menggunakan format yang sangat sederhana seperti ini:

Contoh Project Warisan Manusia Tanpa Gaya
Contoh Project Human Legacy Tanpa Gaya

Dengan menggunakan Region CSS, saya dapat menciptakan pengalaman yang lebih menarik secara visual, dan jauh lebih fungsional karena lebih mudah dijelajahi dan lebih nyaman dibaca:

Human Legacy Project yang menampilkan Wilayah
Project Warisan Manusia dengan Wilayah.

Untuk tujuan demonstrasi, saya menambahkan kemampuan untuk menampilkan Wilayah CSS dalam prototipe ini. Screenshot di bawah menunjukkan cara pengaturan region sehingga memberikan kesan sebagai kolom yang melingkari grafik dan kutipan di bagian tengah:

Human Legacy Project yang menampilkan Wilayah
Human Legacy Project yang menampilkan Wilayah

Anda dapat bereksperimen dengan prototipe ini (serta melihat kode sumbernya) di sini. Gunakan tombol panah untuk bernavigasi, lalu tekan tombol Esc untuk menampilkan wilayah. Prototipe sebelumnya juga tersedia di sini.

Membuat Alur Bernama

CSS yang diperlukan untuk membuat blok teks mengalir melalui region sangat sederhana. Cuplikan di bawah menetapkan alur bernama "article" ke div dengan ID "content", dan menetapkan alur bernama "article" yang sama ke elemen apa pun dengan class "region". Hasilnya adalah teks yang terdapat di dalam elemen "content" akan otomatis mengalir melalui elemen apa pun dengan class "region".

<!DOCTYPE html>
<html>
<head>
    <style>
    #content {
        { % mixin flow-into: article; % }
    }

    .region {
        { % mixin flow-from: article; % }
        box-sizing: border-box;
        position: absolute;
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    #box-a {
        border: 1px solid red;
        top: 10px;
        left: 10px;
    }

    #box-b {
        border: 1px solid green;
        top: 210px;
        left: 210px;
    }

    #box-c {
        border: 1px solid blue;
        top: 410px;
        left: 410px;
    }
    </style>
</head>
<body>
    <div id="box-a" class="region"></div>
    <div id="box-b" class="region"></div>
    <div id="box-c" class="region"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
    </div>
</body>
</html>

Hasilnya akan terlihat seperti ini:

Hasil kode di atas
Hasil kode di atas

Perhatikan bahwa teks di dalam div "content" tidak memiliki pengetahuan tentang presentasinya. Dengan kata lain, data dapat tetap utuh secara semantik meskipun mengalir melalui berbagai region. Selain itu, karena region hanyalah elemen, region diposisikan dan diukur menggunakan CSS seperti elemen lainnya, sehingga sangat kompatibel dengan prinsip desain responsif. Menetapkan elemen sebagai bagian dari alur yang dinamai berarti teks yang ditentukan akan otomatis mengalir melalui elemen tersebut.

Model Objek CSS

CSS Object Model, atau CSSOM, menentukan JavaScript API untuk menggunakan CSS. Berikut adalah daftar API baru yang terkait dengan Region CSS:

  • document.webkitGetNamedFlows(): Fungsi yang menampilkan kumpulan alur bernama yang tersedia dalam dokumen.
  • document.webkitGetNamedFlows().namedItem("article"): Fungsi yang menampilkan referensi ke alur bernama tertentu. Argumen sesuai dengan nama yang ditentukan sebagai nilai properti CSS flow-into dan from-from. Untuk mendapatkan referensi ke alur bernama yang ditentukan dalam cuplikan kode di atas, Anda harus meneruskan string "article".
  • WebKitNamedFlow: Representasi objek dari floe bernama dengan properti dan fungsi berikut:
    • firstEmptyRegionIndex: Nilai bilangan bulat yang mengarah ke indeks region kosong pertama yang terkait dengan alur yang dinamai. Lihat getRegions() di bawah untuk mempelajari cara mendapatkan kumpulan region.
    • name: Nilai string dengan nama alur.
    • overset: Properti boolean yang:
      • false jika konten alur yang dinamai sesuai dengan wilayah terkait
      • true jika konten tidak muat dan lebih banyak wilayah diperlukan untuk memuat semua konten.
    • getContent(): Fungsi yang menampilkan koleksi dengan referensi ke node yang mengalir ke alur yang dinamai.
    • getRegions(): Fungsi yang menampilkan koleksi dengan referensi ke region yang menyimpan konten alur yang dinamai.
    • getRegionsByContentNode(node): Fungsi yang menampilkan referensi ke region yang berisi node yang ditentukan. Hal ini sangat berguna untuk menemukan region yang berisi hal-hal seperti anchor bernama.
  • webkitregionoversetchange. Peristiwa ini dipicu di WebkitNamedFlow setiap kali tata letak konten terkait berubah karena alasan apa pun (konten ditambahkan atau dihapus, ukuran font berubah, bentuk wilayah berubah, dll.) dan menyebabkan properti webkitRegionOverset wilayah berubah. Peristiwa ini berguna untuk memproses perubahan tata letak kasar. Ini adalah indikator bahwa ada sesuatu yang penting terjadi dan tata letak mungkin perlu diperhatikan, seperti: lebih banyak region diperlukan, beberapa region mungkin kosong, dll.
  • webkitregionfragmentchange. Tidak diterapkan pada saat pengeditan ini. Peristiwa ini dipicu di WebkitNamedFlow setiap kali tata letak konten terkait berubah karena alasan apa pun, mirip dengan webkitregionoversetchange, tetapi terlepas dari perubahan apa pun pada properti webkitRegionOverset. Peristiwa ini berguna untuk memproses perubahan tata letak terperinci yang tidak selalu memengaruhi seluruh tata letak alur yang dinamai, misalnya: konten berpindah dari satu region ke region lain, tetapi keseluruhan konten masih sesuai di semua region.
  • Element.webkitRegionOverset: Elemen menjadi region saat properti CSS flow-from ditetapkan. Elemen ini memiliki properti webkitRegionOverset yang, jika merupakan bagian dari alur bernama, menunjukkan apakah konten dari alur meluap ke wilayah atau tidak. Kemungkinan nilai webkitRegionOverset adalah:
    • "overflow" jika ada lebih banyak konten daripada yang dapat ditampung region
    • "fit" jika konten berhenti sebelum akhir wilayah
    • "kosong" jika konten belum mencapai wilayah

Salah satu penggunaan utama CSSOM adalah memproses peristiwa webkitregionoversetchange dan menambahkan atau menghapus region secara dinamis untuk mengakomodasi jumlah teks yang bervariasi. Misalnya, jika jumlah teks yang akan diformat tidak dapat diprediksi (mungkin dibuat pengguna), jika ukuran jendela browser diubah, atau jika ukuran font berubah, Anda mungkin perlu menambahkan atau menghapus wilayah untuk mengakomodasi perubahan dalam alur. Selain itu, jika ingin mengatur konten ke dalam halaman, Anda memerlukan mekanisme untuk mengubah DOM serta region secara dinamis.

Cuplikan kode JavaScript berikut menunjukkan penggunaan CSSOM untuk menambahkan region secara dinamis sesuai kebutuhan. Perhatikan bahwa untuk memudahkan, kode ini tidak menangani penghapusan wilayah atau menentukan ukuran dan posisi wilayah; kode ini hanya untuk tujuan demonstrasi.

var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);

function onLayoutUpdate(event) {
    var flow = event.target;
    
    // The content does not fit
    if (flow.overset === true) {
    addRegion();
    } else {
    regionLayoutComplete();
    }
}

function addRegion() {
    var region = document.createElement("div");
    region.style = "flow-from: article";
    document.body.appendChild(region);
}

function regionLayoutComplete() {
    // Finish up your layout.
}

Demo lainnya tersedia di halaman contoh Wilayah CSS.

Template Halaman CSS

Memanfaatkan CSSOM mungkin adalah cara paling canggih dan fleksibel untuk menerapkan hal-hal seperti penomoran halaman dan tata letak responsif, tetapi Adobe telah menggunakan alat penerbitan desktop dan teks cukup lama untuk mengetahui bahwa desainer dan developer juga menginginkan cara yang lebih mudah untuk mendapatkan kemampuan penomoran halaman yang relatif umum. Oleh karena itu, kami sedang mengerjakan proposal yang disebut Template Halaman CSS yang memungkinkan perilaku paging ditentukan sepenuhnya secara deklaratif.

Mari kita lihat kasus penggunaan umum untuk Template Halaman CSS. Cuplikan kode di bawah menunjukkan penggunaan CSS untuk membuat dua alur bernama: "article-flow" dan "timeline-flow". Selain itu, kode ini menentukan pemilih ketiga yang disebut "combined-articles" yang berisi dua alur. Penyertaan sederhana properti overflow-style di dalam pemilih "combined-articles" menunjukkan bahwa konten harus otomatis diberi nomor halaman di sepanjang sumbu x, atau secara horizontal:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

Setelah alur ditentukan dan perilaku overflow yang diinginkan telah ditetapkan, kita dapat membuat template halaman itu sendiri:

@template {
    @slot left {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }

    @slot time {
    width: 25%;
    float: left;
    { % mixin flow-from: timeline-flow; % }
    }

    @slot right {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }
}

Template halaman ditentukan menggunakan sintaksis "at" baru. Dalam cuplikan kode di atas, kita menentukan tiga slot, masing-masing sesuai dengan kolom. Teks dari "alur-artikel" akan mengalir melalui kolom di sebelah kiri dan kanan, dan teks dari "alur-linimasa" akan mengisi kolom di tengah. Hasilnya mungkin akan terlihat seperti ini:

Contoh template halaman
Contoh template halaman

Perhatikan bahwa teks artikel -- teks di kolom kiri dan kanan -- adalah dalam bahasa Inggris, dan linimasa di tengah adalah dalam bahasa Jerman. Selain itu, halaman dokumen di-scroll secara horizontal tanpa memerlukan kode JavaScript. Semuanya dilakukan secara deklaratif di CSS.

Template Halaman CSS masih berupa proposal, tetapi kami memiliki prototipe yang menggunakan "shim" JavaScript (alias polyfill) agar Anda dapat bereksperimen dengan template tersebut sekarang.

Untuk mempelajari lebih lanjut Region CSS secara umum, lihat halaman Region CSS di html.adobe.com.

Pengecualian CSS

Untuk mendapatkan tata letak seperti majalah yang sebenarnya, Anda tidak cukup hanya dapat mengalirkan teks melalui region. Elemen penting dari desktop publishing berkualitas tinggi dan menarik secara visual adalah kemampuan untuk membuat teks mengalir di sekitar atau di dalam grafik dan bentuk yang tidak beraturan. CSS Exclusions menghadirkan kualitas produksi tingkat ini ke web.

Screenshot di bawah ini berasal dari prototipe CSS Exclusions, dan menampilkan teks yang mengalir secara dinamis di sekitar jalur yang cocok dengan kontur formasi batu besar:

Contoh Pengecualian CSS yang diterapkan
Contoh penerapan Pengecualian CSS

Kebalikan dari hal ini diilustrasikan dalam screenshot berikutnya: teks mengalir di dalam poligon berbentuk tidak beraturan:

Teks mengalir ke poligon berbentuk tidak beraturan
Teks mengalir ke poligon berbentuk tidak beraturan

Langkah pertama agar dapat mengalirkan teks di sekitar atau di dalam bentuk arbitrer adalah mengembangkan dan mengoptimalkan algoritma yang diperlukan. Adobe saat ini sedang mengerjakan implementasi yang akan dikontribusikan langsung ke WebKit. Setelah dioptimalkan, algoritma ini akan menjadi dasar untuk membangun sisa Pengecualian CSS.

Untuk informasi selengkapnya tentang CSS Exclusions, lihat halaman CSS Exclusions di html.adobe.com, dan untuk melihat lebih detail pekerjaan Adobe pada teknologi yang mendasari CSS Exclusions, lihat postingan blog Hans Muller berjudul Kotak Horizontal: Persimpangan Poligon untuk CSS Exclusions.

Status Saat Ini untuk Wilayah CSS dan Pengecualian CSS

Pertama kalinya saya berbicara tentang Wilayah CSS dan Pengecualian CSS secara publik adalah di Adobe Developer Pod di Google I/O 2011. Saat itu, saya menampilkan demo di browser prototipe kustom kami sendiri. Penerimaan sangat antusias, tetapi ada rasa kecewa yang nyata ketika penonton menemukan bahwa tidak ada fungsi yang saya tampilkan yang tersedia di browser utama.

Saya kembali ke Google I/O tahun ini (2012), kali ini sebagai presenter bersama rekan kerja saya Vincent Hardy dan Alex Danilo dari Google (Anda dapat menonton presentasinya di sini). Hanya setahun kemudian, sekitar 80% spesifikasi CSS Regions telah diimplementasikan di WebKit, dan sudah ada di Google Chrome versi terbaru (perhatikan bahwa CSS Regions saat ini harus diaktifkan melalui chrome://flags). Dukungan awal untuk CSS Regions bahkan telah hadir di Chrome untuk Android:

Wilayah di Chrome untuk Android
Wilayah di Chrome untuk Android

Selain itu, Wilayah CSS dan Pengecualian CSS diterapkan di pratinjau Internet Explorer 10, dan saat ini ada di roadmap Mozilla 2012 untuk Firefox. Versi utama Safari berikutnya akan mendukung sebagian besar spesifikasi Region CSS, dan update berikutnya akan menyertakan sisanya.

Berikut adalah linimasa mendetail tentang progres yang telah kami buat dengan Wilayah CSS dan Pengecualian CSS sejak proposal awal kami ke W3C pada April 2011:

Progres Region dan Pengecualian
Progres Pengecualian dan Region

Kesimpulan

Adobe memiliki banyak pengalaman dengan teks, font, dan desktop publishing secara umum melalui alat seperti InDesign. Meskipun web sudah menjadi platform yang sangat canggih untuk teks, kami ingin menggunakan pengetahuan dan pengalaman kami untuk mendorong presentasi teks lebih jauh lagi. Wilayah CSS dan Pengecualian CSS memungkinkan konten tetap terstruktur secara semantik sekaligus memungkinkan tata letak seperti majalah yang sebenarnya, dan pada akhirnya web yang jauh lebih ekspresif.