Giriş
Web, Adobe'nin büyük bir tecrübe ve uzmanlığa sahip olduğu son derece güçlü bir metin alanıdır. Bu nedenle, Adobe web'i ileriye taşımanın yollarını ararken web'in metin yeteneklerini daha da geliştirmek başlangıç için en iyi seçenek gibi göründü. Web genellikle metin için tek bir sütun ve dikey yön olduğunu varsayar. Metni grafiklerin etrafından akıtmak ve hatta CSS ile metni birden çok sütun halinde biçimlendirmek mümkün olsa da, web'de dergiye benzeyen bir düzen oluşturmak hâlâ çok zordur. Adobe, CSS Bölgeleri ve CSS Hariç Tutmaları sayesinde, masaüstü yayıncılığın gücünü modern tarayıcılara taşıma çabalarına öncülük etmektedir. Örneğin, aşağıdaki ekran görüntüsünde, CSS Hariç Tutmaları metnin dağın çevresi boyunca akması için kullanılmıştır:
Aşağıdaki ekran görüntüsünde yer alan dokümanda, metnin resimlerdeki şekillerin etrafından akıtılmasına olanak tanımak için CSS Hariç Tutmaları ve metni sütunlar halinde ve bir pull tırnağı etrafında biçimlendirmek için CSS Bölgeleri de kullanılmaktadır.
CSS Bölgeleri
CSS Bölgeleri ile ilgili ayrıntılara girmeden önce, bölgelerin Google Chrome'da nasıl etkinleştirilebileceğinden bahsetmek istiyorum. CSS Bölgelerini etkinleştirdikten sonra, bu makalede referans verilen bazı örnekleri deneyebilir ve kendi örneklerinizi oluşturabilirsiniz.
Google Chrome'da CSS Bölgelerini Etkinleştirme
CSS Bölgeleri, Chrome'un 20 sürümünden (tam olarak gerekirse 20.0.1132.57 sürümü) chrome://flags arayüzü üzerinden etkinleştirilmektedir. CSS Bölgelerini etkinleştirmek için aşağıdaki adımları uygulayın:
- Chrome'da yeni bir sekme veya pencere açın.
- Konum çubuğuna
chrome://flagsyazın. - Sayfada bul'u (control/command + f) kullanarak "deneysel Web Platformu özellikleri" bölümünü arayın.
- Etkinleştir bağlantısını tıklayın.
- Alt kısımdaki Şimdi Yeniden Başlat düğmesini tıklayın.
Chrome'un işaretleri hakkında daha fazla bilgi edinmek için Chrome İşaretleri Hakkında Her Şey başlıklı blog yayınıma bakın.
Tarayıcınızı yeniden başlattıktan sonra CSS Bölgeleri ile denemeler yapmaya başlayabilirsiniz.
CSS Bölgelerine Genel Bakış
CSS Bölgeleri, anlamsal olarak işaretlenmiş metin bloğunun otomatik olarak "kutulara" (şu anda öğeler) akmasına olanak tanır. Aşağıdaki diyagramda metin (akış) ile kutuların (metnin aktığı bölgeler) ayrılması gösterilmektedir:
CSS Bölgelerinin gerçek bir kullanım alanına göz atalım. Adobe'de geliştirici olmanın yanı sıra bilim kurgu yazarıyım. Çalışmamı Creative Commons lisansı kapsamında çevrimiçi olarak sık sık yayınlıyorum ve maksimum sayıda cihazda ve tarayıcıda çalışabilmesi için sıklıkla şuna benzer son derece basit bir biçim kullanıyorum:
CSS Bölgelerini kullanarak hem görsel açıdan daha ilgi çekici hem de çok daha işlevsel bir deneyim oluşturabildim. Böylece gezinmek ve okumak daha rahattı:
Gösterim amacıyla, bu prototipte CSS Bölgelerini gösterme özelliğini ekledim. Aşağıdaki ekran görüntüsünde, bölgelerin bir grafiği çevreleyen sütunlar ve ortada bir alıntı tırnak işareti gibi bir görünüm verecek şekilde nasıl düzenlendiği gösterilmektedir:
Burada bu prototiple deneme yapabilirsiniz (ayrıca kaynak kodunu görüntüleyebilirsiniz). Gezinmek için ok tuşlarını kullanın ve bölgeleri görmek için Esc tuşuna basın. Daha önceki prototipleri de burada bulabilirsiniz.
Adlandırılmış Akış Oluşturma
Bir metin bloğunun bölgeler arasında akışını sağlamak için gereken CSS son derece basittir. Aşağıdaki snippet, "content" kimlikli bir div öğesine "article" adlı adlandırılmış bir akışı ve aynı "article" adlı akışı, "region" sınıfına sahip tüm öğelere atar. Sonuçta, "content" öğesi içinde yer alan metin, "region" (bölge) sınıfına sahip herhangi bir öğenin içinden otomatik olarak geçer.
<!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>
Sonuç şöyle görünür:
"İçerik" div öğesinin içindeki metnin, sunuluş hakkında herhangi bir bilgi içermediğini unutmayın. Başka bir deyişle, farklı bölgelerden geçerken bile tamamen anlamsal olarak korunabilir. Ayrıca, bölgeler sadece öğeler olduğundan, diğer öğeler gibi CSS kullanılarak konumlandırılır ve boyutlandırılırlar. Dolayısıyla, duyarlı tasarım ilkeleriyle mükemmel şekilde uyumludurlar. Öğeleri adlandırılmış bir akışın parçası olarak tanımlamak, belirtilen metnin bunların içinden otomatik olarak geçmesi anlamına gelir.
CSS Nesne Modeli
CSS Nesne Modeli veya CSSOM, CSS ile çalışmak için JavaScript API'lerini tanımlar. CSS bölgeleriyle ilgili yeni API'lerin listesi aşağıda verilmiştir:
document.webkitGetNamedFlows(): Dokümanda bulunan adlandırılmış akışların koleksiyonunu döndüren bir işlev.document.webkitGetNamedFlows().namedItem("article"): Belirli bir adlandırılmış akışa başvuru döndüren işlev. Bağımsız değişken,flow-intovefrom-fromCSS özelliklerinin değeri olarak belirtilen ada karşılık gelir. Yukarıdaki kod snippet'inde belirtilen adlandırılmış akışa bir referans almak için "article" dizesini girersiniz.WebKitNamedFlow: Adlandırılmış bir floe'nun aşağıdaki özellik ve işlevlere sahip nesne gösterimi:firstEmptyRegionIndex: Adlandırılan akışla ilişkili ilk boş bölgenin dizinine işaret eden bir tam sayı değeri. Bölge koleksiyonunu nasıl edineceğinizi öğrenmek için aşağıdakigetRegions()konusuna bakın.name: Akışın adını içeren bir dize değeri.overset: Aşağıdaki durumda olan bir boole özelliği:- Adlandırılan akışın içeriği ilişkili bölgelere sığdığında
false - İçerik sığmadığında ve içeriğin daha fazla bölgede barındırılması gerektiğinde
true.
- Adlandırılan akışın içeriği ilişkili bölgelere sığdığında
getContent(): Adlandırılmış akışa akan düğümlere başvuruları içeren bir koleksiyon döndüren işlev.getRegions(): Adlandırılmış akışın içeriğini barındıran bölgelere başvurular içeren bir koleksiyon döndüren işlev.getRegionsByContentNode(node): Belirtilen düğümü içeren bölgeye bir başvuru döndüren işlev. Bu, özellikle adlandırılmış bağlayıcılar gibi öğeler içeren bölgeleri bulmak için faydalıdır.
webkitregionoversetchangeetkinliği. Bu etkinlik, ilişkili içeriğin düzeni herhangi bir nedenle (içerik eklendiğinde veya kaldırıldığında, yazı tipi boyutu değiştiğinde, bölgenin şekli değiştiğinde vb.)WebkitNamedFlowtetiklenir.ve bir bölgeninwebkitRegionOversetözelliğinin değişmesine neden olur. Bu etkinlik, yaklaşık düzen değişikliklerini dinlemek için yararlıdır. Bu, önemli bir şeyin gerçekleştiğini ve düzenin dikkat edilmesi gerekebileceğini gösterir. Örneğin: Daha fazla bölge gerekli, bazı bölgeler boş olabilir vb.webkitregionfragmentchangeetkinliği. Bu düzenlemenin yapıldığı tarihte uygulanmamıştır. Bu etkinlik, ilişkilendirilmiş içeriğin düzeniwebkitregionoversetchangeile benzer ancakwebkitRegionOversetözelliklerindeki herhangi bir değişikliklerden bağımsız olarak herhangi bir nedenle her değiştiğinde birWebkitNamedFlowetkinliğinde tetiklenir. Bu etkinlik, adlandırılmış akışın tüm düzenini etkilemek zorunda olmayan ayrıntılı düzen değişikliklerini dinlemek için yararlıdır. Örneğin: İçerik bir bölgeden diğerine taşınır ancak genel içerik tüm bölgelere sığmaya devam eder.Element.webkitRegionOverset: Öğeler,flow-fromCSS mülkü atandığında bölgelere dönüşür. Bu öğeler, adlandırılmış bir akışın parçasılarsa akıştaki içeriğin bölgede taşıp taşmadığını gösteren birwebkitRegionOversetözelliğine sahiptir. webkitRegionOverset değerleri:- Bölgenin barındırabileceğinden daha fazla içerik varsa "overflow"
- içerik, bölge bitiminden önce duruyorsa "fit"
- İçerik bölgeye ulaşmadıysa "boş"
CSSOM'nin birincil kullanımlarından biri, webkitregionoversetchange etkinliklerini dinlemek ve değişen miktarlardaki metne uyum sağlamak için dinamik olarak bölge eklemek veya kaldırmaktır. Örneğin, biçimlendirilecek metin miktarı öngörülemiyorsa (örneğin kullanıcı tarafından oluşturulmuş), tarayıcı penceresi yeniden boyutlandırıldıysa veya yazı tipi boyutu değişirse, akıştaki değişikliğe uyum sağlamak için bölge eklemek veya kaldırmak gerekebilir. Buna ek olarak, içeriğinizi sayfalar halinde düzenlemek istiyorsanız, bölgelerin yanı sıra DOM'yi dinamik olarak değiştirecek bir mekanizmaya ihtiyacınız olacaktır.
Aşağıdaki JavaScript kod snippet'i, gerektiğinde bölgeleri dinamik olarak eklemek için CSSOM'nin kullanımını göstermektedir. Kolaylık sağlaması açısından, bu komutun bölgeleri kaldırma veya bölgelerin boyut ve konumlarını tanımlamayla ilgili olmadığını, yalnızca gösterim amaçlı olduğunu unutmayın.
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.
}
CSS Bölgeleri örnekleri sayfasında daha fazla demo bulabilirsiniz.
CSS Sayfa Şablonları
CSSOM'den yararlanmak muhtemelen sayfalama ve duyarlı düzen gibi özellikleri uygulamanın en güçlü ve esnek yoludur. Ancak Adobe, metin ve masaüstü yayıncılık araçlarıyla tasarımcıların ve geliştiricilerin nispeten genel sayfa oluşturma özellikleri elde etmenin daha kolay bir yolunu isteyeceğini anlayacak kadar uzun süredir çalışıyor. Bu nedenle, sayfa oluşturma davranışının tamamen bildirime dayalı olarak tanımlanmasını sağlayan CSS Sayfa Şablonları adlı bir teklif üzerinde çalışıyoruz.
CSS Sayfa Şablonları'nın yaygın bir kullanım örneğini inceleyelim. Aşağıdaki kod snippet'i, adlandırılmış iki akış oluşturmak için CSS kullanımını gösterir: "makale akışı" ve "zaman çizelgesi-akış." Buna ek olarak, içinde iki akışın yer alacağı "birleşik makaleler" adlı üçüncü bir seçici tanımlar. overflow-style özelliğinin "birleşik makaleler" seçicisinin içine eklenmesi, içeriğin x ekseninde otomatik olarak veya yatay olarak sayfalandırılması gerektiğini belirtir:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Akışlar tanımlandığına ve istenen taşma davranışı belirtildiğine göre artık sayfa şablonunun kendisini oluşturabiliriz:
@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; % }
}
}
Sayfa şablonları, yeni "at" söz dizimi kullanılarak tanımlanır. Yukarıdaki kod snippet'inde, her biri bir sütuna karşılık gelen üç alan tanımlarız. "Makale akışı"ndan gelen metin, soldaki ve sağdaki sütunlardan geçer. "Zaman çizelgesi akışındaki" metin ise ortadaki sütunu doldurur. Sonuç şunun gibi görünebilir:
Makale metninin (sol ve sağ taraftaki sütunlardaki metin) İngilizce, ortadaki zaman çizelgesinin ise Almanca olduğuna dikkat edin. Ayrıca doküman, herhangi bir JavaScript koduna gerek kalmadan yatay olarak sayfalar halinde görüntülenir. CSS'de her şey bildirime dayalı bir şekilde gerçekleştirildi.
CSS Sayfa Şablonları hâlâ bir teklif olsa da bunlarla denemeler yapmanıza olanak tanımak için JavaScript "şim" (polyfill) kullanan bir prototipimiz bulunmaktadır.
CSS Bölgeleri hakkında genel olarak daha fazla bilgi edinmek için html.adobe.com adresindeki CSS Bölgeleri sayfasını inceleyin.
CSS Hariç Tutmaları
Gerçek dergi benzeri bir düzen oluşturmak için metnin bölgeler arasında akışı sağlayabilmek yeterli değildir. Yüksek kaliteli ve görsel olarak ilgi çekici masaüstü yayıncılığın kritik bir öğesi, anormal grafikler ve şekillerin etrafında veya içinde metin akışı sağlayabilme yeteneğidir. CSS hariç tutmaları, web'e bu düzeyde üretim kalitesi getiriyor.
Aşağıdaki ekran görüntüsü bir CSS Hariç Tutmaları prototipine aittir ve büyük bir kaya oluşumunun konturuyla eşleşen bir yolun çevresinde dinamik olarak akan metin göstermektedir:
Bunun tersi, bir sonraki ekran görüntüsünde gösterilmiştir: Düzensiz biçimli poligonların içine akan metin:
Rastgele şekillerin etrafında veya içinde metin akışı yapabilmenin ilk adımı, gerekli algoritmaları geliştirmek ve optimize etmektir. Adobe, şu anda doğrudan WebKit'e katkıda bulunacak uygulamalar üzerinde çalışmaktadır. Bu algoritmalar optimize edildikten sonra, geri kalan CSS Hariç Tutmaları'nın temelini oluşturur.
CSS Hariç Tutmaları hakkında daha fazla bilgi için html.adobe.com adresindeki CSS Hariç Tutmaları sayfasını, Adobe'nin CSS Hariç Tutmaları için temel teknolojiye yönelik çalışmalarına daha ayrıntılı bir bakış için de Hans Muller'ın Yatay Kutu: CSS Hariç Tutmaları için Poligon Kesişimi başlıklı blog yayınına bakın.
CSS Bölgelerinin ve CSS Hariç Tutmalarının Mevcut Durumu
CSS Bölgeleri ve CSS Hariç Tutmaları hakkında herkese açık olarak ilk kez Google I/O 2011'deki Adobe Geliştirici Kapsülündeydim. O zamanlar kendi özel prototip tarayıcımızda demolar gösteriyordum. Algılanan karşılama son derece coşkuluydu ancak izleyiciler benim gösterdiğim işlevlerden hiçbirinin henüz hiçbir büyük tarayıcıda sunulmadığını fark ettiğinde gözle görülür bir hayal kırıklığı yaşadı.
Bu yıl (2012) yine Google I/O'ya katıldım. Bu kez Google'dan iş arkadaşım Vincent Hardy ve Alex Danilo ile birlikte sunuculuk yaptım (sunuyu buradan izleyebilirsiniz). Yalnızca bir yıl sonra, CSS Bölgeleri spesifikasyonunun yaklaşık% 80'i WebKit'e uygulandı ve Google Chrome'un en yeni sürümünde kullanıma sunuldu (CSS Bölgelerinin şu anda chrome://flags aracılığıyla etkinleştirilmesi gerektiğini unutmayın). CSS Bölgeleri için ön destek, Android için Chrome'da bile uygulanmaya başladı:
Ayrıca, hem CSS Bölgeleri hem de CSS Hariç Tutmaları Internet Explorer 10 önizlemesinde uygulanır ve şu anda Mozilla'nın Firefox için 2012 yol haritasındadır. Safari'nin bir sonraki ana sürümü, CSS Bölgeleri spesifikasyonunun büyük kısmını destekler. Sonraki güncellemeler ise kalanını da içermelidir.
Aşağıda, Nisan 2011'de W3C'ye sunduğumuz ilk tekliften bu yana CSS Bölgeleri ve CSS Hariç Tutmaları konusunda kaydettiğimiz ilerlemenin ayrıntılı bir zaman çizelgesi verilmiştir:
Sonuç
Adobe; metin, yazı tipi ve genel olarak InTasarım gibi araçlarla masaüstü yayıncılık konusunda büyük bir deneyime sahiptir. Web zaten metin için çok güçlü bir platform olsa da, metin sunumunu daha da ileri taşımak için bilgimizi ve deneyimimizi kullanmak istiyoruz. CSS Bölgeleri ve CSS Hariç Tutmaları, içeriğin anlamsal yapıda kalmasını sağlarken dergi benzeri bir düzen ve sonuç olarak çok daha etkileyici bir web'i de mümkün kılıyor.