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şımanın yollarını ararken web'in metin özelliklerini daha da ileriye taşımak bizim için bariz bir başlangıç noktası gibi görünüyordu. Web'de genellikle metin için tek sütunlu, dikey yönlendirme kullanılır. Metni grafiklerin etrafına yerleştirmek ve hatta CSS ile birden fazla sütun halinde biçimlendirmek mümkün olsa da web'de gerçek bir dergi benzeri düzen elde etmek hâlâ çok zordur. Adobe, CSS Bölgeleri ve CSS Hariç Tutmaları ile masaüstü yayıncılığın gücünü modern tarayıcılara getirme çalışmaları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 dokümanda, metnin resimlerdeki şekillerin etrafına sarmalanması için CSS Hariç Tutmaları, metni sütunlar halinde ve alıntının etrafında biçimlendirmek için de CSS Bölgeleri kullanılmıştır:
CSS Bölgeleri
CSS bölgeleri ile ilgili ayrıntılara girmeden önce, bölgelerin Google Chrome'da nasıl etkinleştirilebileceğini ele almak istiyorum. CSS Bölgeleri'ni 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'un 20. sürümünden (tam olarak 20.0.1132.57 sürümü) itibaren CSS Bölgeleri, chrome://flags arayüzü üzerinden etkinleştirilir. CSS Bölgeleri'ni 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 (Ctrl/Cmd + F) özelliğini 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 flag'leri hakkında daha fazla bilgi için Chrome Flag'leri Hakkında Her Şey başlıklı blog yayınımı 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ş 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ımı gösterilmektedir:
Şimdi 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ıyım. Çalışmalarımı sık sık Creative Commons lisansı altında internette yayınlıyorum. Çalışmalarımın mümkün olduğunca çok cihazda ve tarayıcıda çalışabilmesi için genellikle şuna benzer son derece basit bir biçim kullanıyorum:
CSS Bölgeleri'ni kullanarak hem görsel açıdan daha ilgi çekici hem de gezinmesi daha kolay ve okuması daha rahat olduğu için çok daha işlevsel bir deneyim oluşturabildim:
Bu prototipte, CSS bölgelerini gösterme özelliğini ekledim. Aşağıdaki ekran görüntüsünde, bölgelerin ortadaki bir grafiği ve alıntıyı çevreleyen 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ı kullanın ve 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 bloğunun bölgeler arasında akmasını sağlamak için gereken CSS son derece basittir. Aşağıdaki snippet,"content" kimliğine sahip bir div'e "article" adlı bir adlandırılmış akış atar ve aynı "article" adlandırılmış akışını "region" sınıfına sahip herhangi bir öğeye atar. Sonuç olarak, "content" öğesinin içinde yer alan metin, "region" sınıfına sahip herhangi bir öğeden 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'inin içindeki metnin, sunumu hakkında hiçbir bilgiye sahip olmadığına dikkat edin. Başka bir deyişle, çeşitli bölgelerden geçerken bile anlamı tamamen korunabilir. Ayrıca bölgeler yalnızca öğe olduğundan, diğer öğeler gibi CSS kullanılarak konumlandırılır ve boyutlandırılır. Bu nedenle, duyarlı tasarım ilkeleriyle mükemmel şekilde uyumludur. Öğeleri adlandırılmış bir akışın parçası olarak belirlemek, belirtilen metnin bu öğelerden otomatik olarak akacağı anlamına gelir.
CSS Nesne Modeli
CSS Nesne Modeli (CSSOM), CSS ile çalışmak için JavaScript API'lerini tanımlar. CSS Bölgeleri ile ilgili yeni API'lerin listesini aşağıda bulabilirsiniz:
document.webkitGetNamedFlows(): Belgede 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 referans 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 referans almak için "article" dizesini iletirsiniz.WebKitNamedFlow: Aşağıdaki özelliklere ve işlevlere sahip, adlandırılmış bir buz kütlesinin nesne temsili: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 bir dize değeri.overset: Aşağıdaki durumlarda geçerli olan bir boole özelliği:false(adlandırılmış akışın içeriği ilişkili bölgelere sığdığında)true, içerik sığmadığında ve tüm içeriği barındırmak için daha fazla bölge gerektiğinde kullanılır.
getContent(): Adlandırılmış akışa giren düğümlere referanslar içeren bir koleksiyon döndüren işlev.getRegions(): Adlandırılmış akışın 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, özellikle adlandırılmış bağlantılar gibi öğeler içeren bölgeleri bulmak için kullanışlı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ölgeninwebkitRegionOversetözelliğinin değişmesine neden olur. Bu etkinlik, kaba düzen değişikliklerini dinlemek için kullanışlıdır. Bu, önemli bir şey olduğunu ve düzenin dikkat gerektirebileceğini gösterir (ör. daha fazla bölge gerekiyor, bazı bölgeler boş olabilir vb.).webkitregionfragmentchangeetkinliği. Bu düzenlemenin yapıldığı sırada uygulanmamıştır. Bu etkinlik, ilişkili içeriğin düzeni herhangi bir nedenle değiştiğindeWebkitNamedFlowüzerinde tetiklenir.webkitregionoversetchangeetkinliğine benzer ancakwebkitRegionOversetözelliklerindeki değişikliklerden bağımsızdır. Bu etkinlik, adlandırılmış akışın tüm düzenini etkilemesi gerekmeyen ayrıntılı düzen değişikliklerini dinlemek için kullanışlı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: Öğelereflow-fromCSS özelliği atandığında öğeler bölge haline gelir. Bu öğelerinwebkitRegionOversetözelliği vardır. Bu özellik, adlandırılmış bir akışın parçasıysa akıştaki içeriğin bölgeyi aşıp aşmadığını gösterir. webkitRegionOverset için olası değerler şunlardır:- Bölgenin barındırabileceğinden daha fazla içerik varsa "overflow" (taşma)
- İçerik, bölgenin sonundan önce duruyorsa "fit"
- İçerik bölgeye ulaşmadıysa "boş"
CSSOM'un başlıca kullanım alanlarından biri, webkitregionoversetchange etkinliklerini dinlemek ve değişen miktarlarda metin barındırmak için dinamik olarak bölge eklemek veya kaldırmaktır. Örneğin, biçimlendirilecek metin miktarı tahmin edilemiyorsa (kullanıcı tarafından oluşturulmuş olabilir), tarayıcı penceresi yeniden boyutlandırılırsa veya yazı tipi boyutu değişirse akıştaki değişikliğe uyum sağlamak için bölgeler eklemek veya kaldırmak gerekebilir. Ayrıca, içeriğinizi sayfalara ayırmak istiyorsanız DOM'u ve bölgelerinizi dinamik olarak değiştirecek bir mekanizmaya ihtiyacınız vardır.
Aşağıdaki JavaScript kodu snippet'i, gerektiğinde dinamik olarak bölge eklemek için CSSOM'un kullanımını göstermektedir. Basitlik açısından, bölgelerin kaldırılması veya bölgelerin boyut ve konumlarının tanımlanması işlemlerini gerçekleştirmez. Yalnızca tanıtım 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 örnekleri sayfasında daha fazla demo bulabilirsiniz.
CSS sayfa şablonları
CSSOM'dan yararlanmak, sayfalama ve duyarlı düzen gibi özellikleri uygulamanın muhtemelen en güçlü ve esnek yoludur. Ancak Adobe, tasarımcıların ve geliştiricilerin nispeten genel sayfalama özelliklerini daha kolay bir şekilde elde etmek isteyeceklerini bilecek kadar uzun süredir metin ve masaüstü yayıncılık araçlarıyla çalışmaktadır. Bu nedenle, sayfalama davranışının tamamen bildirimli olarak 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 birini inceleyelim. 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. "combined-articles" seçicisinin içine overflow-style özelliğinin eklenmesi, içeriğin x ekseni boyunca veya yatay olarak otomatik olarak sayfalandırılması 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ımlandığına ve istenen taşma davranışı belirtildiğine göre 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ımlıyoruz. "article-flow" metni soldaki ve sağdaki sütunlara, "timeline-flow" metni ise ortadaki sütuna akar. Sonuç şuna benzer:
Makale metninin (sol ve sağ 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 sayfalanır. Her şey tamamen CSS'de bildirimli olarak yapıldı.
CSS Sayfa Şablonları henüz teklif aşamasında olsa da, bunları hemen denemenize olanak tanımak için JavaScript "shim" (diğer adıyla polyfill) kullanan bir prototipimiz var.
Genel olarak CSS Bölgeleri hakkında daha fazla bilgi edinmek için html.adobe.com adresindeki CSS Bölgeleri sayfasını inceleyin.
CSS Hariç Tutmaları
Gerçek bir dergi düzeni elde etmek için metni bölgeler arasında akıtmak yeterli değildir. Yüksek kaliteli ve görsel açıdan ilgi çekici masaüstü yayıncılığın kritik bir unsuru, metnin düzensiz grafiklerin ve şekillerin etrafında veya içinde akmasını sağlama yeteneğidir. CSS Hariç Tutmaları, bu düzeyde bir prodüksiyon kalitesini web'e taşıyor.
Aşağıdaki ekran görüntüsü, bir CSS Exclusions prototipinden alınmıştır ve büyük bir kaya oluşumunun konturuna uyan bir yolun etrafında dinamik olarak 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ına veya içine yerleştirebilmek 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ç Tutma'nın geri kalanının üzerine inşa edildiği temeller haline gelir.
CSS Hariç Tutmaları hakkında daha fazla bilgi için html.adobe.com adresindeki CSS Hariç Tutmaları sayfasını inceleyin. Adobe'nin CSS Hariç Tutmaları için temel teknolojiyle ilgili çalışmalarına daha ayrıntılı bir bakış için Hans Muller'in Horizontal Box: Polygon Intersection for CSS Exclusions (Yatay Kutu: CSS Hariç Tutmaları için Çokgen Kesişimi) başlıklı blog yayınını inceleyin.
CSS Bölgeleri ve CSS Hariç Tutmalarının Durumu (2012)
CSS Bölgeleri ve CSS Hariç Tutmaları hakkında ilk kez Google I/O 2011'deki Adobe Developer Pod'da herkese açık olarak konuştum. O zamanlar demoları kendi özel prototip tarayıcımızda gösteriyordum. Çok coşkulu bir karşılama oldu ancak izleyiciler, gösterdiğim işlevlerin hiçbirinin henüz büyük tarayıcıların hiçbirinde kullanılamadığını öğrendiğinde hayal kırıklığına uğradı.
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ık (sunumu 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 zaten mevcut (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'da bile kullanıma sunuldu:
Ayrıca hem CSS Bölgeleri hem de CSS Hariç Tutmaları, Internet Explorer 10 önizlemesinde uygulanmıştır 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 çoğunu desteklemeli ve sonraki güncellemeler geri kalanını içermelidir.
Aşağıda, Nisan 2011'de W3C'ye sunduğumuz ilk tekliften bu yana CSS Bölgeleri ve CSS Hariç Tutmaları ile kaydettiğimiz ilerlemenin ayrıntılı bir zaman çizelgesi yer almaktadır:
Sonuç
Adobe, InDesign gibi araçlar sayesinde metin, yazı tipi ve genel olarak masaüstü yayıncılık konusunda çok büyük bir deneyime sahiptir. Web, metin için zaten çok güçlü bir platform olsa da bilgi ve deneyimimizi 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ını sağlarken aynı zamanda gerçek dergi benzeri bir düzen ve sonuçta çok daha etkileyici bir web sağlar.