Giriş
Web, metin için son derece güçlü bir platformdur. Adobe'un bu alanda çok fazla deneyimi ve uzmanlığı vardı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 metinler genellikle tek sütunlu ve dikey olarak yönlendirilir. Metni grafiklerin etrafında akıtmak ve hatta CSS ile birden çok sütunda biçimlendirmek mümkün olsa da web'de dergilere benzer bir düzen elde etmek hâlâ çok zordur. Adobe, CSS bölgeleri ve CSS hariç tutmaları ile masaüstü yayıncılığının gücünü modern tarayıcılara getirme çabalarına öncülük ediyor. Örneğin, aşağıdaki ekran görüntüsünde metnin dağın konturu boyunca akması için CSS hariç tutmaları 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'nin ayrıntılarına 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
Chrome 20 sürümü (tam olarak 20.0.1132.57 sürümü) itibarıyla CSS Bölgeleri, 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 ara'yı (ctrl/komut + f) kullanarak "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ölgelerini denemeye başlayabilirsiniz.
CSS Bölgelerine Genel Bakış
CSS bölgeleri, anlamsal olarak işaretlenmiş bir metin bloğunun otomatik olarak "kutulara" (şu anda öğeler) akmasına olanak tanır. Aşağıdaki şemada metnin (akış) ve kutuların (metnin aktığı bölgeler) ayrılması gösterilmektedir:
Gerçek bir CSS Bölgeleri kullanım alanına göz atalım. Adobe'da geliştirici olmanın yanı sıra bilim kurgu yazarı da benim. Çalışmamı genellikle Creative Commons lisansı altında internette yayınlıyorum. Çalışmanın mümkün olan en fazla cihaz ve tarayıcıda çalışabilmesi için genellikle aşağıdakine benzer son derece basit bir biçim kullanıyorum:
CSS bölgelerini kullanarak, gezinmesi ve okunması daha kolay olduğu için hem görsel açıdan daha ilgi çekici hem de çok daha işlevsel bir deneyim oluşturdum:
Gösterim amacıyla bu prototipe CSS bölgelerini gösterme özelliğini ekledim. Aşağıdaki ekran görüntüsünde, bölgelerin bir grafik ve ortada bir alıntı etrafına sarılmış sütunlar 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 ve bölgeleri görmek için Esc tuşuna basın. Önceki prototipleri buradan da inceleyebilirsiniz.
Adlandırılmış Akış Oluşturma
Bir metin bloğunun bölgeler arasında akması için gereken CSS son derece basittir. Aşağıdaki snippet,"content" kimlikli bir div'e "article" adlı bir adlandırılmış akış atar ve aynı "article" adlı akışı "region" sınıfına sahip herhangi bir öğeye atar. Sonuç olarak, "content" öğesinin içinde bulunan metin, "region" sınıfına sahip tüm öğelerde otomatik olarak akar.
<!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ç şu şekilde görünür:
"content" div'indeki metnin, sunumuyla ilgili hiçbir bilgiye sahip olmadığını unutmayın. Diğer bir deyişle, çeşitli bölgelerden geçerken bile anlamsal olarak tamamen bozulmadan kalabilir. Ayrıca, bölgeler yalnızca öğe olduğundan diğer tüm öğeler gibi CSS kullanılarak konumlandırılır ve boyutlandırılır. Bu nedenle, duyarlı tasarım ilkeleriyle mükemmel uyum sağlar. Öğeleri adlandırılmış bir akış parçası olarak tanımlamak, belirtilen metnin bu öğelerden otomatik olarak akacağı anlamına gelir.
CSS Nesne Modeli
CSS Nesne Modeli veya CSSOM, CSS ile çalışmak için JavaScript API'lerini tanımlar. CSS Bölgeleri ile ilgili yeni API'lerin listesi aşağıda verilmiştir:
document.webkitGetNamedFlows(): Belgede bulunan 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 referans almak için "article" dizesini iletmeniz gerekir.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 dizinini 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ış adının yer aldığı bir dize değeri.overset: Aşağıdaki özelliklere sahip bir boole mülkü:falseadlandırılmış akıştaki içerik ilişkili bölgelere sığdığındatrue, içerik sığmadığında ve tüm içeriğin sığması için daha fazla bölge gerektiğinde kullanılır.
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ış yer tutucular gibi öğeler içeren bölgeleri bulmak için yararlıdır.
webkitregionoversetchangeetkinliği. Bu etkinlik, ilişkili içeriğin düzeni herhangi bir nedenle değiştiğinde (içerik eklenir veya kaldırılır, yazı tipi boyutu değişir, bölgenin şekli değişir vb.)WebkitNamedFlowüzerinde tetiklenir ve bir bölgeninwebkitRegionOversetmülkünün değişmesine neden olur. Bu etkinlik, kaba düzen değişikliklerini dinlemek için yararlı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).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 için kullanışlıdır. Örneğin, içerik bir bölgeden diğerine taşınır ancak genel içerik tüm bölgelere sığar.Element.webkitRegionOverset: Öğelereflow-fromCSS mülkü atandığında öğeler bölge olur. Bu öğelerin, adlandırılmış bir akışa ait olmaları durumunda akıştaki içeriğin bölgeyi aşıp aşmadığını belirten birwebkitRegionOversetözelliği vardır. webkitRegionOverset için olası değerler:- Bölgenin alabileceğinden daha fazla içerik varsa "taşma"
- İçerik bölgenin sonuna ulaşmadan duruyorsa "fit"
- İçerik bölgeye ulaşmadıysa "boş"
CSSOM'un birincil kullanım alanlarından biri, webkitregionoversetchange etkinliklerini dinlemek ve değişen miktarlarda metne uyum sağlamak için bölgeleri dinamik olarak eklemek veya kaldırmaktır. Örneğin, biçimlendirilecek metnin miktarı tahmin edilemiyorsa (belki kullanıcı tarafından oluşturuluyorsa), tarayıcı penceresi yeniden boyutlandırılıyorsa veya yazı tipi boyutu değişiyorsa akıştaki değişikliği karşılamak için bölge eklemek veya kaldırmak gerekebilir. Ayrıca, içeriğinizi sayfalara ayırmak istiyorsanız DOM'u ve bölgelerinizi dinamik olarak değiştirmek için bir mekanizmaya ihtiyacınız vardır.
Aşağıdaki JavaScript kod snippet'inde, gerektiğinde bölgeleri dinamik olarak eklemek için CSSOM'un kullanımı gösterilmektedir. Basitlik sağlamak amacıyla, bölgelerin kaldırılması veya boyutlarının ve konumlarının tanımlanması bu örnekte ele alınmamıştır. Bu örnek yalnızca açıklama 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.
}
Daha fazla demo için CSS Bölgeleri örnekleri sayfasını inceleyin.
CSS Sayfa Şablonları
CSSOM'den yararlanmak, sayfalandırma ve duyarlı sayfa düzeni gibi özellikleri uygulamanın muhtemelen en güçlü ve esnek yoludur. Ancak Adobe, metin ve masaüstü yayıncılık araçlarıyla yeterince uzun süredir çalıştığı için tasarımcıların ve geliştiricilerin, nispeten genel sayfalandırma özelliklerini elde etmenin daha kolay bir yolunu da isteyeceğini biliyor. Bu nedenle, sayfalama davranışının tamamen açıklayıcı bir şekilde tanımlanmasına olanak tanıyan CSS Sayfa Şablonları adlı bir teklif üzerinde çalışıyoruz.
CSS sayfa şablonlarının yaygın kullanım alanlarından birine 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. Ayrıca, iki akışın yer alacağı "combined-articles" adlı üçüncü bir seçici tanımlar. overflow-style mülkünün "combined-articles" seçicisine basitçe eklenmesi, içeriğin x ekseni boyunca veya yatay olarak otomatik olarak sayfalara bölünmesi gerektiğini gösterir:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Akışlar tanımlanıp istenen taşma davranışı belirtildiğinde 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" söz dizimi kullanılarak tanımlanır. Yukarıdaki kod snippet'inde, her biri bir sütuna karşılık gelen üç alan tanımladık. "article-flow" kaynağındaki metin soldaki ve sağdaki sütunlarda, "timeline-flow" kaynağındaki metin ise ortadaki sütunda gösterilir. Sonuç şu şekilde görünebilir:
Makale metninin (sol ve sağ sütunlardaki metin) İngilizce, ortadaki zaman çizelgesinin ise Almanca olduğunu unutmayın. Ayrıca, JavaScript koduna gerek kalmadan yatay olarak doküman sayfaları. Her şey CSS'de tamamen açıklayıcı bir şekilde yapıldı.
CSS sayfa şablonları hâlâ bir öneridir ancak bunları hemen denemenize olanak tanımak için JavaScript "shim" (polyfill olarak da bilinir) kullanan bir prototipimiz var.
CSS bölgeleri hakkında genel olarak daha fazla bilgi edinmek için html.adobe.com adresindeki CSS Bölgeleri sayfasına göz atın.
CSS hariç tutmaları
Gerçek bir dergi düzeni elde etmek için metni bölgeler arasında akıcı bir şekilde aktarabilmek 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 üretim kalitesini web'e getiriyor.
Aşağıdaki ekran görüntüsü, CSS hariç tutmaları prototipinden alınmıştır ve büyük bir kaya oluşumunun dış çizgisiyle eşleşen bir yol boyunca dinamik olarak akan metni gösterir:
Bunun tam tersi, aşağıdaki ekran görüntüsünde gösterilmektedir: düzensiz şekilli poligonların 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ışıyor. 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 göz atın. Adobe'ın CSS hariç tutmaları için temel teknolojiyle ilgili çalışmalarına daha ayrıntılı bir bakış için Hans Muller'in Yatay Kutu: CSS Hariç Tutmaları İçin Poligon Kesişimi başlıklı blog yayınını inceleyin.
CSS Bölgelerinin ve CSS Hariç Tutmalarının Mevcut Durumu
CSS bölgeleri ve CSS hariç tutmaları hakkında ilk kez Google I/O 2011'deki Adobe Geliştirici Pod'unda herkese açık olarak konuştum. 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) Google I/O'ya tekrar katıldım. Bu kez iş arkadaşım Vincent Hardy ve Google'dan Alex Danilo ile birlikte sunum yaptı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 uygulanmakta ve şu anda Mozilla'nın Firefox için 2012 yol haritasında yer almaktadır. Safari'nin bir sonraki ana sürümü, CSS Bölgeleri spesifikasyonunun büyük bir kısmını destekleyecektir. Sonraki güncellemeler ise kalan kısmı içerecektir.
Nisan 2011'de W3C'ye sunduğumuz ilk öneriden bu yana CSS Bölgeleri ve CSS Hariç Tutma özellikleriyle ilgili kaydettiğimiz ilerlemenin ayrıntılı zaman çizelgesi aşağıda verilmiştir:
Sonuç
Adobe, InDesign gibi araçlar aracılığıyla metin, yazı tipi ve genel olarak masaüstü yayıncılığı konusunda çok fazla deneyime sahiptir. Web, metin için zaten çok güçlü bir platform olsa da bilgi ve deneyimlerimizi kullanarak metin sunumunu daha da ileriye taşımak istiyoruz. CSS bölgeleri ve CSS hariç tutmaları, içeriğin anlamsal olarak yapılandırılmış kalmasına olanak tanırken gerçek bir dergi düzeni ve sonuç olarak çok daha etkileyici bir web sunar.