11.1.1 Taşma: overflow niteliği

Bu nitelik bir blok seviyesinden elemanın içeriğinin, elemanın (içerik için taşıyıcı blokluk yapan) çerçevesinden taştığı zaman kırpılıp kırpılmayacağını belirler. Değerlerin anlamları şöyledir:

visible

Bu değer içeriğin kırpılmayacağını belirtir, yani, blok çerçevesinden dışarı taşan içerik kırpılmayıp oluşturulur.

hidden

Bu değer taşan içeriğin kırpılacağını ve kırpılan içeriği göstermek için bir kaydırma mekanizmasının olmayacağını belirtir; kullanıcılar kırpılan içeriğe erişemeyecektir. Kırpma bölgesinin şekli ve boyutları clip niteliği ile belirtilir.

scroll

Bu değer taşan içeriğin kırpılacağını ve eğer kullanıcı arayüzü kırpılan içeriği göstermek için bir kaydırma mekanizması kullanıyorsa, içerik kırpılsın/kırpılmasın çerçeve üzerinde bu mekanizmanın gösterilmesi gerektiğini belirtir. Bu değer, özdevimli bir ortamda kaydırma çubuklarının görünür ve görünmez yapılması ile ilgili sorunların ortaya çıkmasını önler. Bu değer hedef ortam print iken belirtildiğinde, taşan içerik basılacaktır.

auto

auto değerinin davranışı kullanıcı arayüzüne bağlıdır fakat kaydırma mekanizmasının sadece taşan çerçeveler için gösterilmesini gerektirir.

overflow niteliği visible olarak belirtilse bile, kullanıcı arayüzünün belge penceresindeki içerik yerel işletim sistemi tarafından kırpılabilir.

Örnek:

Aşağıdaki belgede <blockquote> içeriğinin (<div> elemanının oluşturduğu) taşıyıcı blok için çok büyük olduğunu varsayalım:

<div>
<blockquote>
<p>Bütün dünya ölçüsünde çocuklarımızı dünya vatandaşı olarak,
hırstan, kinden, garazdan ve her türlü husumetten kurtulmuş
olarak terbiye etmeliyiz.</p>
<cite>- M. K. Atatürk</cite>
</blockquote>
</div>

Üretilen çerçevelerin boyutlarını ve şeklini denetleyen biçembent:

div {
  width : 200px; height: 200px;
  border: thin solid red;

}

blockquote  {
  width : 190px; height : 190px;
  margin-top: 50px; margin-left: 50px;
  border: dashed black;
}

cite {
  display: block;
  text-align : right;
  border: none;
  padding: 5px
}
p { margin: 0; padding: 5px }

overflow niteliğinin ilk değeri visible olduğundan <blockquote> kırpılmadan biçimlenecektir:

[Açıklama]

<div> elemanı için overflow değerini hidden yaparak <blockquote> içeriğinin kırpılmasına sebep oluruz:

[Açıklama]

hidden yerine scroll değeri verilseydi, kaydırma mekanizmasını destekleyen bir kullanıcı arayüzü bunu göstererek kullanıcının kırpılmış içeriğe de erişmesi mümkün kılınabilirdi.

11.1.2 Kırpma: clip niteliği

Kırpılma bölgesi bir elemanın oluşturulan içeriğinin ne kadarlık bölümünün görünür olaçağını tanımlar. Öntanımlı olarak kırpılma bölgesi elemanın çerçeveleri ile aynı şekil ve boyuttadır. Bununla birlikte, kırpılma bölgesinde clip niteliği ile değişiklik yapılabilir.

clip niteliği, overflow niteliğinin değeri visible'dan farklı olan elemanlara uygulanır. Değerlerin anlamları şöyledir:

auto

Kırpılma bölgesi elemanın çerçeveleri ile aynı boyut ve konumda olur.

şekil

BB2'de, geçerli tek şekil dikdörtgendir; rect (üst, sağ, alt, sol) sözdizimiyle belirtilir ve buradaki üst, alt, sağ ve sol çerçevenin ayrı ayrı kenarlarını belirler. Belirsizlikten dolayı, kullanıcı arayüzleri rect() işlevinin argümanları arasında virgülü desteklemeyebilir.

üst, sağ, alt ve sol biruzunluk değerine veya auto değerine sahip olabilir. Negatif uzunluklara izin verilir. auto değeri, kırpma bölgesinin sınırının elemanın üretilen çerçevesinin sınırıyla aynı olacağı anlamına gelir (yani, auto değeri '0' ile aynı anlama gelir).

Koordinatlar piksel değerlerine yuvarlandığında, sol ve sağ toplamının elemanın genişliğine (veya üst ve alt toplamının elemanın yüksekliğine) eşit olduğu zaman hiçbir görünür piksel kalmayacağı ve bunun tersi olarak, bu toplamlar '0' olduğunda hiçbir pikselin gizli kalmayacağı dikkate alınmalıdır.

Elemanın üstsellerinin de kırpılma bölgeleri olabilir (overflow niteliklerinin değeri visible olmadığında); oluşturulan içerik kırpılma bölgelerinin kesişimi olur.

Eğer kırpılma bölgesinin sınırları kullanıcı arayüzünün belge penceresinin sınırlarını aşarsa içerik yerel işletim sistemi tarafından bu pencereyle kırpılabilir.

Örnek:

Şu iki kural:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

aşağıdaki resimlerdeki gibi kesikli çizgilerle sınırlanmış dikdörtgen kırpılma bölgeleri oluşturacaktır:

[Açıklama]

Not:

BB2'de, tüm kırpılma bölgeleri dikdörtgendir. Belirtimin sonraki aşamalarında dikdörtgenden farklı kırpılma bölgelerine de izin verileceğini umuyoruz.