Görsel Biçimleme Modeli
görsel biçimleme modeli
Görsel biçimleme modeline giriş
Bu bölümde ve sonraki bölümde görsel biçimleme modeli, yani kullanıcı arayüzlerinin belge ağacını görsel ortam için nasıl işleyeceği açıklanacaktır.
Görsel biçimleme modelinde, belge ağacındaki her eleman çerçeve modeline göre çerçeve üretir (veya üretmez). Bu çerçevelerin yerleşimi şunlara bağlıdır:
Çerçeve boyutları ve
türü.Konumlama şeması (normal
akış, yüzen çerçeveler ve mutlak konumlama).Belge ağacındaki elemanlar arasındaki ilişkilerHarici bilgi (görüntü alanının boyutları, resimlerin yerleşik boyutları gibi).
Bu ve sonraki bölümde tanımlanan nitelikler sürekli ortam ve sayfalı ortamda da uygulanır. Bununla birlikte kenar dış boşluk niteliklerinin anlamları sayfalı ortamdaki anlamlarından farklıdır (ayrıntılar için sayfa modeli tanımına bakınız).
Görsel biçimleme modeli biçimlemeyi bütün ayrıntıları ile belirtmez (örneğin harfler arası boşluk algoritmasını belirtmez). Bu belirtimin kapsamına alınmamış bu biçimleme ayrıntılarında uyumlu kullanıcı arayüzleri farklı davranabilir.
görüntü alanı
Görüntü Alanı
Sürekli ortamın kullanıcı arayüzleri bir belgeyi incelemek isteyen kullanıcılarına belgeyi bir görüntü alanından sunar (ekran veya bir pencere). Kullanıcı arayüzleri görüntü alanının boyutları değiştikçe belgenin yerleşimini değiştirebilir (ilk taşıyıcı blok tanımına bakınız). Görüntü alanı belgenin ilk taşıyıcı bloğundan küçük olduğunda, kullanıcı arayüzleri kaydırma mekanizmasını devreye sokmalıdır. Çoğunlukla tuval başına birden fazla görüntü alanı vardır, fakat kullanıcı arayüzleri bir tuvalden fazlasını görüntüleyebilirler (aynı belgenin farklı görünümlerini sağlamak gibi).
taşıyıcı blok
Taşıyıcı bloklar
BB2'de çerçeve konumu ve boyutları çoğunlukla taşıyıcı blok denen bir dikdörtgen çerçeveye göre hesaplanır. Genelde üretilen çerçeveler astsal çerçeveler için taşıyıcı blokluk yaparlar; başka bir deyişle bir çerçeve astsalları için kendini bir taşıyıcı blok haline getirir. "Bir çerçevenin taşıyıcı bloku" demek, "çerçevenin varlığını sürdürdüğü taşıyıcı blok" demektir, birinin ürettiği birşey değildir.
Her çerçeve kendi taşıyıcı blokuna göreli bir konumla belirtilir, fakat taşıyıcı blokla sınırlanmaz; dışına taşabilir.
ilk taşıyıcı bloktaşıyıcı blokilkBelge ağacının kökünün ürettiği çerçeve, yerleşimin kalanı için ilk taşıyıcı blok olarak hizmet verir.
İlk taşıyıcı blokun genişliği kök elemannın width niteliği ile belirtilebilir. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler (kullanıcı arayüzü görüntü alanının o anki genişliğini kullanır).
İlk taşıyıcı blokun yüksekliği kök elemannın height niteliği ile belirtilebilir. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.
İlk taşıyıcı blok konumlanamaz ve yüzdürülemez; başka bir deyişle, kullanıcı arayüzleri kök elemanda belirtildiği takdirde position ve float niteliklerini yoksayar.
Bir taşıyıcı blokun boyutlarının nasıl hesaplandığı ayrıntılı olarak sonraki, bölümünde açıklanmıştır.
Çerçeve üretiminin denetimi
Aşağıdaki bölümlerde BB2'de üretilebilen çerçeve türleri açıklanacaktır. Bir çerçevenin türü görsel biçimleme modelindeki davranışının kısmen belirleyicisidir. Bir çerçevenin türü display niteliği ile belirtilir.
blok seviyesinden eleman
Blok seviyesinden elemanlar ve blok çerçeveleri
Blok seviyesinden elemanlar kaynak belgenin görsel olarak blokları (örn, paragraflar) olan elemanlardır. Bir elemanı blok seviyesinden eleman yapan display niteliği değerleri: block, list-item, table, compact ve run-in (son ikisi için ayrıca ve bölümlerine de bakınız).
ilkesel blok çerçevesiblok çerçevesiBlok seviyesinden elemanlar sadece blok çerçevelerini içeren bir ilkesel blok çerçevesi üretir. Bir ilkesel blok çerçevesi astsalları ve üretilen içerik için taşıyıcı blok olmaktan başka, konumlama şemasına dahil bir çerçevedir. İlkesel blok çerçeveleri blok biçimleme bağlamının parçalarıdır.
Bazı blok seviyesinden elemanlar ilkesel çerçeve dışında kalan ek çerçeveler üretirler: list-item elemanları ve imliler. Bu ek çerçeveler ilkesel çerçeveye göre yerleştirilirler.
Anonim blok çerçeveleri
Şöyle bir belge olsun:
Bir metin ...
Başka bir metin ...
]]>
anonim
(ayrıca, div ve p elemanlarının ikisi için de display: block olsun). Burada div elemanı hem satıriçi hem de blok içeriğe sahip görünmektedir. Biçimlemeyi daha kolaylaştırmak için "Bir metin ..." dizgesinin bir anonim blok çerçevesinde yer aldığı varsayılır.
[Açıklama]
Yukarıdaki örnek için üç çerçevenin yerleşimini gösteren şekil
Başka bir deyişle: İçinde bir blok çerçevesi (yukarıdaki p gibi) bulunan bir blok çerçevesi (yukarıda div için üretilen gibi) varsa, satıriçi çerçeveler, bir anonim blok çerçevesi ile sarmalanarak ayrı bir blok çerçevesi içinde kalmaya zorlanırlar.
Bu model aşağıdaki kurallarla:
/* Bilgi: HTML tarayıcı bu kuralları umursamayabilir */
body { display: inline }
p { display: block }
bu HTML belgeye uygulanmış olsun:
Bir blok tarafından kesintiye uğratılan anonim metinBu anonim metin P elemanından öncedir.
Bu metin P elemanının içeriğidir.
Bu anonim metin P elemanından sonradır.
]]>
body elemanı sırayla bir anonim metin parçası (A1), bir blok seviyesinden eleman ve başka bir anonim metin (A2) içermektedir. Bu yapı, A1'i sarmalayan bir anonim blok çerçevesi, p blokunun çerçevesi ve A2'yi sarmalayan başka bir anonim blok çerçevesi ile bunların üçünü birden içeren bir anonim blok çerçevesinden (body elemanının çerçevesi) oluşur.
Anonim çerçeveler niteliklerini kendilerini içeren ve anonim olmayan çerçeveden miras alırlar (ilk örnekte div elemanından). Miras alınmayan nitelikler ilk değerleriyle uygulanırlar. Örneğin, anonim çerçevelerin yazıtipi div elemanından miras alınacak ama kenar dış boşlukları 0 olacaktır.
satıriçi seviyeden elemanlar
Satıriçi seviyeden elemanlar ve satıriçi çerçeveler
Satıriçi seviyeden elemanlar kaynak belgenin içeriğinde blok bulunmayan elemanlarıdır; içerik satırlara yayılmıştır (bir paragrafın metninin vurgulu kısımları, satıriçi resimler gibi). Bir elemanı satıriçi seviyeden eleman yapan display niteliği değerleri: inline, inline-table, compact ve run-in ( ve bölümlerine de bakınız).
Satıriçi seviyeden elemanlar satıriçi çerçeveler üretir.
Satıriçi çerçeveler çeşitli biçimleme bağlamlarının parçaları olabilirler:
Blok çerçevesi içinde, satıriçi biçimleme bağlamının çerçeveleri olarak.
Bir blok çerçevesinin dış boşluğuna konumlanmış bir girintili başlık çerçevesi olarak.
Bir blok çerçevesinin dışına konumlanmış bir İmleme çerçevesi olarak.
p elemanı çeşitli satıriçi çerçeveler içeren bir blok çerçevesi üretir. "önemli" dizgesinin çerçevesi em satıriçi elemanı tarafından üretilen bir satıriçi çerçeveyken, diğer çerçeveler ("Oldukça" ve "birşeyler") bir blok seviyesinden eleman (p) tarafından üretilen satıriçi çerçeveler olup bunları üreten satıriçi seviyeden elemanlar olmadığından bunlara anonim satıriçi çerçeveler denir.
Böyle anonim satıriçi çerçeveler kalıtsal nitelikleri kendi ebeveyn blok çerçevelerinden miras alırlar. Miras alınmayan nitelikler kendi ilk değerlerini alırlar. Örnekteki anonim satıriçi çerçeveler renklerini p'den miras alırlar fakat artalanları saydamdır.
Bağlamı anonim çerçeve türleriyle daha fazla karıştırmamak için blok/satıriçi ayrımı yapmadan bütün anonim çerçevelerden bu belirtim boyunca anonim çerçeveler olarak bahsedilecektir.
Tabloları biçimlerken ortaya çıkan başka anonim çerçeve türleri de vardır.
Bir girintide başlık çerçevesi şöyle bir davranış sergiler:
Bir girintide başlık çerçevesinin ardından bir blok çerçevesi (yüzen veya mutlak konumlu olmayan) geliyorsa, girintideki başlık çerçevesi bir tek satırlık satıriçi çerçeve gibi biçimlenir. Elde edilen çerçevenin genişliği blok çerçevesinin dış boşluk genişliklerinden biri ile karşılaştırılır. Karşılaştırma için sol boşluğun mu yoksa sağ boşluğun mu kullanılacağına her iki çerçevenin taşıyıcı çerçevesini üreten eleman için belirtilen direction niteliğinin değeri belirler. Eğer satıriçi çerçevenin genişliği bu genişlikten küçük veya ona eşitse, satıriçi çerçeve boşluğun içine biraz aşağıda açıklandığı gibi konumlanır.
Aksi takdirde, girintide başlık çerçevesi bir blok çerçevesi haline gelir.
Girintide başlık çerçevesi dış boşluğun içine şöyle yerleştirilir: Blokun ilk satır çerçevesinin (sol veya sağ) dışındadır fakat satır çerçevesinin yüksekliğinin hesabında etkili olur. Girintide başlık çerçevesinin vertical-align niteliği bu satır çerçevesine göre düşey konumu belirler. Girintide başlık çerçevesinin yatay konumu daima blok çerçevesinin kenar dış boşluğunun içinde kalır.
Tek satır olarak biçimlenemeyen bir eleman ardından gelen çerçevenin kenar dış boşluğuna yerleştirilemez. Örneğin, HTML'deki br elemanını içeren bir girintide başlık elemanı daima bir blok çerçevesi olarak biçimlenecektir (br için varsayılan öntanımlı biçem, bir satırsonu karakteri yerleştirmektir). Çok satırlı metinleri kenar dış boşluklarına yerleştirmek için float niteliği çoğunlukla daha uygundur.
Girintide başlık (compact) çerçevesi örneği:
Girintide başlık çerçevesi örneği
Kısa
Açıklama burada olacak.
Boşluk için fazla uzun
Açıklama burada olacak.
]]>
Bu örnek şöyle biçimlenebilirdi:
Kısa Açıklama burada olacak.
Boşluk için fazla uzun
Açıklama burada olacak.
text-align niteliği girintide başlık çerçevesini kenar dış boşluğu içinde yatayda hizalamak için kullanılabilir: boşluğun sol kenarına (left), sağ kenarına (right) veya ortasına (center). justify değeri uygulanmaz ve boşluğun yönünü belirleyen bloğun direction niteliğine uygun olarak left veya right değeri belirtilmiş gibi işlem yapılır. (Yön soldan sağa (ltr) ise left; sağdan sola (rtl) ise right değeri kullanılır.)
Girintide başlık çerçevelerinin üretilen içerikle nasıl etkileştiği hakkında bilgi edinmek için bölümüne bakınız.
Bir gömme başlık çerçevesi şöyle bir davranış sergiler:
Bir gömme başlık çerçevesinin ardından bir blok çerçevesi (yüzen veya mutlak konumlu olmayan) geliyorsa, gömme başlık çerçevesi blok çerçevesinin ilk satıriçi çerçevesi haline gelir.
Aksi takdirde, gömme başlık çerçevesi bir blok çerçevesi haline gelir.
Bir gömme başlık (run-in) çerçevesi bir başlığı paragrafın gömülü başlığı haline getirmek için kullanışlıdır:
Bir gömme başlık çerçevesi örneği
Bir gömme başlık
Ve başlığın devamında yer alacak paragraf metni.
]]>
Bu örnek şöyle biçimlenebilirdi:
Bir gömme başlık Ve başlığın
devamında yer alacak paragraf
metni.
Gömme başlık çerçeveleri niteliklerini görsel olarak parçası haline geldikleri blok çerçevesinden değil, kaynak ağacındaki ebeveyninden miras alır.
Gömme başlık çerçevelerinin üretilen içerikle nasıl etkileştiği hakkında bilgi edinmek için bölümüne bakınız.
Bu değer bir elemanın bir ilkesel blok çerçevesi üretmesine sebep olur.
Bu değer bir elemanın bir veya daha fazla sayıda satıriçi çerçeve üretmesine sebep olur.
Bu değer bir elemanın (HTML'deki li gibi) bir ilkesel blok çerçevesi ve bir liste öğesi satıriçi çerçevesi üretmesine sebep olur. Listeler ve liste biçimleme örnekleri hakkında bilgi edinmek için bölümüne bakınız.
Bu değer bir imleyici olarak bir çerçeveden önce veya sonra bir üretilen içerik bildirir. Bu değer sadece, bir blok seviyesinden elemanlara eklemlenmiş :before ve :after sözde elemanları ile kullanılabilir. Diğer durumlarda bu değer inline olarak yorumlanır. Daha fazla bilgi için bölümüne bakınız.
Bu değer bir elemanın biçimleme yapısında hiçbir çerçeve üretmemesine sebep olur (yani, elemanın yerleşime hiçbir etkisi olmaz; başka bir deyişle, gösterilmez). Ayrıca astsal elemanlar da çerçeve üretemez ve bu davranış astsalların display nitelikleriyle etkisiz kılınamaz.
Lütfen dikkat ediniz: none değeri bir görünmez çerçeve oluşturmaz; gizli veya açık hiçbir çerçeve oluşmaz. BB, bir elemanın biçimleme yapısını etkileyen ancak görünmeyen çerçeveler üretmesini mümkün kılan mekanizmalar da içerir. Ayrıntılar için lütfen bölümüne bakınız.
Bu değerler bağlama göre bir blok veya satıriçi çerçeve üretirler. Nitelikler bu çerçevelere son durumlarına göre (satıriçi/blok seviyesinden) uygulanır. Örneğin, white-space niteliği sadece çerçevenin bir blok çerçevesi haline gelmesi durumunda uygulanır.
Bu değerler bir elemanın bir tablo elemanı gibi davranmasına sebep olur. (Kısıtlamalara konu olan durumlar bölümünde açıklanmıştır.)
display niteliğinin ilk değeri inline olsa bile kullanıcı arayüzünün öntanımlı biçembendindeki kurallar bu değere üstün gelebilir. HTML 4.0 için bölümüne bakınız.
display niteliği örnekleri:
p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* resimler gösterilmez */
uyumlulukyoksaymakUyumlu HTML kullanıcı arayüzleri display niteliğini yoksayabilirler.
konumlamaşeması
Konumlama şemaları
2'de bir çerçeve üç konumlama şemasına göre yerleştirilebilir:
. BB2'de normal akışa şunlar dahildir:
blok çerçevelerinin blok biçimleme bağlamı,
satıriçi çerçevelerin satıriçi biçimleme bağlamı, blok ve satıriçi çerçevelerin göreli konumlanması, girintide ve
gömme başlık çerçevelerinin konumlanması.
. Yüzen eleman modelinde, bir çerçeve önce normal akışa göre yerleştirildikten sonra akıştan alınıp sola veya sağa mümkün olduğunca uzağa kaydırılır. İçerik bir yüzen çerçevenin yanından akıp gidebilir.
. Mutlak konumlama modelinde, bir çerçeve normal akıştan tamamiyle kaldırılıp (sonraki kardeşleri üzerinde etkisi olmayacak şekilde), kendisine bir taşıyıcı bloka göre bir konum atanır.
BB2 konumlama şeması,yazarlara, yerleşimde kullanılan imlenim hilelerinden (boşluk oluşturmak için görünmez resimler kullanmak gibi) kaçınmalarını mümkün kılarak belgelerini daha erişilebilir yapmalarını sağlayabilir.
Bir konumlama şemasının seçimi: position niteliği
position ve float nitelikleri bir çerçevenin konumunun hesaplanmasında hangi BB2 konumlama algoritmasının kullanılacağını belirlerler.
positionniteliklerpositionpositionstatic | relative | absolute | fixed | inheritstatictüm elemanlar, fakat üretilen içeriğe değilhayırgörsel
Niteliğin değerlerinin anlamları (Değerlerin Türkçeleri köşeli ayraç içinde yanlarına yazılmıştır):
Çerçeve, normal akışa göre yerleştirilecek normal bir çerçevedir. top, right, bottom ve left nitelikleri uygulanır.
Çerçevenin konumu önce normal akışa göre hesaplanır (buna normal akıştaki konum denir) sonra da bu konuma göreli konuma yerleştirilir. Bir B çerçevesi göreli olarak konumlandığında, ondan sonra gelen çerçevenin konumu B'nin normal akıştaki konumuna göre hesaplanır, göreli konumuna göre değil.
Çerçevenin konumu (ve muhtemelen boyutları) left, right, top ve bottom nitelikleri ile belirtilir. Bu niteliklerle belirtilen uzunluklar çerçevenin taşıyıcı blokuna göredir. Mutlak konumlu çerçeveler normal akışın dışına alınır, böylece kendinden sonra gelen kardeşlerinin yerleşimlerinde etkili olmazlar. Ayrıca, mutlak olarak konumlanmış çerçevelerin kenar dış boşlukları olsa bile bunlar diğer kenar dış boşlukları ile örtüşmezler.
Çerçevenin konumu absolute değerindeki gibi hesaplanır ancak ek olarak çerçevenin konumu bazı etkenlere göre sabitlenir. Sürekli ortamda, çerçeve görüntü alanına göre sabitlenir (ve kaydırma yapıldığında hareket etmez). Sayfalı ortamda, sayfa bir görüntü alanında görünüyorsa bile (örn, yazıcı önizleme), sayfaya göre sabitlenir. Yazarlar fixed değerini ortama bağlı bir yolla belirtmek isteyebilirler. Örneğin, bir yazar bir çerçevenin ekranda bir görüntü alanının tepesinde kalmasını ama basılan her sayfanın tepesinde olmamasını isteyebilir. Bu iki istek aşağıdaki gibi bir @media kuralı kullanılarak belirtilebilir:
konumlu elemankonumlu çerçeveBir elemanın position niteliğinin değeri static olmadığı takdirde bu eleman bir konumlu elemandır. Konumlu elemanlar konumlu çerçeveler üretirler ve dört niteliğe göre yerleştirilirler:
topniteliklertoptopuzunluk | yüzdelik | auto | inheritautokonumlu elemanlarhayırtaşıyıcı blokun yüksekliği ölçüt alınırgörsel
Bu nitelik, bir çerçevenin üst kenar dış boşluğunun üst kenarının çerçevenin taşıyıcı blokunun üst kenarından ne kadar aşağıda olduğunu belirtir. Göreli olarak konumlanan çerçevelerde bu mesafe çerçevenin kendi üst kenarına göredir (yani, çerçeve normal akışa göre konumlandıktan sonra bu niteliğe göre yerine kaydırılır).
Taşıyıcı bloku bir blok seviyesinden elemana dayalı' mutlak olarak konumlanan çerçeveler için, bu nitelik bu elemanın kenar iç boşluğunun iç kenarına göre bir uzaklık belirtir.
Bu nitelik, bir çerçevenin sağ kenar dış boşluğunun dış kenarının çerçevenin taşıyıcı blokunun sağ kenarından ne kadar solda olduğunu belirtir. Göreli olarak konumlanan çerçevelerde bu mesafe çerçevenin kendi sağ kenarına göredir.
Taşıyıcı bloku bir blok seviyesinden elemana dayalı' mutlak olarak konumlanan çerçeveler için, bu nitelik bu elemanın kenar iç boşluğunun iç kenarına göre bir uzaklık belirtir.
bottomniteliklerbottombottomuzunluk | yüzdelik | auto | inheritautokonumlu elemanlarhayırtaşıyıcı blokun yüksekliği ölçüt alınırgörsel
Bu nitelik, bir çerçevenin alt kenar dış boşluğunun dış kenarının çerçevenin taşıyıcı blokunun alt kenarından ne kadar yukarıda olduğunu belirtir. Göreli olarak konumlanan çerçevelerde bu mesafe çerçevenin kendi alt kenarına göredir.
Taşıyıcı bloku bir blok seviyesinden elemana dayalı' mutlak olarak konumlanan çerçeveler için, bu nitelik bu elemanın kenar iç boşluğunun iç kenarına göre bir uzaklık belirtir.
Bu nitelik, bir çerçevenin sol kenar dış boşluğunun dış kenarının çerçevenin taşıyıcı blokunun sol kenarından ne kadar sağda olduğunu belirtir. Göreli olarak konumlanan çerçevelerde bu mesafe çerçevenin kendi sol kenarına göredir.
Taşıyıcı bloku bir blok seviyesinden elemana dayalı' mutlak olarak konumlanan çerçeveler için, bu nitelik bu elemanın kenar iç boşluğunun iç kenarına göre bir uzaklık belirtir.
Bu dört niteliğin değerlerinin anlamları:
Taşıyıcı blokun kenarından uzaklık.
taşıyıcı blokun kenarından uzaklığın, left ve right nitelikleri için taşıyıcı blokun genişliğine, top ve bottom nitelikleri için taşıyıcı blokun yüksekliğine oranı. Eğer taşıyıcı blokun yüksekliği açıkça belirtilmemişse (yani, içeriğin yüksekliğine bağlıysa) yüzdelik değer auto gibi yorumlanır.
Bu değerin etkisi bu değere sahip olan ilgili diğer niteliklere göre değişir. Ayrıntılar için mutlak olarak konumlanmış, yeri değiştirilemeyen elemanların yükseklik ve genişlikleri ile ilgili bölümlere bakınız.
Mutlak olarak konumlanmış çerçeveler için, mesafeler çerçevenin taşıyıcı bloku ile ilgilidir. Göreli olarak konumlanan çerçevelerde mesafeler çerçevenin kendi dış kenarları ile igilidir (yani, çerçeve normal akışa göre konumlandıktan sonra bu niteliklere göre yerine kaydırılır).
konumlamanormal akış
Normal akış
biçimleme bağlamı
Bir biçimleme bağlamına ait olan normal akıştaki çerçeveler, blok veya satıriçi seviyesinden olabilirler ancak aynı anda iki seviyede birden olamazlar. Blok çerçeveleri bir blok biçimleme bağlamında etkili olurken satıriçi çerçeveler bir satıriçi biçimleme bağlamında etkili olurlar.
Blok biçimleme bağlamı
Blok biçimleme bağlamında, çerçeveler, bir taşıyıcı blokun tepesinden başlayarak aşağı doğru birer birer yerleştirilirler. Ardışık iki kardeş blok arasındaki düşey uzaklık margin nitelikleri ile belirlenir. Bir blok biçimleme bağlamında düşey yönde komşu blokların alt ve üst kenar dış boşlukları kendi aralarında örtüşürler.
Blok biçimleme bağlamında, her çerçevenin sol dış kenarı taşıyıcı blokun sol kenarına dokunur (sağdan sola biçimlemede sağ kenarlar birbirine dokunur). Yüzen elemanların varlığında bile bu değişmez (sadece, yüzen çerçeveden dolayı bir çerçevenin içeriği biraz küçülebilir).
Sayfalı ortamdaki sayfa kesmeleri hakkında ayrıntılı bilgi için bölümüne bakınız.
Satıriçi biçimleme bağlamı
satır çerçevesi
Satıriçi biçimleme bağlamında, çerçeveler, bir taşıyıcı blokun tepesinden başlayarak yatay yönde birer birer yerleştirilirler. Yatay kenar dış boşlukları (margin), kenar çizgileri (border) ve kenar iç boşlukları (padding) bu çerçeveler arasında hesaba katılırlar. Çerçeveler düşey yönde farklı yöntemlerle hizalanabilirler. Ya altları veya üstleri hizalanır ya da metinlerinin taban çizgileri birbirlerine hizalanırlar. Satır biçimindeki çerçeveleri içeren dikdörtgen alana satır çerçevesi denir.
Bir satır çerçevesinin genişliği taşıyıcı bloka göre belirlenir. Yüksekliğin belirlenmesinde kullanılan kurallar bölümünde açıklanmıştır. Bir satır çerçevesi içerdiği bütün çerçeveler için daima yeterince uzundur. Bununla birlikte, içerdiği en uzun çerçeveden daha uzun olabilir (örn, çerçeveler öyle hizalanır ki, taban çizgileri yan yana alt alta gelir). Bir B çerçevesinin yüksekliği onu içeren satır çerçevesinin yüksekliğinden daha azsa B'nin satır çerçevesi içindeki düşey hizası vertical-align niteliğine göre belirlenir.
Çok sayıda satıriçi çerçeve tek bir satır çerçevesine sığmazsa düşey olarak yığılmış iki veya daha fazla sayıda satır cerçevesine dağıtılır. Bu bakımdan bir paragraf düşey olarak yığılmış satır çerçeveleridir. Satır çerçeveleri aralarında düşey bir ayırıcı olmaksızın yığılırlar ve yığında hiçbir şekilde örtüşmezler.
Genelde, bir satır çerçevesinin sol ve sağ kenarları, kendini taşıyan blok çerçevesinin sol ve sağ kenarlarına dokunur. Bununla birlikte bazan yüzen çerçeveler satır çerçevesinin kenarı ile taşıyan blokun kenarı arasına girebilir. Bu bakımdan, aynı biçimleme bağlamındaki satır çerçevelerinin genişliği ile taşıyıcı blok genişliği genelde aynı olsa da, satır çerçevelerinin genişliği yüzen çerçevelerden dolayı yatay alandaki daralma nedeniyle değişebilir. Aynı biçimleme bağlamındaki satır çerçevelerinin genelde yükseklikleri de farklılık gösterir (örneğin, biri yüksekçe bir resim içerirken, diğerleri sadece metin içeriyor olabilir).
Bir satırdaki satıriçi çerçevelerin genişliklerinin toplamı onları içeren satır çerçevesinin genişliğinden azsa satır çerçevesi içindeki yatay dağılım text-align niteliğine göre belirlenir. Eğer bu niteliğin değeri justify ise kullanıcı arayüzü satıriçi çerçevelerin genişliklerini az veya çok arttırabilir.
Bir satıriçi çerçeve bir satır çerçevesinin genişliğini aşamayacağından, uzun bir satıriçi çerçeve çok sayıda çerçeveye bölünerek satır çerçevelerine dağıtılır. Bir satıriçi çerçeve çok sayıda çerçeveye bölündüğünde kenar dış ve iç boşluklarının ve kenar çizgilerinin bölünmenin olduğu yerde görsel bir etkileri yoktur. Eğer bu bölünme iki yönlü satırların bir arada bulunduğu bir bağlamda gerçekleşirse kenar iç ve dış boşlukları ile kenar çizgileri tamamen tanımlanmış olmayabilir.
Satıriçi çerçeveler ayrıca iki yönlü metin işleme sebebiyle aynı satır çerçevesi içinde çok sayıda çerçeveye bölünebilir.
Satıriçi çerçeve oluşumuna bir örnek. Aşağıdaki aralarına em ve strong elemanları serpiştirilmiş bir anonim metin içeren (blok seviyesinden bir HTML elemanı olan p tarafından üretilen) bir paragraf görülmektedir:
Bu cümle bazı
vurgulanmış sözcükler içermektedir.]]>
Bu p elemanı, ikisi anonim olmak üzere dört satıriçi çerçeve içeren bir blok çerçevesi üretir:
strong: "Bu cümle"Anonim: "bazı"em: "vurgulanmış sözcükler"Anonim: "içermektedir."
Paragrafı biçimlemek için kullanıcı arayüzü dört çerçeveyi satır çerçevelerine koyar. Bu örnekte, p elemanı için üretilen çerçeve, satır çerçevelerini taşıyan çerçeveyi oluşturur. Eğer taşıyan blok yeterli genişlikteyse bütün satıriçi çerçeveler tek bir satır çerçevesine sığacaktır:
Bu cümle bazı vurgulanmış sözcükler içermektedir.
Aksi takdirde, satıriçi çerçeveler böyle:
Bu cümle bazı
vurgulanmış sözcükler
içermektedir.
ya da bu şekilde:
Bu cümle bazı
vurgulanmışsözcükler
içermektedir.
çok sayıda satır çerçevesine bölünecektir.
Yukarıdaki örnekteki son çıktıda em çerçevesi iki em çerçevesine bölünmüştür (bunlara em1 ve em2 diyelim). Kenar dış ve iç boşlukları, kenar çizgileri veya metin süslemelerinin em1'den sonra ve em2'den önce herhangi bir görsel etkiye sahip olmadıkları görülmektedir.
Aşağıdaki örneği ele alalım:
Çok satırlı satıriçi akış örneği/title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
EM {
padding: 6px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 3em;
}
</style>
</head>
<body>
<p>Bu cümle <EM>vurgulanmış sözcükler</EM> içeriyor.</p>
</body>
</html>]]>
</eg>
<p>Paragraf genişliğine bağlı olarak çerçeveler şöyle bir dağılım gösterebilir:</p>
<figure id="img-inline-layout">
<graphic source="images/inline-layout.png" alt="Satır bölündüğünde satır boşluklarının ve çizgilerinin etkilerini gösteren resim" />
[<loc href="images/longdesc/inline-layout-desc.html" title="Bölünmüş satıriçi çerçeve üzerinde kenar çizgilerinin ve boşluklarının davranışını gösteren resmin geniş açıklaması">Açıklama</loc>]
</figure>
<slist>
<sitem>Kenar dış boşlukları "vurgulanmış"'tan önce ve "sözcükler"'den sonra yerleştirilmiştir.</sitem>
<sitem>Kenar iç boşlukları "vurgulanmış"'ın öncesinde, yukarısında ve aşağısında; "sözcükler"'in sonrasında, yukarısında ve aşağısında yer almakta olup ikisinin de üç tarafına kesintili kenar çizgileri çizilmiştir.</sitem>
</slist>
</example>
</div3>
<div3 id="relative-positioning">
<indexterm><primary>konumlama</primary><secondary>göreli</secondary></indexterm><indexterm><primary>göreli konumlama</primary></indexterm>
<head>Göreli konumlama</head>
<p>Bir çerçeve <titleref ref="normal-flow">normal akışa</titleref> göre yerleştirildikten veya bir kenara yüzdürüldükten sonra bu konuma göre kaydırılabilir. Buna <term>göreli konumlama</term> adı verilir. Bir B2 çerçevesi üzerinde etkisi olmaksızın bir B1 çerçevesi şu şekilde konumlanabilir: B2, B1 hiç kaydırılmamış gibi konumlanır ve B1 kaydırıldıktan sonra B2 yeniden konumlanmaz. Böyle göreli konumlama çerçevelerin kısmen veya tamamen örtüşmesine sebep olabilir.</p>
<p>Göreli olarak konumlanan bir çerçevenin normal akıştaki boyutları, satır kesmeleri ve ona ayrılmış özgün alan korunur. Bir göreli konumlanmış çerçevenin yeni bir taşıyıcı blok oluşturması <specref ref="containing-block"/> bölümünde incelenmiştir.</p>
<p>Bir göreli konumlanmış çerçeve, bir elemanın <property>position</property> niteliğinin değeri <literal>relative</literal> olduğu takdirde üretilir. Göreli konum <property>top</property>, <property>bottom</property>, <property>left</property> ve <property>right</property> nitelikleri ile belirtilir.</p>
<p>Göreli olarak konumlanmış elemanlar için, <property>left</property> ve <property>right</property> nitelikleri çerçeveleri boyutları değişmeksizin yatay olarak taşır. <property>left</property> [sol] çerçeveleri sağa taşırken, <property>right</property> [sağ] niteliği çerçeveleri sola taşır. <property>left</property> veya <property>right</property> nitelikleriyle konumlamanın sonucu olarak çerçeveler bölünmediğinden veya genişletilmediğinden hesaplanmış değerleri daima şöyle olacaktır:</p>
<eg role="layout">left = -right</eg>
<p><property>left</property> ve <property>right</property> niteliklerinin her ikisinin de değeri <literal>auto</literal> ise (ilk değerleridir), hesaplanmış değer '0' olacaktır (yani, çerçeveler normal akıştaki konumlarını koruyacaklardır). </p>
<p>Eğer sadece <property>left</property> değeri <literal>auto</literal> ise hesaplanmış değeri eksi işaretli olarak <property>right</property> değeri olacaktır (yani, çerçeve <property>right</property> değeri kadar sola taşınır).</p>
<p>Eğer sadece <property>right</property> değeri <literal>auto</literal> ise hesaplanmış değeri eksi işaretli olarak <property>left</property> değeri olacaktır.</p>
<p>Eğer <property>left</property> ve <property>right</property> niteliklerinin ikisi de <literal>auto</literal> değilse, konumlama aşırı kısıtlanmış olur ve biri yok sayılır. Eğer <property>direction</property> niteliğinin değeri <literal>ltr</literal> [soldan sağa] ise <property>left</property> kazanır ve <property>right</property> = -<property>left</property> olur. Eğer <property>direction</property> niteliğinin değeri <literal>rtl</literal> [sağdan sola] ise <property>right</property> kazanır ve <property>left</property> yoksayılır.</p>
<example>
<p>Aşağıdaki iki biçembent eşdeğerdir:</p>
<eg>div.a8 { position: relative; left: -1em; right: auto }</eg>
<p>ve</p>
<eg>div.a8 { position: relative; left: auto; right: 1em }</eg>
</example>
<p><property>top</property> ve <property>bottom</property> nitelikleri göreli olarak konumlanan elemanları yukarı veya aşağı taşır. Bunlar da bir diğerinin negatif olmasını gerektirir. Her ikisi de <literal>auto</literal> ise hesaplanmış değerleri '0' olur. Eğer biri <literal>auto</literal> ise diğerinin negatifi haline gelir. İkisi de <literal>auto</literal> değilse <property>bottom</property> yoksayılır (yani, <property>bottom</property> = -<property>top</property> olur).</p>
<p>Göreli olarak konumlanan çerçevelerin özdevimli hareketi betikli ortamlarda canlandırma etkisi üretebilir. (ayrıca <property>visibility</property> niteliğine de bakınız). Satır yüksekliğinin konumlama dikkate alınarak özdevinimli olarak ayarlanmaması dışında göreli konumlama üst ve alt indislemenin genel bir biçimi olarak da kullanılabilir. Daha ayrıntılı bilgi için <specref ref="line-height"/> bölümündeki açıklamaya bakınız.</p>
<p>Göreli konumlama örneklerini <specref ref="comparison"/> bölümünde bulabilirsiniz.</p>
</div3>
</div2>
<div2 id="floats">
<indexterm><primary>konumlama</primary><secondary>yüzen</secondary></indexterm><head>Yüzen çerçeveler</head>
<p>Bir yüzen çerçeve bir satır üzerinde sola veya sağa kaymış bir çerçevedir. Bir yüzen çerçevenin en ilginç özelliği çevresindeki içeriğin etrafını kuşatmasıdır (bunun böyle olması <property>clear</property> niteliği ile engellenebilir). İçerik sola yanaşık çerçevenin sağından aşağı, sağa yanaşık çerçevenin ise solundan aşağı akar. Burada yüzen çerçevelerin konumlanması ve etrafındaki içeriğin davranışına kısaca değinilecektir; bir yüzen çerçevenin ve çevresinin davranışları ile ilgili <termref def="float-rules">kurallar </termref> <property>float</property> niteliğinin açıklamasında incelenecektir.</p>
<p>Bir yüzen çerçevenin belli bir genişliği olmalıdır (ya <property>width</property> niteliği ile atanmıştır ya da bir <termref def="replaced-element">yerleştirilen eleman</termref> olarak bir <termref def="intrinsic">yerleşik</termref> genişliği vardır). Bir yüzen çerçeve, dış kenarı <titleref ref="containing-block">taşıyıcı blok</titleref>un kenarına veya başka bir yüzen çerçevenin kenarına dokunucaya kadar sağa veya sola kaydırıldığında bir <termref def="block-box">blok çerçevesi</termref> haline gelir. Yüzen çerçevenin üst kenarı geçerli satır çerçevesinin üst kenarına (bir satır çerçevesi yoksa önceki blok çerçevesinin alt kenarına) hizalanır. Eğer geçerli satırda yeterli yatay alan yoksa yeterli alan bulununcaya kadar yüzen çerçeve satır satır aşağı kaydırılır.</p>
<p>Bir yüzen çerçeve akışta yer almadığından, kendinden önce ve sonraki konumlanmamış blok çerçeveleri sanki bir yüzen çerçeve yokmuş gibi oluşturulur. Bununla birlikte, bir satır çerçevesi bir yüzen çerçeveye yer açmak için kısaltılacak ve satırın devamı olası ilk satırdan devam edecektir.</p>
<p>Birden fazla yüzen çerçeve yanyana geldiğinde aynı satırdaki yüzen çerçevelere de bu model uygulanır.</p>
<example>
<p>Aşağıdaki kural <code>class="icon"</code> öznitelikli bütün <htmltag>img</htmltag> çerçevelerini sola yanaştıracaktır (ve sol kenar dış boşluğunu '0' yapacaktır):</p>
<eg>IMG.icon {
float: left;
margin-left: 0;
}</eg>
</example>
<example>
<p>Şu HTML belgeyi ele alalım:</p>
<eg><![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="tr">
<head>
<title>Yüzen çerçeve örneği/title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
span { float: left; border: thin solid; margin: 2px }
body, p, img { border: thin solid; margin: 2.35em }
p { background-color: #eee; padding: 5px }
</style>
</head>
<body>
<p><span><img src=img.png alt="Bu resim bir yüzen çerçeveyi
simgeler"></span>Resim çerçevesi sola yanaştırılır. Devamındaki
içerik yüzen çerçeveyle aynı satırdan başlayarak yüzen çerçevenin
sağında biçimlenir. Yüzen çerçevenin sağındaki satır çerçeveleri
yüzen çerçevenin varlığından dolayı daraltılır fakat yüzen
çerçeveden sonra normal genişliklerine dönerler.
</body>
</html>]]></eg>
<p><htmltag>img</htmltag> çerçevesi sola yanaştırılır. Devamındaki içerik yüzen çerçeveyle aynı satırdan başlayarak yüzen çerçevenin sağında biçimlenir. Yüzen çerçevenin sağındaki satır çerçeveleri yüzen çerçevenin varlığından dolayı daraltılır fakat yüzen çerçeveden sonra normal genişliklerine dönerler (<titleref ref="containing-block">taşıyıcı blok</titleref> <htmltag>p</htmltag> elemanından oluştuğundan). Bu belge şöyle biçimlenmiş olabilirdi:</p>
<figure id="img-floateg">
<graphic source="images/floateg.png" alt="Yüzen çerçevelerin kenar dış boşlukları ile etkileşiminin resmidir." />
[<loc href="images/longdesc/floateg-desc.html" title="Yüzen çerçeve ve metin akış örneğinin geniş açıklaması">Açıklama</loc>]
</figure>
<p>Belge aşağıdaki gibi de olsaydı biçimleme aynı olacaktı:</p>
<eg><![CDATA[
<body>Resim çerçevesi sola yanaştırılır. <span>
<img src=img.png alt="Bu resim bir yüzen çerçeveyi simgeler">
</span> Devamındaki içerik yüzen çerçeveyle aynı ...
</body>]]></eg>
<p>Bunun sebebi yüzen çerçevenin solundaki içeriğin de soluna kayacak olmasıdır.</p>
</example>
<p>Yüzen çerçevelerin kenar dış boşlukları komşu çerçevelerin kenar dış boşlukları ile asla <titleref ref="collapsing-margins">örtüşmez</titleref>. Bu bakımdan, yukarıdaki örnekte, <htmltag>p</htmltag> elemanının kenar boşlukları ile <htmltag>span</htmltag> elemanının kenar dış boşlukları örtüşmemiştir (örtüşseydi, <htmltag>span</htmltag> çerçevesi <htmltag>p</htmltag> kenar dış boşluğunun içinde olurdu).</p>
<p>Bir yüzen çerçeve normal akıştaki diğer çerçevelerle üstüste gelebilir (örneğin, bir yüzen elemandan sonra gelen bir normal akış çerçevesinin yüzen elemana komşu kenarı negatif dış boşluğa sahiptir). Bir satıriçi çerçeve bir yüzen çerçeve ile üstüste geldiğinde satıriçi çerçevenin içeriği, artalanı ve kenar çizgileri yüzen çerçevenin önünde oluşturulur. Bir blok çerçevesi ile bir yüzen çerçeve üstüste geldiğinde ise, blok çerçevesinin artalanı ve kenar çizgileri yüzen çerçevenin arkasında oluşturulur ve sadece çerçeve şeffaf olduğu takdirde görünür. Blok çerçevesinin içeriği yüzen çerçevenin önünde oluşturulur.</p>
<example>
<p>Buradaki resimde, bir yüzen çerçevenin normal akıştaki çerçevelerin üzerine geldiği zaman neler olduğu gösterilmiştir..</p>
<figure>
<graphic source="images/float2p.png" alt="İki paragrafın kenar çizgilerinin ve artalan renginin bir yüzen çerçevenin altında kalması: resim altında kalan kenar çizgilerinin ve artalan renginin görünmesini engeller" />
[<loc href="images/longdesc/float2p-desc.html" title="Normal akıştaki çerçevelerin üzerine bir yüzen çerçevenin gelmesi ile ilgili geniş açıklama" id="img-float2p">Açıklama</loc>]
<caption>Bir yüzen resim, blok çerçevelerinin üzerine geldiğinde altında kalan çerçeve çizgileri ve artalan rengi görünmez olacaktır.</caption>
</figure>
</example>
<p>Aşağıdaki örnekte, içeriğin yüzen elemanın yanından akmasını engellemek için <property>clear</property> niteliğinin kullanımı gösterilmiştir.</p>
<example>
<p>Biçembende şöyle bir kural eklemekle:</p>
<eg>P { clear: left }</eg>
<p>şuna benzer bir biçimleme elde edilebilir:</p>
<figure id="img-floatclear">
<graphic source="images/floatclear.png" alt="Bir yüzen resim ve iki paragraf üzerinde 'clear: left' bildiriminin etkisini gösteren resim." />
[<loc href="images/longdesc/floatclear-desc.html" title="Normal akıştaki çerçevelerin üzerine bir yüzen çerçevenin gelmesinin etkisi ile ilgili geniş açıklama">Açıklama</loc>]
<caption>Her iki paragraf için de <tt>clear: left</tt> atanmıştır. Böylece ikinci paragraf yüzen çerçevenin aşağısına itilmiştir -- bunu sağlamak için üst kenar dış boşluğu genişlemiştir (ayrıntılar için <property>clear</property> niteliğine bakınız).</caption>
</figure>
</example>
<div3 id="float-position">
<head>Yüzen çerçevenin konumlanması: <property>float</property> niteliği</head>
<indexterm><primary><property>float</property></primary></indexterm>
<indexterm><primary>nitelikler</primary> <secondary><property>float</property></secondary></indexterm>
<propinfo>
<propname>float</propname>
<value><literal>left</literal> | <literal>right</literal> | <literal>none</literal> | <literal>inherit</literal></value>
<initial><literal>none</literal></initial>
<applies-to><termref def="positioned-element">konumlu elemanlar</termref> ve <titleref ref="generate">üretilen içerik</titleref> hariç bütün elemanlar</applies-to>
<inherited>hayır</inherited>
<percentages/>
<media><termref def="visual-media-group">görsel</termref></media>
</propinfo>
<p>Bu nitelik bir çerçevenin sola mı, sağa mı yüzdürüleceğini yoksa hiç mi yüzmeyeceğini belirtmek için kullanılır. <termref def="absolutely-positioned">Mutlak olarak konumlanmayan</termref> çerçeveler üreten elemanlar için belirtilebilir. Bu niteliğin değerlerinin anlamları:</p>
<varlist><gitem>
<label><indexterm><primary><literal>left</literal></primary></indexterm>
<literal>left</literal></label>
<def><p>Elemen sola yanaşık bir yüzen <termref def="block-box">blok çerçevesi</termref> üretir. Akışkan içerik çerçevenin sağ üst kenarından başlayarak çerçeveden aşağı akar ve çerçeveyi kuşatır (<property>clear</property> niteliğine konu olan durum). Değer <literal>none</literal> olmadıkça, <property>display</property> niteliği yoksayılır.</p></def>
</gitem>
<gitem>
<label><indexterm><primary><literal>right</literal></primary></indexterm>
<literal>right</literal></label>
<def><p><literal>left</literal> gibidir, farklı olarak içerik sağından değil, solundan akar.</p></def>
</gitem>
<gitem>
<label><indexterm><primary><literal>none</literal></primary></indexterm>
<literal>none</literal></label>
<def><p>Çerçeve yüzmez.</p></def>
</gitem>
</varlist>
<p><indexterm><primary>yüzme kuralları</primary></indexterm>
<termdef id="float-rules" term="Yüzme kuralları">Yüzen çerçevelerin davranışlarını belirleyen hassas kurallar</termdef>:</p>
<olist>
<item><p>Sola yanaşık bir yüzer çerçevenin sol <termref def="outer-edge">dış kenarı</termref> kendisini <titleref ref="containing-block">taşıyan blokun</titleref> sol kenarının solu olmayabilir. Benzeri bir kural sağa yanaşık yüzen çerçeveler için de vardır.</p></item>
<item><p>Geçerli sola yanaşık yüzen çerçeveden başka daha önce üretilmiş başka sola yanaşık yüzer çerçeveler de varsa geçerli çerçevenin sol <termref def="outer-edge">dış kenarı</termref> ya önceki çerçevenin sağ <termref def="outer-edge">dış kenarı</termref>nın sağında olmalı ya da geçerli çerçevenin üst kenarı önceki çerçevenin alt kenarının aşağısında kalmalıdır. Benzer şeyler sağa yanaşık yüzen çerçeveler için de geçerlidir.</p></item>
<item><p>Sola yanaşık bir yüzer çerçevenin sol <termref def="outer-edge">dış kenarı</termref>, yanındaki bir sağa yanaşık bir yüzen çerçevenin sol <termref def="outer-edge">dış kenarı</termref>nın sağında olamaz. Benzer şeyler sağa yanaşık yüzen çerçeveler için de geçerlidir.</p></item>
<item><p>Bir yüzer çerçevenin üst <termref def="outer-edge">dış kenarı</termref> kendi <titleref ref="containing-block">taşıyıcı blokunun</titleref> üst kenarından daha yukarıda olamaz.</p></item>
<item><p>Bir yüzer çerçevenin üst <termref def="outer-edge">dış kenarı</termref> bir <termref def="block-box">blok</termref> veya önceki bir yüzer çerçevenin üst dış kenarından daha yukarıda olamaz.</p></item>
<item><p><indexterm><primary>satır çerçevesi</primary></indexterm>
Bir yüzer çerçevenin üst <termref def="outer-edge">dış kenarı</termref> evvelce üretilmiş bir satır çerçevesinin üst kenarından daha yukarıda olamaz.</p></item>
<item><p>Solunda başka bir sola yanaşık yüzen çerçeve olan bir sola yanaşık yüzen çerçevenin sağ dış kenarı kendi <titleref ref="containing-block">taşıyıcı blok</titleref>unun sağ dış kenarının sağında olamaz. Benzer şeyler sağa yanaşık yüzen çerçeveler için de geçerlidir.</p></item>
<item><p>Bir yüzen çerçeve mümkün olduğunca yukarı yerleştirilmelidir.</p></item>
<item><p>Bir sola yanaşık yüzen çerçeve mümkün olduğu kadar sola ve yukarı, sağa yanaşık bir yüzen çerçeve de mümkün olduğu kadar sağa ve yukarı yanaştırılmalıdır.</p></item>
</olist>
</div3>
<div3 id="flow-control">
<head>Yüzen çerçevelerden sonraki içeriğin denetimi: <property>clear</property> niteliği</head>
<indexterm><primary><property>clear</property></primary></indexterm>
<indexterm><primary>nitelikler</primary> <secondary><property>clear</property></secondary></indexterm>
<propinfo>
<propname>clear</propname>
<value><literal>none</literal> | <literal>left</literal> | <literal>right</literal> | <literal>both</literal> | <literal>inherit</literal></value>
<initial><literal>none</literal></initial>
<applies-to><termref def="block-level">blok seviyesinden</termref> elemanlar</applies-to>
<inherited>hayır</inherited>
<percentages/>
<media><termref def="visual-media-group">görsel</termref></media>
</propinfo>
<p>Bu nitelik bir elemanın çerçevelerinin hangi taraflarının önceki bir yüzen elemana komşu olmayacağını belirtir. (Eleman yüzen astsallara sahip olabilir böyle astsal yüzenler için <property>clear</property> niteliği etkisizdir.)</p>
<p>Bu nitelik sadece <termref def="block-level">blok seviyesinden</termref> elemanlar (yüzenler dahil) için belirtilebilir. <titleref ref="compact">Girintide</titleref> ve <titleref ref="run-in">gömme</titleref> başlık çerçeveleri için bu nitelik bu çerçevelerin birleştiği blok çerçevelerine uygulanır.</p>
<p>Yüzmeyen blok çerçevelerine uygulandığında değerlerin anlamları şöyledir:</p>
<varlist>
<gitem>
<label><indexterm><primary><literal>left</literal></primary></indexterm>
<literal>left</literal></label>
<def><p>Üretilen çerçevenin üst kenar dış boşluğu yeterince arttırılarak üst kenar çizgisinin kendinden önceki bir sola yanaşık bir yüzen çerçevenin alt kenar dış boşluğunun aşağısında kalması sağlanır.</p></def>
</gitem>
<gitem>
<label><indexterm><primary><literal>right</literal></primary></indexterm>
<literal>right</literal></label>
<def><p>Üretilen çerçevenin üst kenar dış boşluğu yeterince arttırılarak üst kenar çizgisinin kendinden önceki bir sağa yanaşık bir yüzen çerçevenin alt kenar dış boşluğunun aşağısında kalması sağlanır.</p></def>
</gitem>
<gitem>
<label><indexterm><primary><literal>both</literal></primary></indexterm>
<literal>both</literal></label>
<def><p>Üretilen çerçeve kendinden önceki bütün yüzen çerçevelerin aşağısına taşınır.</p></def>
</gitem>
<gitem>
<label><indexterm><primary><literal>none</literal></primary></indexterm>
<literal>none</literal></label>
<def><p>Çerçevenin yüzen çerçevelerle ilgili özel bir durumu yoktur.</p></def>
</gitem>
</varlist>
<p>Nitelik bir yüzen eleman için belirtildiğinde, yüzen çerçevelerin konumlama <termref def="float-rules">kurallarına</termref> bir ek koşul (10. kural) eklenir:</p>
<ulist>
<item><p>Yüzen çerçevenin üst <termref def="outer-edge">dış kenarı</termref> <code>clear: left</code> durumunda önceki sola yanaşık bir yüzen çerçevenin, <code>clear: right</code> durumunda önceki sağa yanaşık bir yüzen çerçevenin, <code>clear: both</code> durumunda önceki her iki türden yüzen çerçevenin de alt dış kenarının aşağısında kalmalıdır.</p></item>
</ulist>
</div3>
</div2>
<div2 id="absolute-positioning">
<indexterm><primary>konumlama</primary><secondary>mutlak</secondary></indexterm>
<head>Mutlak konumlama</head>
<p>Mutlak konumlama modelinde, bir çerçeve açıkça taşıyıcı çerçevesine göre konumlanır. Normal akıştan tamamen kaldırılır ve sonraki kardeşlerine bir etkisi kalmaz. Mutlak olarak konumlanmış bir çerçeve akışkan çocukları ve konumlu astsalları için yeni bir <titleref ref="containing-block">taşıyıcı blok</titleref> haline gelir. Bununla birlikte, mutlak olarak konumlanmış bir elemanın içeriği diğer çerçevelerin çevresinden akmaz. Üst üste binen çerçevelerin <termref def="stack-level">yığıt seviyelerine</termref> bağlı olarak başka çerçevelerin içeriklerini belirsizleştirebilir.</p>
<p><indexterm><primary>mutlak olarak konumlanmış eleman</primary></indexterm>
<termdef id="absolutely-positioned" term="Mutlak olarak konumlanmış eleman">Bu belirtimde <term>mutlak olarak konumlanmış eleman</term> (veya çerçeve) dendiğinde <property>position</property> niteliğinin değeri <literal>absolute</literal> veya <literal>fixed</literal> olan bir elemandan bahsediyor olacağız</termdef>.</p>
<div3 id="fixed-positioning">
<indexterm><primary>konumlama</primary><secondary>sabit</secondary></indexterm>
<head>Sabit konumlama</head>
<p>Sabit konumlama, mutlak konumlamanın bir alt sınıfıdır. Sabit konumlu bir çerçevenin tek farkı, <titleref ref="containing-block">taşıyıcı blok</titleref>un <termref def="viewport">görüntü alanı</termref> tarafından oluşturulmasıdır. <termref def="continuous-media-group">Sürekli ortamda</termref>, belge kaydırıldığında sabit çerçeveler yerlerinden kımıldamazlar. Bu bakımdan, <titleref ref="background-properties">sabit artalan resimlerine</titleref> çok benzerler. <titleref ref="page">Sayfalı ortamda</titleref> ise, sabit konumlular her sayfada yinelenirler. Bu özellikleriyle, örneğin, her sayfanın altına bir imza yerleştirmek için yararlıdır.</p>
<example>
<p>Biçembent yazarları sabit konumlamayı <htmltag>frame</htmltag> benzeri bir yapı oluşturmak için kullanabilirler. Aşağıdaki yerleşimi ele alalım:</p>
<figure id="img-frame">
<graphic source="images/frame.png" alt="Sabit konumlama ile bölmeli bir yerleşim oluşturma örneği resmi." />
[<loc href="images/longdesc/frame-desc.html" title="Bölmeli yerleşim örneği için geniş açıklama">Açıklama</loc>]
</figure>
<p>Bu çıktı aşağıdaki HTML belge ve biçembent kuralları ile elde edilebilir:</p>
<eg><![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>BB2 ile bölmeli belge
...
...
...
...
]]>display, position ve float nitelikleri arasındaki ilişki
Çerçeve üretimini ve yerleşimini etkileyen üç nitelik --
display, position ve float -- şöyle etkileşir:
display niteliğinin değeri none ise kullanıcı arayüzleri position ve float niteliklerini yoksaymalıdırlar. Bu durumda, eleman hiç çerçeve üretmez.
Aksi takdirde, eğer position niteliğinin değeri absolute veya fixed ise display niteliğine block ve
float niteliğine none atanır. Çerçevenin konumu çerçevenin taşıyıcı blokuna ve top, right, bottom ve leftniteliklerine göre belirlenir.
Aksi takdirde, eğer float niteliğinin değeri none'dan farklıysa çerçeve yüzdürülür ve display niteliğinin değeri şu tabloya göre atanır:
Bu niteliklerin değerleri betikler tarafından değiştirildiğinde, BB2 yerleşimin nasıl davranacağını belirtmez. Örneğin, "width: auto bildirimli bir eleman yeniden konumlandığında neler olur? İçerik yeniden mi oluşturulur yoksa mevcut biçimleme korunur mu?" sorularının yanıtları bu belirtimin kapsamı dışındadır ve böyle bir davranış BB2'nin ilk gerçekleniminden muhtemelen farklı olacaktır.
Normal akış, yüzen çerçeveler ve mutlak konumlama karşılaştırması
Normal akış, göreli konumlama, yüzen çerçeveler ve mutlak konumlama arasındaki farkları göstermek için aşağıdaki HTML belgeye dayanan bir dizi örnek hazırladık:
Konumlama şemalarının karşılaştırılması
Gövde içeriğinin başlangıcı.
Harici içeriğin başlangıcı.
Dahili içeriğimiz.
Harici içerik sonu.
Gövde içeriğinin sonu.
]]>
harici ve dahili ID'li elemanlar tarafından üretilen çerçevelerin son konumları her örnekte değişmektedir. Belge penceresinin solundaki numaralar satırların normal akıştaki konumlarını belirtmektedir (Satır aralıkları normalden geniş tutulmuştur).
Normal akış
harici ve dahili ID seçicilerinin aşağıdaki bildirimlerinin çerçevelerin normal akışını değiştirmediğini varsayıyoruz:
#harici { color: red }
#dahili { color: blue }
Bütün satıriçi içeriği p elemanı içerir: anonim satıriçi metin ve iki span elemanı. Bundan başka, içeriğin tümü taşıyıcı blokunu p elemanının oluşturduğu bir satıriçi biçimleme bağlamına yerleştirilir. Üretilen şöyle birşey olur:
[Açıklama]
Göreli konumlama
Göreli konumlamanın etkisini görmek için kuralları şöyle değiştiriyoruz:
#harici { position: relative; top: -15px; color: red }
#dahili { position: relative; top: +15px; color: blue }
Metin harici elemanına kadar normal akışını sürdürür. harici elemanının metni bundan sonra normal akış konumunda ve boyutlarında 1. satırın sonuna akar. Daha sonra (üç satıra dağılmış) metni içeren satıriçi çerçeveler '-15px' kadar yukarı kaydırılır.
dahili elemanının içeriği, harici elemanının çocuğu olarak, "içeriğin başlangıcı." dizgesinin ardından normal olarak akışını sürdürecekti. Ancak, dahili elemanının içeriği kendini harici elemanının içeriğine göre '15px' aşağı kaydırarak 2. satırdaki eski konumuna döner.
harici elemanından sonraki içeriğin harici elemanının göreli konumlamasından etkilenmediğine dikkat ediniz.
[Açıklama]
Ayrıca, harici elemanının göreli konumunun '-30px' oluşuna, harici elemanının metninin gövde metni ile üstüste bineceğine de dikkat ediniz.
Bir çerçevenin yüzmesi
Şimdi dahili elemanının metninin yüzdürülüp sağa yanaştırılmasının etkisini görelim. Yeni kurallarımız şunlar olsun:
Normal akıştan alınıp yüzdürülerek sağa yanaştırılan dahili çerçevesine (genişlik width ile belirtilmiştir) kadar metin normal akışını sürdürür. Yüzer çerçevenin solunda kalan satır çerçeveleri kısalır ve belgenin kalan metni akışını bunlar üzerinden sürdürür.
[Açıklama]
Mutlak konumlama
Son olarak, mutlak konumlamanın etkisini ele alacağız. harici çerçevesinin tepesinin taşıyıcı bloka göre konumlanmasını sağlayan harici ve
dahili için BB bildirimleri şöyle olsun:
Konumlu çerçevenin taşıyıcı bloku en yakın konumlu üstsel tarafından oluşturulur. harici çerçevesinin üst kenarı taşıyıcı blokun üst kenarından 100px aşağıda ve sol kenarı da sol kenardan 110px sağda olacaktır. harici çerçevesinin çocuk çerçevesi akışını normal olarak ebeveynine göre sürdürür.
[Açıklama]
Aşağıdaki örnekte göreli olarak konumlanmış bir çerçevenin çocuk çerçevesi mutlak olarak konumlanmaktadır. Ebeveyn çerçeve olan harici çerçevesinin yeri aslında değişmiyor olsa da position niteliğine relative değeri atanmakla konumlu astsallarına taşıyıcı blok olmaktadır. harici çerçevesi birkaç satıra bölünmüş bir satıriçi çerçeve olup, ilk satıriçi çerçevenin üst ve sol kenarlarının kesim yeri (aşağıdaki resimde yeşil renkle vurgulanmıştır) top ve left nitelikleri için başlangıç noktasını oluştururlar.
harici çerçevesini konumlu bir taşıyıcı blok haline getirmezsek:
#harici { color: red }
dahili çerçevesinin taşıyıcı bloku ilk taşıyıcı blok olur (örneğimiz için böyledir). Aşağıdaki resim böyle bir durumda dahili çerçevesinin yerini göstermektedir:
[Açıklama]
Göreli ve mutlak konumlama aşağıdaki örnekte görüldüğü gibi metne işaret çizgileri yerleştirmekte kullanılabilir. Şöyle bir belgemiz olduğunu varsayalım:
Sözcük imleme
Bir işaretçi yapmak için "=>" dizgesini kullandım.
BU=> sözcüğünün bulunduğu satırı göstermek
üzere paragrafın solundaki boşlukta "yüzecek".
]]>
Bu belgenin sonucu şöyle birşey olurdu (Ç.N. - Kodu denemenizi öneririm. Tarayıcının genişliğini azaltıp arttırarak imlecin gezinişini izleyebilirsiniz):
[Açıklama]
Paragrafın sol kenarı taşıyıcı blokun sol kenarından '3em' sağa, sağ kenarı da sağ kenardan '1em' sola kaydırılarak paragrafın içeriği oluşturulur. İmleç görevini yapan "=>" dizgesi normal akıştan alınıp geçerli satıra (top: auto olduğundan) konumlanır. Sonuçta bir imleç paragrafın solunda "yüzüyormuş" gibi görünür.
Katmanlı sunum
Aşağıdaki bölümlerde "ön" dendiğinde ekranda kullanıcıya en yakın katmandan bahsediliyor olacaktır.
BB2'de her çerçeve üç boyutta konumlanır. Yatay ve düşey konumlara ek olarak çerçeveler "z-ekseni" boyunca da konumlanabilirler ve diğerlerine göre üstte kalan biçimlenir. Z-eksenli konumlar özellikle çerçeveler görsel olarak üstüste bindiği durumlara uygundur. Bu bölümde çerçevelerin z ekseni boyunca nasıl konumlandıkları incelenecektir.
yığın bağlamıyığıt seviyesi
Her çerçeve bir yığın bağlamına aittir. Belli bir yığın bağlamındaki her çerçeve için, bağlamdaki diğer çerçevelere göre z eksenindeki yerini gösteren tamsayı türünde bir yığıt seviyesi vardır. Yığıt seviyesi daha büyük olan çerçeveler daima düşük olanların önünde biçimlenir. Çerçeveler negatif yığıt seviyelerine sahip olabilirler. Bir yığın bağlamında aynı yığıt seviyesine sahip çerçeveler belge ağacındaki sıraya göre aşağıdan yukarıya doğru yığılırlar.
kök yığın bağlamıyerel yığın bağlamıKök eleman bir kök yığın bağlamı oluştururken diğer elemanlar yerel yığın bağlamları oluşturabilirler. Yığın bağlamları kalıtsaldır. Bir yerel yığın bağlamı atomsaldır; diğer yığın bağlamlarındaki çerçeveler onun çerçevelerinin arasına girmezler.
Bir yerel yığın bağlamı oluşturan bir eleman, iki yığıt seviyesine sahip bir çerçeve oluşturur: yığıt seviyelerinden biri onu oluşturan yığın bağlamı için (daima '0'dır), diğeri ait olduğu yığın bağlamı içindir (z-index niteliği ile belirtilen bu ikinci seviyedir).
z-index niteliği ile farklı bir değer belirtilmedikçe, bir elemanın çerçevesi ebeveyninin çerçevesi ile aynı yığıt seviyesine sahiptir.
Bir konumlu çerçeve için z-index niteliği şunları belirtir:
Çerçevenin geçerli yığın bağlamında yığıt seviyesi.
Çerçevenin bir yığın bağlamı oluşturup oluşturmadığı.
Değerlerin anlamları şunlardır:
Bu tamsayı üretilen çerçevenin geçerli yığın bağlamındaki yığıt seviyesini belirtir. Çerçeve ayrıca kendi yığıt seviyesi '0' olan bir yerel yığın bağlamı oluşturur.
Üretilen çerçevenin geçerli yığın bağlamındaki yığıt seviyesi ebeveyninin yığıt seviyesi ile aynıdır. Çerçeve ayrıca bir yerel yığın bağlamı oluşturmaz.
Aşağıdaki örnekte, çerçevelerin yığıt seviyeleri şöyledir ("id" özniteliklerinin isimlerine göre):: "text2"=0, "image"=1, "text3"=2 ve "text1"=3. "text2" yığıt seviyesi kök çerçeveden miras alınmıştır. Diğerlerinin yığıt seviyeleri z-index niteliği ile belirtilmiştir.
Z-eksenli konumlama
Bu metin kelebek resminin önünde olacak.
Bu metin herşeyin arkasında kalacaktır.
Bu metin kelebek resminin önünde, yeşil metnin arkasında
kalacaktır.
]]>
Bu örneğin isteneni vermesi şeffaflığın sonucudur. Bir çerçevenin öntanımlı davranışı içeriğindeki şeffaf alanlardan arkasındakilerin görünmesini sağlamaktır. Örnekte her çerçeve şeffaf olarak bir diğerinin önünde yer almaktadır. Bu davranış mevcut artalan nitelikleri kullanılarak geçersiz kılınabilir.
Metin yazma yönü: direction ve unicode-bidi nitelikleri
çift yönlülük (bidi)
Bazı metinlerde karakterler sağdan sola yazılırken bazı belgelerde, özellikle Arapça ve İbranice metinlerde ve bazı karışık dilli bağlamlarda bazı metin bloklarında (görsel olarak) her iki yönde de yazılmış yazılara rastlanır. Buna çift yönlülük (İng: bidirectionality) denir ve uluslararası bilişim bağlamında kısaca bidi denir.
Unicode standardı (, 3.11. bölüm) metnin yönünü düzgün saptamak için karmaşık bir algoritma tanımlar. Algoritmanın örtük kısmı karakter özelliklerine dayanır, açık denetimler iç içelik ve üstün gelmeyle ilgilidir. BB2 çift yönlülüğün gerektiği gibi oluşturulması için bu algoritmaya güvenir. direction ve unicode-bidi nitelikleri yazarlara, bu algoritmayla eşleşmenin nasıl sağlanacağını belgenin eleman ve özniteliklerinde belirtme imkanı verir.
Bir belge sağdan sola yazılmış karakterler içeriyorsa ve kullanıcı arayüzü bunları soru imi, boş kutu, karakter kodu gibi yaklaşımları kullanmaksızın doğrudan harfleri ile gösteriyorsa, kullanıcı arayüzü çift yönlülük algoritmasını uygulamalıdır. Kullanıcı arayüzlerinin sadece soldan sağa yazılmış karakterler içeren metinler için çift yönlülük algoritmasını uygulamaları gerekmez. Bu tek taraflı gereksinim bir olgunun yansımasıdır: her Arapça veya İbranice belge çift yönlü metinleri karışık olarak içermese de, çoğunlukla diğer dillerden alıntılar ve sayılar soldan sağa yazılırlar.
Bir metnin yönü belge dilinin yapısına ve anlambilgisine bağlı olduğundan bu nitelikler çoğunlukla belge türü bildirimleri (DTD'leri) yazarlarınca veya özel belge yazarlarınca kullanılır. Bir öntanımlı biçembent bu nitelikleri belirtiyorsa, yazarların ve kullanıcıların bu kuralları geçersiz kılmaya çalışmamaları önerilir. Bir kullanıcı arayüzünün çift yönlülük davranışını geçersiz kılmanın tek istisnası, kullanıcının Eskenazi dilindeki karakterleri (çoğu İbranice karakterlerdir) latin harfleriyle değiştirerek okuma isteği olurdu.
HTML 4.0 belirtimi (, 8.2. bölüm) HTML belgelerdeki çift yönlülük davranışını tanımlamıştır. Bu davranışı elde etmek için kullanılacak biçembent kuralları için örnek biçembentte belirtilmiştir. Çift yönlülük konusunda HTML 4.0 belirtiminde daha fazla bilgi vardır.
directionniteliklerdirectiondirectionltr | rtl | inheritltrtüm elemanlar, ama metne de bakınevetgörsel
Bu nitelik temel yazma yönünü ve Unicode çift yönlülük algoritması (unicode-bidi) için iç içelik ve üstün gelme yönünü belirtir. Ek olarak, tablo sütunlarının yerleşim yönünü, yatay taşma yönünü ve bir blokta text-align: justify durumunda son satırın konumunu belirtir (böyle bir durumda son satır daima yazma yönünün başlangıç kenarına yanaşık oluşturulur).
Bu niteliğin değerlerinin anlamları:
Yönü soldan sağa olarak belirtir.
Yönü sağdan sola olarak belirtir.
direction niteliğinin satıriçi seviyeden elemanlar üzerinde etkili olabilmesi için unicode-bidi niteliğinin değerinin embed veya override olması gerekir.
direction niteliği, tabloların sütun elemanlarında belirtildiği takdirde, sütunlar belge ağacında mevcut olmadıklarından dolayı sütundaki gözeler tarafından miras alınmazlar. Bu bakımdan BB, , 11.3.2.1. bölümünde açıklanan 'dir' özniteliğinin miras alınma kurallarını kolayca elde edemez.
unicode-bidiniteliklerunicode-bidiunicode-bidinormal | embed | bidi-override | inheritnormaltüm elemanlar, ama metne de bakınhayırgörsel
Bu niteliğin değerlerinin anlamları:
Eleman, çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açmaz. Satıriçi seviyeden elemanlar için yeniden sıralama eleman sınırları boyunca örtük olarak çalışır.
Eğer eleman bir satıriçi seviyeden elemansa çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açılır. Bu iç içelik seviyesinin yönü direction niteliği ile belirtilir. Elemanın içinde yeniden sıralama örtük olarak yapılır. Bu, elemanın başında bir LRE (U+202A; direction: ltr için) veya RLE (U+202B; direction: rtl için) ve sonunda bir PDF (U+202C) eklemeye eşdeğerdir.
Eğer eleman, sadece satıriçi seviyeden elemanlar içeren bir satıriçi veya blok seviyesinden bir elemansa bu bir üstün gelme durumu oluşturur. Yani, elemanın içindeki yeniden sıralama kesin olarak direction niteliği ile belirtilen yöne göre yapılır; algoritmanın örtük kısmı yoksayılır. Bu, elemanın başlangıcına bir LRO (U+202D; direction: ltr için) veya RLO (U+202E; direction: rtl için) ve elemanın sonuna bir PDF (U+202C) eklemeye eşdeğerdir.
Her blok seviyesinden eleman için son sıralama, bidi denetim kodlarının yukarıda açıklandığı gibi eklendiği, imlenimin ayıklandığı ve elde edilen karakter dizisinin biçemli metinle aynı satır kesmeleriyle üretilmiş salt metninin Unicode çift yönlülük algoritmasının bir gerçeklenimine aktarıldığı durumla aynıdır. Bu süreçte, resimler gibi metinsel olmayan öğeler, normal değerli bir unicode-bidi niteliğine sahip olmadıkça yönsüz karakterler olarak ele alınırlar. Aksi takdirde, kesinlikle eleman için belirtilen yönde karakterler olarak ele alınırlar.
Tek yönlü (ya tamamen soldan sağa ya da tamamen sağdan sola) satıriçi çerçevelerde akışı mümkün kılmak için başka satıriçi çerçevelerin (anonim satıriçi çerçeveler dahil) oluşturulması ve bazı satıriçi çerçevelerin de akış gerçekleştirmeden önce ayrılması yeniden sıralanması gerekebilir.
Unicode algoritması azami 15 seviyelik iç içelik seviyesine sahip olduğundan, gerekli olmadıkça unicode-bidi niteliğinin normal'den farklı bir değerle kullanılmaması gerekir. Özellikle inherit değerinin azami dikkatle kullanılması gerekir. Bununla birlikte, genelde, blok olarak gösterilmek üzere tasarlanmış elemanlar için gösterimin satıriçine değiştiği durumla birlikte ele almak için unicode-bidi: embed ataması tercih edilmelidir (aşağıdaki örneğe bakınız).
DTD
Aşağıdaki örnekte çift yönlü metin içeren bir XML belge gösterilmiştir. Önemli bir tasarım ilkesini görselleştirir: DTD tasarımcıları çift yönlülüğü dile uygun (elemanlar ve öznitelikler) olmaktan başka belgeye eşlik eden biçembende de uygun olarak ele almalıdırlar. Biçembentler, bidi kuralları diğer biçembent kurallarından ayrılabilecek şekilde tasarlanmalıdır. Belge dilinin veya DTD'nin bidi davranışını korumak için bidi kuralları diğer biçembent kuralları tarafından geçersiz kılınmamalıdır.
Bu örnekte, temelde soldan sağa yazılmış karakterler küçük harflerle diğerleri büyük harflerle gösterilmiştir:
HEBREW elemanı temel yazma yönü sağdan sola olan bir blok, ENGLISH elemanı da temel yazma yönü soldan sağa olan bir bloktur. PAR elemanları temel yazma yönlerini ebeveynlerinden miras alan bloklardır. Bu bakından ilk iki PAR üst sağdan başlanarak okunurken son üçü üst soldan başlanarak okunur. Eleman isimleri olarak HEBREW (İbranice) ve ENGLISH (İngilizce) sadece anlaşılırlığı arttırmak için dil isimleriyle aynı seçilmiştir; genelde, eleman isimlerinin eleman içerik dilinin adıyla aynı olmamaları gerekir.
EMPH elemanı satıriçi seviyeden olduğundan ve unicode-bidi niteliğinin değeri normal olduğundan (ilk değer), metnin sıralanışında etkili değildir. Diğer taraftan, HE-QUO elemanı bir iç içelik oluşturur.
Satır yeterli uzunlukta olduğu takdirde bu metnin biçimlenmiş hali şöyle olurdu:
HEBREW18'in english19'dan önce okunması gerektiğinden, HEBREW18, english19'un üst satırında kalır. Satırın bundan daha fazla kısaltılması bu sonucun elde edilmesini sağlamazdı. Ayrıca, english19'un ilk bir kaç harfinin üst satırda kalması sağdan sola yazılan bir bağlamda hece çizgisinin satırın ortasında kalmasına yol açacağından genellikle böyle bir hece çizgisi gösterilmez.
