11 Efekty wizualne

11.1 Przepełnienie i obcinanie

Zwykle zawartość pola blokowego w całości mieści się w granicach tego pola. Jednak w pewnych sytuacjach może się zdarzyć przepełnienie pola, czyli wyjście części lub całej treści poza pole, np.:

• Nie można złamać linii, przez co jej pole jest szersze niż szerokość pola blokowego.
• Pole blokowe jest za szerokie dla zawierającego je bloku. Może się to zdarzyć, gdy wartość własności ‚width’ elementu powoduje wylanie się wygenerowanego pola blokowego poza blok zawierający.
• Wysokość elementu przewyższa bezpośrednio określoną wysokość bloku zawierającego (tzn. wysokość bloku zawierającego jest określona za pomocą własności ‚height’, a nie przez wysokość treści).
• Pole potomne jest pozycjonowane bezwzględnie, częściowo poza polem. Takie pola nie zawsze są obcinane przez własność ‚overflow’ ich przodków.
• Pole potomne ma ujemne marginesy, co powoduje, że częściowo leży poza polem.
• Własność ‚text-indent’ powoduje, że pole śródliniowe "wisi" poza lewą lub prawą krawędzią pola blokowego.

Gdy wystąpi przepełnienie, ustawienie własności ‚overflow’ decyduje o tym, czy pole zostanie obcięte do krawędzi dopełnienia i, jeśli tak, czy zostanie udostępniony jakiś mechanizm przewijania pozwalający uzyskać dostęp do obciętej treści.

11.1.1 Przepełnienie: własność ‚overflow’

Własność ta służy do określania, czy treść elementu blokowego wychodząca poza jego pole ma zostać obcięta. Własność ta dotyczy całej treści elementu z wyjątkiem elementów potomnych (oraz ich treści i potomków), których blokiem zawierającym jest obszar widoku lub przodek tego elementu. Opis wartości:

visible

Wartość ta powoduje, że treść nie będzie obcinana, tzn. może zostać zaprezentowana poza polem blokowym.

hidden

Wartość ta powoduje, że treść zostanie obcięta i nie powinien zostać udostępniony żaden mechanizm przewijania pozwalający dotrzeć do obciętego obszaru.

scroll

Wartość ta powoduje, że treść zostanie obcięta i aplikacja kliencka udostępni mechanizm przewijania widoczny na ekranie (np. pasek przewijania). Mechanizm ten powinien być widoczny bez względu na to czy treść została obcięta, czy nie. W ten sposób daje się uniknąć problemu pojawiających się i znikających pasków przewijania w środowiskach dynamicznych. Gdy wartość ta zostanie użyta w druku, przelewająca się treść może zostać wydrukowana.

auto

Działanie wartości ‚auto’ zależy od aplikacji klienckiej, ale powinna ona powodować pojawianie się mechanizmu przewijania w przepełnionych polach.

Nawet przy własności ‚overflow’ ustawionej na ‚visible’ rodzime środowisko operacyjne może obciąć treść do rozmiaru okna dokumentu aplikacji klienckiej.

Aplikacje klienckie muszą własność ‚overflow’ zastosowaną na rzecz elementu głównego stosować na rzecz obszaru widoku. Jeśli elementem głównym jest HTML języka HTML lub html języka XHTML i element ten zawiera dziecko BODY (HTML) lub body (XHTML), aplikacje klienckie muszą zastosować własność ‚overflow’ pierwszego takiego dziecka na rzecz obszaru widoku, jeśli wartość dla elementu głównego to ‚visible’. Wartość ‚visible’ zastosowana na rzecz obszaru widoku musi zostać zinterpretowana jako ‚auto’. Wartość używana własności ‚overflow’ elementu, z którego wartość jest przekazywana musi mieć wartość ‚visible’.

Pasek przewijania umieszczony na krawędzi pola elementu powinien znajdować się między wewnętrzną krawędzią obramowania a zewnętrzną krawędzią dopełnienia. Przestrzeń zajmowana przez paski przewijania powinna zostać odjęta od wymiarów bloku zawierającego tworzonego przez element zawierający te paski.

<div>
<blockquote>
<p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>

div { width : 100px; height: 100px;
      border: thin solid red;
      }
blockquote   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px;
      border: thin dashed black
      }
cite { display: block;
       text-align : right;
       border: none
       }

  container { position: relative; border: solid; }
  scroller { overflow: scroll; height: 5em; margin: 5em; }
  satellite { position: absolute; top: 0; }
  body { height: 10em; }

  <container>
   <scroller>
    <satellite/>
    <body/>
   </scroller>
  </container>

11.1.2 Obcinanie: własność ‚clip’

Wycinek określa jaka część pola obramowania elementu jest widoczna. Domyślnie element nie jest wycinany. Jednak za pomocą własności ‚clip’ można bezpośrednio określić obszar wycięcia.

Własność ‚clip’ ma zastosowanie tylko do elementów pozycjonowanych bezwzględnie. Opis wartości:

