Pengantar
Web adalah platform yang sangat canggih untuk teks, sebuah area di mana Adobe memiliki banyak pengalaman dan keahlian. Saat Adobe sedang mencari cara untuk membantu memajukan web, meningkatkan kemampuan teks web lebih jauh tampak seperti tempat yang jelas bagi kami untuk memulai. Web umumnya mengasumsikan satu kolom dan orientasi vertikal untuk teks. Meskipun memungkinkan untuk mengalirkan teks di sekitar grafik, dan bahkan memformat teks ke beberapa kolom dengan CSS, masih sangat sulit untuk mencapai tata letak seperti majalah di web. Dengan Region CSS dan Pengecualian CSS, Adobe memelopori upaya untuk menghadirkan kecanggihan publikasi desktop ke browser modern. Misalnya, pada screenshot di bawah, Pengecualian CSS digunakan untuk mengalirkan teks di sepanjang kontur gunung:
Dokumen pada screenshot di bawah ini juga menggunakan Pengecualian CSS untuk memungkinkan teks membungkus bentuk pada gambar, serta Region CSS untuk memformat teks ke dalam kolom dan di sekitar tanda kutip:
Wilayah CSS
Sebelum masuk ke detail Wilayah CSS, saya ingin membahas bagaimana wilayah dapat diaktifkan di Google Chrome. Setelah Wilayah CSS diaktifkan, 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), Wilayah CSS diaktifkan melalui antarmuka chrome://flags. Untuk mengaktifkan Wilayah CSS, ikuti langkah-langkah berikut:
- Buka tab atau jendela baru di Chrome.
- Ketikkan
chrome://flagsdi kolom lokasi. - Gunakan temukan di halaman (control/command + f) dan telusuri bagian "fitur Platform Web eksperimental".
- Klik link Enable.
- Klik tombol Luncurkan Ulang Sekarang di bagian bawah.
Untuk mengetahui informasi selengkapnya tentang tanda Chrome, lihat postingan blog saya tentang Semua Tentang Tanda Chrome.
Setelah meluncurkan kembali browser, Anda dapat mulai bereksperimen dengan Wilayah CSS.
Ringkasan Wilayah CSS
Region CSS memungkinkan blok teks yang di-markup secara semantik ke dalam "kotak" (saat ini elemen). Diagram di bawah menunjukkan pemisahan teks (alur) dan kotak (area tempat teks mengalir):
Mari kita lihat kasus penggunaan Wilayah CSS yang sebenarnya. Selain menjadi pengembang di Adobe, saya juga seorang penulis fiksi ilmiah. Saya sering menerbitkan karya saya secara daring dengan lisensi Creative Commons, dan agar dapat berfungsi di sebanyak mungkin perangkat dan browser, saya sering menggunakan format yang sangat sederhana yang serupa dengan ini:
Dengan menggunakan Wilayah CSS, saya bisa menciptakan pengalaman yang lebih menarik secara visual, dan jauh lebih fungsional karena lebih mudah dinavigasi dan lebih nyaman dibaca:
Untuk tujuan demonstrasi, saya menambahkan kemampuan untuk mengungkapkan Wilayah CSS dalam prototipe ini. Screenshot di bawah ini menunjukkan bagaimana region disusun sedemikian rupa sehingga memberikan kesan sebagai kolom yang mengelilingi grafik dan tanda kutip di tengah:
Anda dapat bereksperimen dengan prototipe ini (serta melihat kode sumbernya) di sini. Gunakan tombol panah untuk menjelajahi data, lalu tekan tombol Esc untuk menampilkan wilayah. Prototipe sebelumnya juga tersedia di sini.
Membuat Flow Bernama
CSS yang diperlukan untuk mendapatkan blok teks untuk mengalir melalui region sangat sederhana. Cuplikan di bawah menetapkan flow bernama "article" ke div dengan ID "content", dan menetapkan flow bernama "article" yang sama tersebut ke elemen mana pun dengan class "region". Hasilnya adalah teks yang terdapat 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:
Perhatikan bahwa teks di dalam div "content" tidak memiliki pengetahuan mengenai presentasinya. Dengan kata lain, data dapat tetap utuh secara semantik meskipun mengalir melalui berbagai region. Selain itu, karena region hanyalah elemen, region ini diposisikan dan diubah ukurannya menggunakan CSS seperti elemen lainnya, dan karenanya sangat kompatibel dengan prinsip desain responsif. Menetapkan elemen sebagai bagian dari alur bernama berarti bahwa teks yang ditentukan secara otomatis mengalir melaluinya.
Model Objek CSS
CSS Object Model, atau WebView, menentukan API JavaScript untuk bekerja dengan CSS. Berikut adalah daftar API baru yang terkait dengan Region CSS:
document.webkitGetNamedFlows(): Fungsi yang menampilkan kumpulan flow 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 CSSflow-intodanfrom-from. Untuk mendapatkan referensi ke alur bernama yang ditentukan dalam cuplikan kode di atas, Anda harus meneruskan string "artikel".WebKitNamedFlow: Representasi objek dari floe bernama dengan properti dan fungsi berikut:firstEmptyRegionIndex: Nilai bilangan bulat yang mengarah ke indeks region kosong pertama yang dikaitkan dengan flow bernama. LihatgetRegions()di bawah untuk mempelajari cara mendapatkan kumpulan wilayah.name: Nilai string dengan nama flow.overset: Properti boolean yang:falsesaat konten alur bernama cocok di wilayah terkaittruejika konten tidak sesuai dan wilayah lainnya harus menampung semua konten.
getContent(): Fungsi yang menampilkan koleksi dengan referensi ke node yang mengalir ke alur bernama.getRegions(): Fungsi yang menampilkan koleksi dengan referensi ke region yang menyimpan konten flow 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 diWebkitNamedFlowsetiap kali tata letak konten terkait berubah karena alasan apa pun (konten ditambahkan atau dihapus, ukuran font berubah, bentuk wilayah berubah, dll.) dan menyebabkan propertiwebkitRegionOversetwilayah berubah. Peristiwa ini berguna untuk memproses perubahan tata letak umum. Hal ini merupakan indikator bahwa sesuatu yang penting telah terjadi dan tata letak mungkin perlu diperhatikan, seperti: lebih banyak wilayah diperlukan, beberapa wilayah mungkin kosong, dll.webkitregionfragmentchange. Tidak diterapkan pada saat pengeditan ini. Peristiwa ini dipicu diWebkitNamedFlowsetiap kali tata letak konten terkait berubah karena alasan apa pun, mirip denganwebkitregionoversetchange, tetapi terlepas dari perubahan apa pun di propertiwebkitRegionOverset. Peristiwa ini berguna untuk memproses perubahan tata letak halus yang tidak selalu memengaruhi seluruh tata letak alur bernama, misalnya: konten berpindah dari satu region ke region lain, tetapi keseluruhan konten masih sesuai di semua region.Element.webkitRegionOverset: Elemen menjadi wilayah jika memiliki properti CSSflow-fromyang ditetapkan. Elemen ini memiliki propertiwebkitRegionOversetyang, jika merupakan bagian dari flow bernama, akan menunjukkan apakah konten dari flow melebihi area atau tidak. Nilai yang mungkin digunakan webkitRegionOverset adalah:- "overflow" jika ada lebih banyak konten dari yang dapat disimpan oleh wilayah
- "fit" jika konten berhenti sebelum akhir wilayah
- "kosong" jika konten belum mencapai wilayah
Salah satu penggunaan utama WebView adalah memproses peristiwa webkitregionoversetchange dan menambahkan atau menghapus region secara dinamis untuk mengakomodasi berbagai jumlah teks. Misalnya, jika jumlah teks yang akan diformat tidak dapat diprediksi (mungkin buatan pengguna), jika jendela browser diubah ukurannya, atau jika ukuran font berubah, mungkin diperlukan untuk menambahkan atau menghapus area untuk mengakomodasi perubahan dalam alur. Selain itu, jika ingin mengatur konten ke dalam halaman, Anda memerlukan mekanisme untuk memodifikasi DOM secara dinamis serta region Anda.
Cuplikan kode JavaScript berikut menunjukkan penggunaan WebView untuk menambahkan region secara dinamis sesuai kebutuhan. Perlu diperhatikan bahwa demi kesederhanaan, metode ini tidak menangani penghapusan region atau penentuan ukuran dan posisi region; untuk tujuan demonstrasi saja.
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 Filestore mungkin merupakan cara yang paling andal dan fleksibel untuk mengimplementasikan hal-hal seperti paging dan tata letak responsif, tetapi Adobe telah cukup lama bekerja dengan alat publikasi teks dan desktop 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 bernama 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 ini 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 di dalamnya dua alur akan dimuat. Penyertaan sederhana properti overflow-style di dalam pemilih "artikel gabungan" menunjukkan bahwa konten akan secara otomatis di-page 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 flow ditentukan dan perilaku tambahan yang diinginkan telah 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 ditetapkan menggunakan sintaksis "at" yang baru. Dalam cuplikan kode di atas, kita menentukan tiga slot, masing-masing sesuai dengan kolom. Teks dari "article-flow" akan mengisi kolom di sebelah kiri dan kanan, dan teks dari "timeline-flow" akan mengisi kolom di tengah. Hasilnya akan terlihat seperti ini:
Perhatikan bahwa teks artikel -- teks di kolom kiri dan kanan -- dalam bahasa Inggris, dan linimasa di tengah adalah bahasa Jerman. Selain itu, halaman dokumen secara horizontal tanpa memerlukan kode JavaScript apa pun. Semuanya dilakukan sepenuhnya secara deklaratif dalam CSS.
Template Halaman CSS masih merupakan proposal, tetapi kami memiliki prototipe yang menggunakan "shim" JavaScript (alias polyfill) agar Anda dapat bereksperimen dengan template tersebut sekarang.
Untuk mempelajari lebih lanjut Wilayah CSS secara umum, buka halaman Wilayah CSS di html.adobe.com.
Pengecualian CSS
Untuk mencapai tata letak seperti majalah yang sebenarnya, mengalir teks melalui wilayah tidak cukup. Elemen penting publikasi desktop yang menarik secara visual dan berkualitas tinggi adalah kemampuan untuk membuat teks mengalir baik di sekitar atau di dalam grafik dan bentuk yang tidak teratur. Pengecualian CSS menghadirkan tingkat kualitas produksi ini ke web.
Screenshot di bawah ini berasal dari prototipe Pengecualian CSS, dan menunjukkan teks yang mengalir secara dinamis di sekitar jalur yang cocok dengan kontur formasi batuan besar:
Kebalikannya diilustrasikan dalam screenshot berikutnya: teks mengalir di dalam poligon berbentuk tidak teratur:
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 Pengecualian CSS lainnya.
Untuk informasi selengkapnya tentang Pengecualian CSS, lihat halaman Pengecualian CSS di html.adobe.com, dan untuk mengetahui informasi yang lebih mendetail tentang pekerjaan Adobe terkait teknologi dasar untuk Pengecualian CSS, lihat postingan blog Hans Muller yang berjudul Horizontal Box: Polygon Intersection for CSS Exempt.
Status Wilayah CSS Saat Ini dan Pengecualian CSS
Pertama kali saya berbicara tentang Region CSS dan Pengecualian CSS secara publik adalah di Adobe Developer Pod di Google I/O 2011. Pada saat itu, saya menunjukkan demo di {i>browser<i} prototipe khusus kami sendiri. Penerimaan tamu sangat antusias, tetapi ada rasa kekecewaan yang nyata ketika penonton menemukan bahwa fungsi yang saya tunjukkan belum tersedia di browser besar mana pun.
Saya berada di 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 setahun kemudian, sekitar 80% spesifikasi Region CSS telah diterapkan di WebKit, dan sudah ada di Google Chrome versi terbaru (perhatikan bahwa Wilayah CSS saat ini harus diaktifkan melalui chrome://flags). Dukungan awal untuk Wilayah CSS bahkan telah masuk di Chrome untuk Android:
Selain itu, baik Daerah CSS dan Pengecualian CSS diimplementasikan dalam pratinjau Internet Explorer 10, dan saat ini masuk dalam roadmap tahun 2012 Mozilla untuk Firefox. Safari versi utama berikutnya harus mendukung sebagian besar spesifikasi Region CSS, dan update berikutnya harus menyertakan sisanya.
Di bawah ini adalah garis waktu terperinci mengenai progres yang telah kami capai terkait Wilayah CSS dan Pengecualian CSS sejak proposal awal kami ke W3C pada April 2011:
Kesimpulan
Adobe memiliki banyak pengalaman dengan teks, {i>font<i}, dan dengan publikasi desktop secara umum melalui alat seperti InDesign. Meskipun web sudah menjadi platform yang sangat ampuh untuk teks, kita ingin menggunakan pengetahuan dan pengalaman kita untuk semakin mendorong presentasi teks. Region CSS dan Pengecualian CSS memungkinkan konten tetap terstruktur secara semantik sekaligus memungkinkan tata letak seperti majalah yang sesungguhnya, dan pada akhirnya, web yang jauh lebih ekspresif.