poniedziałek, 21 lutego 2011

Wyśrodkowanie tekstu w pionie (CSS)

W specyfikacji CSS (jak na razie) nie ma bardzo ważnego zapisu dotyczącego środkowania tekstu  w pionie. Trudno to jakoś silnie uzasadnić. Trudno to w ogóle uzasadnić. Ostatnio w modzie jest używanie CSS. Uważany jest on jako panaceum na wszystko włącznie z modnym pisaniem kodu. Wystarczy jednak do niego siąść i gołym okiem widać kompletny bezsens tego potworka. Opisywany tutaj problem to zaledwie jeden z wielu. Wystarczy spróbować wycentrować jakiś blok, zrobić menu itp. itd. Potworek siedzi na karku potworka, a wszystko to ziejący ogniem potwór pogania. Składnia wygląda trochę jak kawałkowana Java z amputowaną logiką. Trochę tu dziedziczenia. Jedne elementy po sobie coś dziedziczą, inne zaś nie. Oczywiście bez żadnej logiki. Brak zmiennych przyprawia o ból głowy. Jeśli stosuję zaledwie kilka kolorów na stronie to bywa, że skaczę po pliku jak wariat, żeby sobie przypomnieć, gdzie ostatnio użyłem jasnozielonego i kopiuję, a potem odszukuję gdzie ostatnio pisałem i wklejam skopiowany kod. Trochę w tym pomaga IDE, ale to nie znaczy, że problem przestaje istnieć.
Arcyirytującym oślarstwem jest zmiana znaczenia znaczników html przez CSS. Czytam cudzy kod strony w html'u i nic z niego nie da się zrozumieć. Wszędzie pełno <span> i <div>, znaczenia których nie można się w żadnym wypadku domyślić bez wertowania plików CSS i zgadywania co też autor miał na myśli w chwili artystycznego szału. Mickiewiczowskie "czterdzieści i cztery" to pestka przy tej zgaduj-zgaduli. Zwolennicy, czy wręcz prorocy i kapłani CSS jako główny atut przedstawiają czystość kodu przy stosowaniu CSS. O matyldo! Wczoraj czytałem kod strony, gdzie menu, przyciski, a nawet (winszuję) formularze oparte były o elementy <ul> i <li>. Kod był przemieszany zaangażowaniem kucharza z adhd mieszającego sałatkę warzywną. Twórca htmla by się, przysłowiowo, w grobie przewrócił.

Przytaczam tu artykuł:
http://phrogz.net/css/vertical-align/index.html
który dość pełnie opisuje idiotyzmy i łapanie się prawą nogą za lewe ucho aby wyśrodkować element w pojemniku w pionie.
Dowiadujemy się z niego UWAGA!, że aby wyśrodkować jedną linijkę w pionie należy linię tekstu pogrubić do rozmiaru pojemnika, w którym się ta linia znajduje. Innymi słowy jeśli pojemnik ma wysokość 500 pikseli, to i linia powinna mieć wysokość 500 pikseli, czyli line-height: 500px;. Oczywiście o ile znamy wysokość pojemnika. Przy pojemnikach o zmiennej wysokości to już nie działa. Czy to nie idiotyzm? Prorocy CSS co wy na to? Duże oczka? Zaskoczeni? A nie ma czym! Należy się nauczyć takich sztuczek jeśli inaczej się nie da. Musimy umieć stosować takie potworki bo twórcy CSS nie przewidzieli tego... tamtego... jeszcze tamtego... i jeszcze... i jeszcze... i trzy kropki. A pomyśleć, że dla komórki w tabeli się dało! Tam jest atrybut valign. Wystarczy wpisać valign=middle i gotowe! Jak widać w jednym miejscu się da, a w innym już nie.

Oddzielnie opiszę centrowanie pojemników w poziomie, bo oczywiście tego też się nie dało. Jednak, jak w poprzednim przypadku, w tabelach się dało i to działa.

Brak komentarzy:

Prześlij komentarz