Tata letak seperti majalah untuk web dengan wilayah dan pengecualian CSS

Christian Cantrell

Pengantar

Web adalah platform yang sangat canggih untuk teks, sebuah area yang sangat dikuasai Adobe berkat pengalaman dan keahliannya yang luas. Saat Adobe mencari cara untuk membantu memajukan web, meningkatkan kemampuan teks web lebih jauh lagi tampaknya menjadi tempat yang tepat bagi kami untuk memulai. Web umumnya mengasumsikan satu kolom, orientasi vertikal untuk teks. Meskipun teks dapat mengalir di sekitar grafik, dan bahkan memformat teks menjadi beberapa kolom dengan CSS, masih sangat sulit untuk mencapai tata letak yang benar-benar seperti majalah di web. Dengan CSS Regions dan CSS Exclusions, Adobe mempelopori upaya untuk menghadirkan kecanggihan publikasi desktop ke browser modern. Misalnya, dalam screenshot di bawah, CSS Exclusions digunakan untuk mengalirkan teks di sepanjang kontur gunung:

Contoh penerapan Pengecualian CSS

Dokumen dalam screenshot di bawah juga menggunakan CSS Exclusions untuk memungkinkan teks mengelilingi bentuk dalam gambar, serta CSS Regions untuk memformat teks menjadi kolom dan mengelilingi kutipan:

Contoh Region CSS yang sedang beraksi

Region CSS

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

Mengaktifkan Region CSS di Google Chrome

Mulai Chrome versi 20 (tepatnya versi 20.0.1132.57), CSS Regions diaktifkan melalui antarmuka chrome://flags. Untuk mengaktifkan CSS Regions, 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 "experimental Web Platform features".
4. Klik link Enable.
5. Klik tombol Luncurkan Kembali Sekarang di bagian bawah.

Untuk mengetahui informasi selengkapnya tentang tanda Chrome, lihat postingan blog saya tentang Semua Hal Tentang Tanda Chrome.

Setelah meluncurkan kembali browser, Anda bebas mulai bereksperimen dengan CSS Regions.

Ringkasan Region CSS

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

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 di bawah lisensi Creative Commons, dan agar karya tersebut dapat berfungsi di sebanyak mungkin perangkat dan browser, saya sering menggunakan format yang sangat sederhana seperti ini:

Contoh Project Human Legacy Tanpa Gaya

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

Human Legacy Project dengan Regions.

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

Human Legacy Project menampilkan Region

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

Membuat flow bernama

CSS yang diperlukan untuk membuat blok teks mengalir melalui region sangatlah 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, 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

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 bernama berarti teks yang ditentukan akan otomatis mengalir melaluinya.

CSS Object Model

Catatan: Agar ringkas, bagian ini hanya menggunakan satu awalan vendor (webkit), tetapi Anda harus menulis kode yang berfungsi di seluruh browser yang mendukung fitur ini.

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

• document.webkitGetNamedFlows(): Fungsi yang menampilkan kumpulan alur bernama yang tersedia dalam dokumen.
• document.webkitGetNamedFlows().namedItem("article"): Fungsi yang menampilkan referensi ke flow bernama tertentu. Argumen ini 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 akan 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 bernama. Lihat getRegions() di bawah untuk mempelajari cara mendapatkan kumpulan region.
  • name: Nilai string dengan nama alur.
  • overset: Properti boolean yang:
    • false saat konten alur bernama sesuai dengan region terkait
    • true jika konten tidak muat dan diperlukan lebih banyak region untuk menampung semua konten.
  • getContent(): Fungsi yang menampilkan koleksi dengan referensi ke node yang mengalir ke alur yang disebutkan.
  • getRegions(): Fungsi yang menampilkan koleksi dengan referensi ke region yang menyimpan konten alur bernama.
  • 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 pada 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. Hal ini merupakan indikator bahwa sesuatu yang penting telah terjadi dan tata letak mungkin perlu diperhatikan, seperti: diperlukan lebih banyak region, beberapa region mungkin kosong, dll.