auto

Element nie jest wycinany.

<shape>

W CSS 2.1 jedyną poprawną wartością typu <shape> jest: rect(<top>, <right>, <bottom>, <left>), gdzie <top> i <bottom> określają przesunięcie względem górnej krawędzi obramowania pola, a <right> i <left> określają przesunięcie względem lewej krawędzi obramowania pola w tekście pisanym od lewej i względem prawej krawędzi pola w tekście pisanym od prawej strony. Wartości przesunięć należy oddzielać przecinkami. Aplikacje klienckie muszą rozpoznawać wartości oddzielane przecinkami, ale mogą też obsługiwać zapis bez przecinków (ale nie mieszane rozwiązania), ponieważ poprzednia wersja tej specyfikacji nie była pod tym względem jasna.

<top>, <right>, <bottom> oraz <left> mogą być wartościami wyrażonymi w jednostkach długości lub (<length>) określać wartość ‚auto’. Można stosować wartości ujemne. Wartość ‚auto’ oznacza, że dana krawędź wycinka będzie pokrywała się z krawędzią wygenerowanego pola obramowania elementu (tzn. ‚auto’ oznacza to samo, co ‚0’ dla wartości <top> i <left> (w tekście pisanym od lewej, <right> w tekście pisanym od prawej strony), to samo, co wartość obliczona wysokości plus suma szerokości pionowych części dopełnienia i krawędzi obramowania dla <bottom>, oraz to samo, co wartość obliczona szerokości plus suma szerokości poziomych części dopełnienia i krawędzi obramowania dla <right> (w tekście pisanym od lewej, <left> w tekście pisanym od prawej), tak, że cztery wartości ‚auto’ tworzą wycinek pokrywający się z polem obramowania elementu).

Przy zaokrąglaniu współrzędnych na współrzędne pikselowe należy uważać, aby żadne piksele nie pozostały widoczne, gdy <left> i <right> (lub <top> i <bottom>) mają taką samą wartość oraz, aby żadne piksele znajdujące się w obrębie pola obramowania elementu nie pozostały ukryte, gdy wartości te zostaną ustawione na ‚auto’.

Wycinek elementu odcina każdy rodzaj treści elementu (np. treść, elementy potomne, tło, obramowanie, ozdobniki tekstu, obrys oraz mechanizm przewijania, jeśli jest widoczny) znajdującej się poza tym obszarem. Treść, która została odcięta nie powoduje przepełnienia.

Przodkowie elementu również mogą odcinać części swojej treści (np. poprzez własną własność ‚clip’ i/lub jeśli ich własność ‚overflow’ nie jest ustawiona na ‚visible’). Ostateczna prezentacja jest wypadkową tych wszystkich czynników.

Jeśli wycinek wychodzi poza granice okna dokumentu aplikacji klienckiej, treść może zostać obcięta do rozmiaru tego okna przez rodzime środowisko operacyjne.

p { clip: rect(5px, 40px, 45px, 5px); }
p { clip: rect(5px, 55px, 45px, 5px); }

11.2 Widzialność: własność ‚visibility’

Własność ‚visibility’ określa, czy pola wygenerowane przez element mają zostać zaprezentowane. Niewidoczne pola mimo to mają wpływ na układ (aby wyłączyć generowanie bloku należy ustawić własność ‚display’ na ‚none’). Opis wartości:

visible

Wygenerowane pole jest widoczne.

hidden

Wygenerowane pole jest niewidoczne (całkowicie przezroczyste, nic nie zostaje narysowane), ale bierze udział w układzie. Ponadto potomkowie takiego elementu, których własność ‚visibility’ jest ustawiona na ‚visible’ będą widoczni.

collapse

Zobacz podrozdział o dynamicznych efektach wierszy i kolumn w tabelach. Dla elementów innych niż wiersze, grupy wierszy, kolumny i grupy kolumn wartość ‚collapse’ działa tak samo, co wartość ‚hidden’.

Własności tej można używać w połączeniu ze skryptami w celu uzyskania efektów dynamicznych.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Przykład dynamicznej widzialności</TITLE>
<META
 http-equiv="Content-Script-Type"
 content="application/x-hypothetical-scripting-language">
<STYLE type="text/css">
<!--
   #container1 { position: absolute;
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute;
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Wybierz podejrzanego:</P>
<DIV id="container1">
   <IMG alt="Al Capone"
        width="100" height="100"
        src="suspect1.png">
   <P>Imię i nazwisko: Al Capone</P>
   <P>Miejsce pobytu: Chicago</P>
</DIV>
<DIV id="container2">
   <IMG alt="Lucky Luciano"
        width="100" height="100"
        src="suspect2.png">
   <P>Imię i nazwisko: Lucky Luciano</P>
   <P>Miejsce pobytu: Nowy Jork</P>
</DIV>
<FORM method="post"
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button"
          value="Capone"
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button"
          value="Luciano"
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>