Witajcie moi Drodzy Czytelnicy!

Wracamy do rzeczy. Rzecz w tym, że jest mnóstwo kwestii do omówienia na forum bloga. Zaczniemy wspólnie od tematu projektowania strony pod kątem użytych czcionek. Pomyślicie w pierwszej chwili, że jest to banał, ale z doświadczenia wiem, że trzeba trochę czasu spędzić na przemyśleniu podejścia. Na początku zaznaczę, że nie ma złotego środka. Postęp w świecie aplikacji internetowych przybiera na tempie, chociaż na obecną chwilę nie jest łatwo ogarnąć ogromu materiałów, technologii i powiązać ich w celu wyznaczenia optymalnej drogi rozwoju tworzonego dzieła. Tak, dzieła, bowiem aplikacja to obraz naszej wyobraźni, naszej i naszych kolegów z zespołu – w skrajnym przypadku nielubianych projektantów-podwykonawców lub klienta 🙂

Obecnie najpopularniejszymi jednostkami rozmiaru czcionki i pokrewnych elementów (szerokość linii, marginesy paragrafów itd.), wykorzystywanymi na stronach internetowych, są PX EM. Nic dziwnego. Wszyscy wiecie o czym piszę.

Parę słów o jednostce PX

Korzystając pikseli nic nas nie może zaskoczyć. Bezwzględne określenie wielkości czcionki pozwala nam na pewność poprawności wyświetlania widoków na różnych platformach i w różnych przeglądarkach. Wszystko pięknie, ale już w tym momencie pojawiają się dwa poboczne tematy, które potrafią uprzykrzyć życie web deweloperom. Pierwszym jest Internet Explorer, a drugim responsywność.

Czas na EM?

Lata temu pojawiła się tendencja korzystania z jednostki EM. Dlaczego? Otóż, przytaczając trochę historii, wszystko zaczęło się od projektowania stron na IE (do wersji 9 włącznie). Obecnie ta ułomność przeglądarki IE się zaciera (i całe szczęście) dzięki zmianie polityki jej twórców. Czasy, kiedy chcieli mieć wszystko unikalnie, inaczej, bezwzględnie coś własnego … minęły. Trochę późno, jak na ludzi myślących, wrócili z drogi prowadzącej do niepowodzenia, jednak lepiej późno niż wcale. Niemniej czas tych zmian przyprawiał deweloperów o ból głowy. Podstawowa funkcja, jaką jest powiększanie strony w przeglądarce występowała wszędzie, ale już funkcja, gdzie występowało powiększanie wyłącznie czcionki była domeną prawie wszystkich przeglądarek. Jak się domyślacie, problem stanowiło IE, gdzie nie było siły, by skalować tekst strony, która wykorzystywała rozmiar bezwzględny PX.

Z pomocą przyszła jednostka EM. Ustalając wartość bazową węzła html (w procentach! – to omówimy później) na font-size: 62,5%, ustalamy wielkość na poziomie 10px – bowiem domyślna wielkość czcionki we współczesnych przeglądarkach wynosi 16px.

Teraz określając wielkość czcionki dla każdego węzła potomnego (lub wybranego) wykorzystując EM (1em = 100%) manipulujemy względnie wielkością. Dlaczego względnie? Otóż wielkość 1.4em to 140% wielkości czcionki rodzica! Ta prosta zasada prowadzi do wniosku, że wszystko zależy od rozmiaru czcionki w body i/lub html. Teraz i użyteczność strony podskoczyła i responsywność jest łatwiejsza w osiągnięciu.

Skalowanie opiera się wyłącznie na manipulacji wielkością bazową na węźle html. Jednak w myśl, że jedno rozwiązanie zazwyczaj generuje kilka nowych pytań/problemów, mamy kolejne kwestie do omówienia. Są to: reużywalność kodu i domyślny rozmiar czcionki w przeglądarce.

Co nowego w świecie CSS3?

Wyżej wymienione problemy sprawiły iż pojawiły się nowe podejścia w projektowaniu. Wróćmy na chwilę do korzystania z EM. Wyobraźmy sobie, że pewien blok kodu HTML chcemy przenieść do innej aplikacji (lub po prostu w nowe miejsce bieżącej aplikacji). Niekoniecznie musi to być szybkie i bezbolesne. Już się domyślacie? Inny rozmiar czcionki docelowego rodzica (wyliczony lub bezwzględny) wpłynie na to, że wygląd nam popłynie. Teraz musimy zadbać, by rodzicowi ustawić pierwotny rozmiar WZGLĘDNY!

Dlaczego nie bezwzględny? To pozostawiam Wam do rozmyśleń.

Jakie jest rozwiązanie? Otóż osoby, które są w temacie wiedzą o co chodzi, natomiast pozostali powinni wpaść na pomysł, by uzależnić czcionkę wyłącznie od rozmiaru bazowego. Pięknie, pomysłowo – tzw. rozmiar względny bazowo. Ustalając wielkość czcionki dowolnego potomka na 1.4rem (root em), uzależniamy go wyłącznie od wielkości czcionki elementu html – 140% * 16px – gdy bazowy rozmiar czcionki to 100% i domyślny rozmiar czcionki przeglądarki to 16px.

Rem’y są poprawnie odczytywane przez współczesne przeglądarki włącznie z IE od wersji 9. W ten sposób skalowanie tekstu jest możliwe we wszystkich najnowszych przeglądarkach.

Dodatek: Jeżeli zależy nam na tym, by rem’y nie powodowały nieoczekiwanych efektów na starszych przeglądarkach, należy dodać fallback wartości rozmiaru czcionki na piksele. Jest to nieco kłopotliwe, ale osoby, które tworzyły strony w czasach IE 6/7/8/9 wiedzą, że osiągalne – chociaż niewywołujące uśmiechu na twarzach 🙂

Wartość bazowa

Wcześnie wspominałem o problematycznej wartości bazowej. Należy pamiętać, że wartość bazowa jest zawsze procentowa – niezdefiniowana przyjmuje 100%. Oczywiście można pominąć ustalenie wartości bazowej w przypadku korzystania z wartości bezwzględnej body lub świadomie uwzględniając jej wartość na 100%. Wtedy nie ma ona znaczenia, a jej istnienie staje się umowne.

Zapominalscy lub niedoinformowani deweloperzy przypomną sobie o tej zasadzie kiedy zaczną wykorzystywać jednostki rem.

Podsumowanie

Jeszcze jednen problem, który pojawił się gdzieś w artykule – potencjalne wahania w domyślnej wielkości czcionki przeglądarki. Nie mamy pewności, że w przyszłości będzie to nadal 16px. Niemały kłopocik. W tym konkretnym przypadku idealnym wyjściem jest korzystanie z bezwzględnej wielkości czcionki body i względnej (lub nadal bezwzględnej) wielkości każdego elementu potomnego.

Jak widzicie, nie ma złotego środka. Wszystko zależy od założeń, jakie ma spełniać aplikacja – jej wymagać zarówno pozafunkcjonalnych, jak i funkcjonalnych. Należy rozpatrywać wykorzystanie okreslonego podejścia wyłącznie w odniesieniu do konkretnego projektu lub rodziny projektów.

Nie zapomnijmy też, że znaczącą wagę w wyborze stanowi doświadczenie i podejście programisty. Ciężko zmusić człowieka do korzystania z czegoś nowego, kiedy do tej pory przez naście lat wykorzystywał jedną technikę (np. wielkości bezwzględne).

Dziękuję wytrwałym Czytelnikom. Pozdrawiam!