• webkitregionfragmentchange. Belum diterapkan pada saat pengeditan ini. Peristiwa ini dipicu pada 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 yang mendetail yang tidak selalu memengaruhi seluruh tata letak alur bernama, misalnya: konten berpindah dari satu region ke region lain, tetapi konten secara keseluruhan masih sesuai di semua region.
• Element.webkitRegionOverset: Elemen menjadi region jika memiliki properti CSS flow-from yang ditetapkan. Elemen ini memiliki properti webkitRegionOverset yang, jika merupakan bagian dari alur bernama, menunjukkan apakah konten dari alur meluap dari region atau tidak. Nilai webkitRegionOverset yang mungkin adalah:
  • "overflow" jika ada lebih banyak konten daripada yang dapat ditampung oleh 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 oleh pengguna), jika ukuran jendela browser diubah, atau jika ukuran font berubah, mungkin perlu menambahkan atau menghapus region 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 region atau menentukan ukuran dan posisi region; 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 CSS Regions.

Template halaman CSS

Catatan: Bagian ini membahas konsep mendatang yang belum diterapkan di browser mana pun.

Memanfaatkan CSSOM mungkin merupakan cara paling efektif dan fleksibel untuk menerapkan hal-hal seperti paging dan tata letak responsif, tetapi Adobe telah bekerja dengan alat teks dan desktop publishing cukup lama untuk mengetahui bahwa desainer dan developer juga menginginkan cara yang lebih mudah untuk mendapatkan kemampuan paging yang relatif umum. Oleh karena itu, kami sedang mengerjakan proposal yang disebut Template Halaman CSS yang memungkinkan perilaku penomoran halaman 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, class ini menentukan pemilih ketiga yang disebut "combined-articles" yang di dalamnya akan berisi dua flow. 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 ditentukan, 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, yang masing-masing sesuai dengan kolom. Teks dari "article-flow" akan mengalir melalui kolom di sebelah kiri dan kanan, dan teks dari "timeline-flow" akan mengisi kolom di tengah. Hasilnya mungkin akan terlihat seperti ini:

Contoh template halaman

Perhatikan bahwa teks artikel -- teks di kolom kiri dan kanan -- menggunakan bahasa Inggris, dan linimasa di tengah menggunakan bahasa Jerman. Selain itu, dokumen akan di-scroll secara horizontal tanpa memerlukan kode JavaScript apa pun. Semuanya dilakukan sepenuhnya secara deklaratif di CSS.

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

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

Pengecualian CSS

Untuk mencapai tata letak yang benar-benar seperti majalah, tidak cukup hanya dengan mengalirkan teks melalui region. Elemen penting dari publikasi desktop yang 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 tingkat kualitas produksi ini ke web.

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

Contoh penerapan Pengecualian CSS

Kebalikannya diilustrasikan dalam screenshot berikutnya: teks mengalir di dalam poligon berbentuk tidak beraturan:

Teks mengalir ke poligon berbentuk tidak beraturan

Langkah pertama untuk 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 fondasi untuk membangun sisa Pengecualian CSS.

Untuk mengetahui informasi selengkapnya tentang CSS Exclusions, lihat halaman CSS Exclusions di html.adobe.com, dan untuk mengetahui lebih lanjut upaya Adobe dalam teknologi dasar untuk CSS Exclusions, lihat postingan blog Hans Muller yang berjudul Horizontal Box: Polygon Intersection for CSS Exclusions.

Status CSS Regions dan CSS Exclusions (2012)

Pertama kali saya membahas CSS Regions dan CSS Exclusions secara publik adalah di Adobe Developer Pod di Google I/O 2011. Saat itu, saya menampilkan demo di browser prototipe kustom kami sendiri. Sambutan yang diberikan sangat antusias, tetapi ada rasa kecewa yang nyata saat para penonton mengetahui bahwa tidak ada fungsi yang saya tunjukkan yang tersedia di browser utama mana pun.

Saya menghadiri Google I/O lagi 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 satu tahun kemudian, sekitar 80% spesifikasi CSS Regions telah diimplementasikan di WebKit, dan sudah ada di versi terbaru Google Chrome (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

Selain itu, CSS Region dan CSS Exclusion diimplementasikan dalam pratinjau Internet Explorer 10, dan saat ini ada dalam roadmap Mozilla 2012 untuk Firefox. Versi utama Safari berikutnya akan mendukung sebagian besar spesifikasi CSS Regions, dan update berikutnya akan menyertakan sisanya.

Berikut adalah linimasa mendetail tentang progres yang telah kami buat dengan CSS Regions dan CSS Exclusions sejak proposal awal kami kepada W3C pada April 2011:

Progres Region dan Pengecualian

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 meningkatkan presentasi teks lebih jauh lagi. CSS Regions dan CSS Exclusions memungkinkan konten tetap terstruktur secara semantik sekaligus memungkinkan tata letak yang benar-benar seperti majalah, dan pada akhirnya web yang jauh lebih ekspresif.