Giriş
Web, metin için son derece güçlü bir platform. Adobe'nin oldukça fazla deneyim ve uzmanlığa sahip olduğu bir alandır. Adobe, web'i ileriye taşımaya yardımcı olacak yollar ararken web'in metin özelliklerini daha da geliştirmek, başlamak için en uygun yer olarak göründü. Web'de metin için genellikle tek sütun, dikey yön varsayılır. Metni grafiklerin etrafında dolaştırmak ve hatta metni CSS ile birden çok sütuna biçimlendirmek mümkün olsa da, web'de dergi benzeri bir düzen oluşturmak yine de çok zordur. Adobe, CSS Bölgeleri ve CSS Hariç Tutmaları sayesinde masaüstü yayıncılığının gücünü modern tarayıcılara taşıma çalışmalarına öncülük ediyor. Örneğin, aşağıdaki ekran görüntüsünde CSS Hariç Tutmaları, dağın dış çizgisi boyunca metin akışı sağlamak için kullanılmaktadır:
Aşağıdaki ekran görüntüsünde yer alan belgede, metnin resimlerdeki şekillerin etrafına sarılmasına izin vermek için CSS hariç tutmaları ve metni sütunlar halinde ve alıntıların etrafında biçimlendirmek için CSS bölgeleri de kullanılmaktadır:
CSS Bölgeleri
CSS Bölgeleri ile ilgili ayrıntılara geçmeden önce, bölgelerin Google Chrome'da nasıl etkinleştirilebileceğini açıklamak isterim. CSS bölgelerini etkinleştirdikten sonra bu makalede bahsedilen örneklerden bazılarını 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 20.0.1132.57 sürümü) itibaren 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 (control/command + f) tuşlarını kullanın ve "deneysel Web Platformu özellikleri" bölümünü arayın.
- Etkinleştir bağlantısını tıklayın.
- En alttaki Şimdi Yeniden Başlat düğmesini tıklayın.
Chrome işaretleri hakkında daha fazla bilgi için Chrome İşaretleri Hakkında başlıklı blog gönderimimi inceleyin.
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 bloklarının otomatik olarak "kutulara" aktarılmasına olanak tanır (şu anda öğede bulunuyordur). Aşağıdaki şemada, metin (akış) ve kutuların (metnin aktığı bölgeler) ayrılması gösterilmektedir:
Gerçek bir CSS Bölgeleri kullanım alanına bakalım. Adobe'de geliştirici olmanın yanı sıra aynı zamanda bilim kurgu yazarıyım. Çalışmamı sıklıkla Creative Commons lisansı kapsamında çevrimiçi olarak yayınlıyorum ve maksimum sayıda cihaz ve tarayıcıda çalışabilmesi için sıklıkla şuna benzer son derece basit bir biçim kullanıyorum:
CSS Bölgeleri'ni kullanarak, gezinmesi ve okuması daha kolay olduğu için hem görsel açıdan daha ilgi çekici hem de çok daha işlevsel bir deneyim oluşturabildim:
Gösterim amacıyla, bu prototipte CSS Bölgelerini ortaya çıkarma özelliğini ekledim. Aşağıdaki ekran görüntüsünde, bölgelerin bir grafiği saran sütunlar ve ortada bir pull tırnak işareti olduğu izlenimi verecek şekilde nasıl düzenlendiği gösterilmektedir:
Bu prototipi buradan deneyebilir (ve kaynak kodunu görüntüleyebilirsiniz). Gezinmek için ok tuşlarınızı kullanın, bölgeleri görmek için Esc tuşuna basın. Önceki prototiplere de buradan ulaşabilirsiniz.
Adlandırılmış Akış Oluşturma
Bir metin blokunun bölgelerden geçmesini sağlamak için gereken CSS son derece basittir. Aşağıdaki snippet, "article" olarak adlandırılmış bir akış atar "content" kimliğine sahip bir div öğesi ve aynı "makaleyi" atar "region" (bölge) sınıfına sahip herhangi bir öğeye adlandırılmış akış. Sonuç, "content" (içerik) alanının içinde bulunan metindir öğesi, "region" (bölge) sınıfına sahip tüm öğelerden 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"in içindeki metnin yoktur. Başka bir deyişle, çeşitli bölgelerden akış içinde olsa bile tamamen anlamsız kalabilir. Ayrıca, bölgeler sadece öğeler olduğundan, diğer öğelerde olduğu gibi CSS kullanılarak konumlandırılır ve boyutlandırılır. Bu nedenle, duyarlı tasarım ilkeleriyle mükemmel bir şekilde uyumludur. Öğeleri adlandırılmış akışın parçası olarak tanımlamak, belirtilen metnin otomatik olarak bunlardan geçtiği 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ümandaki kullanılabilir adlandırılmış akış koleksiyonunu döndüren bir işlev.document.webkitGetNamedFlows().namedItem("article"): Belirli bir adlandırılmış akışa referans döndüren bir 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 "makale" dizesini geçirirsiniz.WebKitNamedFlow: Aşağıdaki özelliklere ve işlevlere sahip, adlandırılmış bir buz kütlesinin nesne gösterimi:firstEmptyRegionIndex: Adlandırılmış akışla ilişkili ilk boş bölgenin dizinine işaret eden bir tam sayı değeri. Bölge koleksiyonunu nasıl alacağınızı öğrenmek için aşağıdakigetRegions()bölümüne bakın.name: Akışın adını içeren dize değeri.overset: Aşağıdaki özelliklere sahip bir boole özelliği:- Adlandırılmış akışın içeriği ilişkili bölgelere sığdığında
false trueİçerik uygun olmadığında ve tüm içeriğin daha fazla bölgede yer alması gerektiğinde.
- Adlandırılmış akışın içeriği ilişkili bölgelere sığdığında
getContent(): Adlandırılmış akışa akan düğümlere referanslar içeren bir koleksiyon döndüren işlev.getRegions(): Adlandırılmış akış içeriğini barındıran bölgelere referanslar içeren bir koleksiyon döndüren işlev.getRegionsByContentNode(node): Belirtilen düğümü içeren bölgeye referans döndüren bir işlev. Bu özellik, özellikle adlandırılmış ankörler gibi öğeler içeren bölgeleri bulmak için yararlıdır.
webkitregionoversetchangeetkinliği. Bu etkinlik, ilişkilendirilmiş içeriğin düzeni herhangi bir nedenle değiştiğinde (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 bölgeninwebkitRegionOversetözelliğinin değişmesine neden olur. Bu etkinlik, genel düzen değişikliklerini dinlemek için kullanışlıdır. Bu, önemli bir şeyin gerçekleştiğinin ve düzene dikkat edilmesi gerektiğinin bir göstergesidir (ör. daha fazla bölge gereklidir, bazı bölgeler boş olabilir vb.).webkitregionfragmentchangeetkinliği. Bu düzenleme sırasında uygulanmadı. Bu etkinlik, ilişkili içeriğin düzeni herhangi bir nedenle değiştiğindeWebkitNamedFlow'te tetiklenir.webkitregionoversetchange'e benzer şekilde,webkitRegionOversetmülklerindeki değişikliklerden bağımsızdır. Bu etkinlik, adlandırılmış akışın tüm düzenini etkilemeyen ayrıntılı düzen değişikliklerini dinlemek açısından faydalıdır. Örneğin: İçerik bir bölgeden diğerine taşınır ancak genel içerik tüm bölgelere uymaya devam eder.Element.webkitRegionOverset:flow-fromCSS özelliği atanan öğeler bölge haline gelir. Bu öğeler, adlandırılmış bir akışın parçasılarsa bir akıştaki içeriğin bölgeden taşıp taşmadığını belirten birwebkitRegionOversetözelliğine sahiptir. webkitRegionOverset değerleri olasıdır:- Bölgenin alabileceğinden daha fazla içerik varsa "taşma"
- "fit" İçerik, bölgenin bitiminden önce durursa
- "boş" İçerik söz konusu bölgeye ulaşmadıysa
CSSOM'nin birincil kullanım alanlarından biri, webkitregionoversetchange etkinliklerini dinlemek ve farklı miktarlardaki metinlere uyum sağlamak için dinamik olarak bölge eklemek ya da kaldırmaktır. Örneğin, biçimlendirilecek metin miktarı tahmin edilemiyorsa (belki kullanıcı tarafından oluşturuluyorsa), tarayıcı penceresi yeniden boyutlandırılırsa veya yazı tipi boyutu değişirse akıştaki değişikliği karşılamak için bölge eklemek veya kaldırmak gerekebilir. Buna ek olarak, içeriğinizi sayfalar halinde düzenlemek istiyorsanız hem bölgelerinizi hem de DOM'yi dinamik olarak değiştirebileceğiniz bir mekanizmaya ihtiyacınız olacaktır.
Aşağıdaki JavaScript kodu 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, bölgelerin kaldırılması veya bölgelerin boyut ve konumlarının tanımlanmasıyla ilgili olmadığını unutmayın; yalnızca gösterim amaçlıdır.
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 örnekler sayfasında daha fazla demo bulabilirsiniz.
CSS Sayfası Şablonları
CSSOM'den yararlanmak muhtemelen sayfa oluşturma ve duyarlı düzen gibi özellikleri uygulamanın en güçlü ve esnek yoludur. Ancak Adobe, sayfa oluşturma ve nispeten genel sayfa oluşturma özelliklerine sahip olmanın daha kolay bir yolunu arayan tasarımcıların ve geliştiricilerin de daha kolay bir yöntem isteyebileceğini bilecek kadar uzun süredir metin ve masaüstü yayıncılık araçlarıyla çalışıyor. Bu nedenle, sayfa oluşturma davranışının tamamen bildirilmiş bir şekilde tanımlanmasına olanak tanıyan CSS Sayfa Şablonları adlı bir teklif üzerinde çalışıyoruz.
CSS sayfa şablonları için yaygın olarak kullanılan bir kullanım alanına göz atalım. Aşağıdaki kod snippet'inde, "article-flow" ve "timeline-flow" adlı iki akış oluşturmak için CSS'nin kullanımı gösterilmektedir. Buna ek olarak, "birleşik makaleler" adlı üçüncü bir seçiciyi tanımlar bu akışta iki akış bulunur. overflow-style özelliğinin "birleşik makaleler" içine basit şekilde eklenmesi seçicisi, içeriğin otomatik olarak x ekseni boyunca 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ışı belirlendiğine göre artık sayfa şablonunu 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" kullanılarak tanımlanır. söz dizimine uygun olmalıdır. Yukarıdaki kod snippet'inde, her biri bir sütuna karşılık gelen üç alan tanımlarız. "Makale akışı"ndaki metin soldaki ve sağdaki sütunlardan ve "zaman çizelgesi akışı"ndaki metinden geçer ortadaki sütunu doldurur. Sonuç şuna benzer şekilde görünebilir:
Makale metninin (sol ve sağ sütunlardaki metin) İngilizce, ortadaki zaman çizelgesinin ise Almanca olduğunu unutmayın. Buna ek olarak, belge sayfalarını herhangi bir JavaScript koduna ihtiyaç duymadan yatay olarak görüntüleyebilirsiniz. CSS'de her şey tamamen bildirerek yapıldı.
CSS Sayfa Şablonları hâlâ bir teklif olsa da JavaScript "shim" kullanan bir prototipimiz var. (polyfill olarak da bilinir) kullanıma sunduk.
Genel olarak CSS Bölgeleri hakkında daha fazla bilgi edinmek için html.adobe.com adresindeki CSS Bölgeleri sayfasına göz atın.
CSS Hariç Tutmaları
Gerçek dergi benzeri bir düzen elde etmek için, bölgeler arasında metin akışı sağlamak yeterli değildir. Yüksek kaliteli ve görsel açıdan ilgi çekici masaüstü yayıncılığının önemli bir unsuru, metnin düzensiz grafiklerin ve şekillerin etrafında veya içinde akıcı bir şekilde akmasını sağlamaktır. CSS hariç tutmaları, bu düzeyde bir prodüksiyon kalitesini web'e getiriyor.
Aşağıdaki ekran görüntüsü, bir CSS Hariç Tutmaları prototipinden alınmıştır ve büyük bir kaya oluşumunun dış çizgisiyle eşleşen bir yolun etrafında dinamik bir şekilde akan metni göstermektedir:
Bunun tersi, bir sonraki ekran görüntüsünde gösterilmiştir: Düzensiz şekilli çokgenlerin içinde akan metin:
Metni rastgele şekillerin etrafında veya içinde akıtabilmek için ilk adım, gerekli algoritmaları geliştirip optimize etmektir. Adobe şu anda doğrudan WebKit'e katkıda bulunacak uygulamalar üzerinde çalışmaktadır. Bu algoritmalar optimize edildikten sonra CSS hariç tutmalarının geri kalanının üzerine inşa edilecek temelleri oluşturacaktır.
CSS Hariç Tutmaları hakkında daha fazla bilgi için html.adobe.com adresindeki CSS Hariç Tutmaları sayfasına, Adobe'nin CSS Hariç Tutmaları için kullanılan temel teknolojiyle ilgili çalışmasını daha ayrıntılı bir şekilde incelemek için Hans Muller'in 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
Google I/O 2011'de, CSS Bölgeleri ve CSS Hariç Tutmaları hakkında ilk kez herkese açık bir şekilde bahsettim. O zamanlar kendi özel prototip tarayıcımızda demolar gösteriyordum. Aldığım tepkiler son derece heyecan vericiydi. Ancak izleyiciler, gösterdiğim işlevlerin hiçbirinin henüz büyük tarayıcılarda kullanılamadığını fark ettiğinde hayal kırıklığına uğradılar.
Bu yıl (2012) yine Google I/O'da bulundum. Bu kez Google'dan iş arkadaşım Vincent Hardy ve Alex Danilo ile birlikte sunucu olarak çalıştım (sunuyu buradan izleyebilirsiniz). Yalnızca bir yıl sonra, CSS Bölgeleri spesifikasyonunun yaklaşık %80'i WebKit'te uygulandı ve Google Chrome'un en son sürümünde kullanıma sunuldu (CSS Bölgeleri'nin şu anda chrome://flags aracılığıyla etkinleştirilmesi gerektiğini unutmayın). CSS Bölgeleri için ön destek, Android için Chrome'a bile eklendi:
Ayrıca, hem CSS Bölgeleri hem de CSS Hariç Tutmaları Internet Explorer 10 önizlemesinde uygulanmıştır ve şu anda Firefox için Mozilla'nın 2012 yol haritasındadır. Safari'nin bir sonraki büyük sürümü, CSS Bölgeleri spesifikasyonunun büyük bir kısmını destekleyecektir. Sonraki güncellemeler ise kalan kısmı içerecektir.
Aşağıda, Nisan 2011'de W3C'ye yaptığımız ilk tekliften bu yana CSS Bölgeleri ve CSS Hariç Tutmaları ile kaydettiğimiz ilerlemenin ayrıntılı bir zaman çizelgesi bulunmaktadır:
Sonuç
Adobe, genel olarak InDesign gibi araçlar aracılığıyla metin, yazı tipi ve masaüstü yayıncılık konularında son derece deneyimli bir deneyime sahiptir. Web zaten metin için çok güçlü bir platform olsa da metin sunumunu daha da ileri taşımak için bilgi birikimimizi ve tecrübemizi kullanmak istiyoruz. CSS Bölgeleri ve CSS Hariç Tutmaları, içeriğin anlamsal olarak yapılandırılmasını sağlarken dergi benzeri düzene ve sonuç olarak çok daha etkileyici bir web'e olanak tanır.