typografia

wersja 2.5 | Ostatnia rewizja: 2016-01-25

Postanowiłem napisać tekst, który może służyć za swego rodzaju wytyczne dla każdego, kto ma zamiar pisać dla bedacmlodymlekarzem.pl , dzięki czemu uda nam się zachować jednakowy wygląd („layout”) strony. Poniżej po kolei wypisuję zastosowane przeze mnie formaty, a w ramkach zamieszczam kod HTML, którym należy się posłużyć wpisując go w edytorze tekstowym (nie wizualnym!) WordPressa. A więc po kolei:

NAGŁÓWKI

Nagłówki używamy do nazywania kolejnych rozdziałów naszego tekstu, a także do tworzenia list, gdy chcemy np. wypunktować i skomentować przytaczane argumenty.

  <h1> Heading 1 </h1> ... <h6> Heading 6 </h6> 

Heading 1

Jest on zarezerwowany wyłącznie do nazwy danego artykułu, który jest generowany automatycznie. Datego nie należy go używać w ogóle.

Heading 2

Używany jako podstawowy tag do tworzenia nazw kolejnych podrozdziałów głównych. Może, ale nie musi być pisany dużymi literami.

Kolejne tagi:

Heading 3

Heading 4

Heading 5
Heading 6

W praktyce rzadko używa się coś więcej niż nagłówki h2 i h3. Tag h6 zarezerwowany jest do wypunktowywania kolejnych przykładów, argumentów, myśli itp., gdy nie chcemy używać zwykłego wypunktowania (tj. z cyframi lub kropkami). Zobacz poniżej:



WYPUNKTOWYWANIE

99% list będzie używało typowego kodu HTML:

<ul>
<li>punkt pierwszy </li>
<li>punkt drugi</li>
</ul>

<ol>
<li>punkt pierwszy </li>
<li>punkt drugi</li>
</ol>

Aby uzyskać typowy efekt:

  • punkt pierwszy
  • punkt drugi
  1. punkt pierwszy
  2. punkt drugi

PARAGRAFY

Paragrafy, czyli wszystko pomiędzy tagami <p> i </p>. Dodałem własne klasy.

wstep

Tekst otwierający dany artykuł, czyli „wejściówka”, jest pogrubiona i pochylona i jest pisana inną czcionką:

  <p class="wstep">Tekst wprowadzający. Tekt pogrubiony i pochylony</p> 

Tekst wprowadzający. Tekt pogrubiony i pochylony


Bootstrap grid system

Innym rozwiązaniem jest skorzystanie ze standardu Bootstrap, który z założenia dzieli ekran na 12 pól szerokości. I tak, jeśli chcemy np podzielić ekran w stosunku 2:1 inkorporujemy obiekt div class=”col-md-8″ i div class=”col-md-4″jeden po drugim
W ten sposób uzyskując podział w pożądanych proporcjach. Dostępne są dowolne wariacje, również wielokolumnowe, sumujące się do 12
 
Więcej szczegółów (nb:układ 9 do 3)
na oficjalnej stronie projektu Bootstrap
 

Pusty odstęp

WordPress (platforma jakiej używa BML) automatycznie konweruje tekst oddzielony enterem (pustą linią) na dwa paragrafy zamknięte tagami

<p></p>

Robi to jednak tylko raz, bez względu na ilość wstawionych linii. Dlatego za każdym razem, gdy w tekście chcemy umieścić większy odstęp, możemy wstawić kod:

<div class=odstep>&nbsp;</div>
 
 
 
 

Docelowo jeden tekst daje odstęp 20px. Aby uzyskać większą odległość, możemy umieścić takich odstępów kilka, jeden po drugim.


CYTOWANIE

Cytowania warto używać zaraz po wejściówce jako myśl przewodnią tekstu, ale oczywiście nie musi to być regułą.

  <blockquote> TWÓJ CYTAT <footer> Autor cytatu </footer></blockquote> 

TWÓJ CYTAT

Autor cytatu

WAŻNE: Pamiętaj, aby tagi <footer> i </footer> znalazły się pomiędzy tagami <blockquote> i </blockquote>! W praktyce element footer jest rzadko używany.



IKONY

Ikony to pewna nowość w kodzie HTML. Nie są to obrazki sensu stricto, lecz są wygenerowane dzięki skryptowi bootstrap.

<span class="glyphicon glyphicon-search"></span> ikonka lupy

ikonka lupy
ikonka kuli ziemskiej
ikonka telefonu

Pełna lista ikon dostępna pod linkiem Bootstrap Glyphicons.
Aktualna wersja: 3.3.6

Dostępne są również ikony FontAwesome:

<i class="fa fa-ambulance"></i> ambulans

ambulans
Aktualna wersja: 4.5.0

Możemy używać ikon Bootstrap albo tych, wszystko jedno

Pamiętaj pomiędzy ikoną a tekstem po niej umieścić spację!

WYRÓŻNIANIE TEKTU

Dostępne są różne metody wyróżnienia tekstu. Używamy różnych w zależności od tego, co chcemy osiągnąć.

Nazwa strony/autora

Za każdym razem, gdy wymienia się nazwę strony lub jednego z jej autorów, mile widziane jest, by oznaczyć to osobną klasą:

  <span class="bml"> </p> 

bedacmlodymlekarzem.pl

Ważny tekst

Tekst, który uważamy za szczególnie istotny:

  <span class="wazne"> </p> 

wazny tekst

Wyróżnione pole

Fragment tekstu szczególnie zasługujący na wyróżnienie możemy umieścić w osobnej ramce:

<div class="ramka-wyroznienie">Szczegółowe zestawienie danych dot. przyznawania miejsc rezydenckich<br /> w <span class="wazne">województwie mazowieckim</span> na przestrzeni ostatnich lat:<br /> <a title="Raport: rezydentury w mazowieckim" href="http://www.bedacmlodymlekarzem.pl/pliki/bedacmlodymlekarzempl-raport-rezydentury-mazowieckie.pdf"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-download-alt"></span> POBIERZ</button></a>
</div>
Szczegółowe zestawienie danych dot. przyznawania miejsc rezydenckich
w województwie mazowieckim na przestrzeni ostatnich lat:

Alerty bootstrap

Tak jak jest to podane w dokumentacji bootstrap, tekst można umieszczać w kolorowych polach:

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

OBRAZKI

Zdecydowanie najłatwiej do wstawiania zdjęć i tworzenia galerii jest używać edytora wizualnego WordPressa. W szczególnych przypadkach możemy użyć następujących klas:

Osobną kwestią jest używanie tagów *figure* – różnią się one od prostego wstawienia zdjęcia tym, że otaczają je ramką i oferują możliwość umieszczenia pod nim podpisu. Przykład użycia:

<figure class="figure-center">
<a href="http://www.aljazeera.com/mritems/images/2014/8/2/2014829336197112_8.jpg">
<img width="700"  src="http://www.aljazeera.com/mritems/images/2014/8/2/2014829336197112_8.jpg"   /></a>
<figcaption>Zniszczenia w Strefie Gazy są ogromne </figcaption>
</figure>
Zniszczenia w Strefie Gazy są ogromne

Dostępne są 3 klasy rycin, w zależności od tego, gdzie chcemy je umieścić:

  • figure-left: obrazek wraz z podpisem będze przyległ do lewej strony a tekst będzie go opływał po prawej
  • figure-right: analogicznie j.w, tylko po drugiej stronie
  • figure-center: jeżeli zdjęcie będzie dostatecznie duże, będzie wyśrodkowane a tekst będzie się znajdował nad i pod nim

Przy tej okazji warto zaznaczyć, że szerokość strony BML z tekstem to 780px (już po odjęciu marginesów). Co za tym idzie, można wstawić koło siebie np. dwa zdjęcia po 360px – jedno po lewej, drogie po prawej i będą ze sobą sąsiadować.



NOTATKA Z BOKU

Gdy chcemy dodać coś na marginesie:

  <span class="zboku-lewo">Tekst z boku po lewej</span> 

Krótki cytat tekstu (span) Klasa zboku jest bardzo dobra do umieszczania krótkich cytatów z własnego tekstu, dokładnie na takiej samej zasadzie jak widzimy to czasem w czasopismach. zboku umieszcza tekst po prawej stronie, zboku-lewo po lewej

WAŻNE: Pamiętaj, by fragment tekstu objęty klasą <span class=”zboku” (lub „zboku-lewo”)> </span> umieścić ponad tekstem, który ma opływać.



PRZYCISKI

Choć nie jest to zalecane, istnieje możliwość dodania w tekście przycisków. Jest to szczególnie efektowna metoda podawania adresu mailowego lub linku do ściągnięcia jakiegoś pliku, zwłaszcza w połączeniu z wyróżniającym tłem (patrz: wyróżnione pole)

<a href="mailto:email@przyklad.pl"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-envelope"></span> Napisz do nas!</button></a>

Szczegóły: Bootstrap buttons


TABELA

Domyślnie tabela przy używaniu standardowego kodu HTML wygląda następująco:

Zwykła tabela Nagłówek th
pierwszy rząd druga kolumna
drugi rząd wartość
trzeci rząd itd.

Po nadaniu jej klasy tableizer-table otrzymuje ona obramowanie. Nagłówek tabeli można dodatkowo wyróżnić kolorystycznie od reszty tabeli nadając mu klasę tableizer-firstrow:

<table class=tableizer-table>
<tr class="tableizer-firstrow">
<th>Nagłówek</th>
<th>th</th>
</tr>
<tr>
<td>pierwszy rząd</td>
<td>druga kolumna </td>
</tr>
<tr>
<td>drugi rząd</td>
<td>wartość</td>
</tr>
<tr>
<td>trzeci rząd</td>
<td>itd.</td>
</tr>
</table>
tableizer-table Nagłówek th
pierwszy rząd druga kolumna
drugi rząd wartość
trzeci rząd itd.

Uwaga: Szeroka tabela (powyżej 3 kolumn) może być źle wyświetlana na małych ekranach (smartfonach) – jeżeli dane tam zawarte są niezbędne dla zrozumienia tekstu, lepiej wstawić ją w postaci obrazka.



„Linki:”

Wysoce pożądane jest, by na koniec każdego artykułu, jeśli nawiązuje on do treści z innych stron, uwzględnić podsumowanie wszystkich wymienionych wcześniej źródeł:

<h4><span class="glyphicon glyphicon-eye-open"></span> Linki:</h4>
<ul>
<li><a href="http://www.przyklad.pl" title="tekst-wyswietlany-po-najechaniu-na-link-myszka-01">Ciekawy artykuł odnoszący się do tego, co powiedziałem</a></li>
<li><a href="http://www.przyklad.pl" title="tekst-wyswietlany-po-najechaniu-na-link-myszka-02">Inny ciekawy artykuł</a></li>
</ul>

Linki:

Gdzie title jest treścią, która wyświetli się po najechaniu myszką na dany link.
Uwaga: Kod ikony powinien znajdować się wewnątrz tagu h4!

Posłowie

Tekst zamykający dany artykuł, np. podziękowania, zapowiedź następnej części itp. najlepiej pisać kursywą, zamykając go po prostu tagami <em> i </em>

Źródło miniatury tekstu

Gdy na koniec tekstu (już po wypunktowaniu linków i posłowiu) chcemy zamieścić informację dotyczącą praw autorskich materiałów zamieszczonych w tekście (np. zdjęć / schematów itp.) dodajemy następujący kod:

<div class=zrodlo-miniatury>
<span class="glyphicon glyphicon-share"></span> Źródło miniatury artykułu: <a href="http://wikipedia.pl" title="tekst opisowy" rel="nofollow">wikipedia</a>
</div>
 
Źródło miniatury artykułu: wikipedia

Bootstrap

Jak niejednokrotnie w tekście już padło, strona wykorzystuje framework Bootstrap. Wszystkie dostępne możliwości można przeczytać w jego oficjalnej dokumentacji.

Inne kody HTML

Oczywiście wszystkie inne kody zgodne z HTML 4 i 5 mogą być użyte. Zaleca się jednak stosowanie jak najmniejszej ilości dodatkowych ozdobników, aby czytelnik mógł bardziej skupić się na treści tekstu, niż na jego formie.

Samodzielne badanie typografi

W niniejszym opracowaniu starałem się opisać wszystkie wprowadzone przeze mnie klasy a także zmodyfikowane elementy. Co jakiś czas również aktualizuję tę stronę. Jednakże kiedy widzicie że w jakimś poście został użyty nieopisany tu element, zawsze możecie samodzielnie dojść do tego, w jaki sposób można go użyć – czytając kod źródłowy strony. Akurat zarówno w przypadku przeglądarki Firefox i Chrome można to zrobić skrótem Ctrl + U. Z kolei pojedyncze elementy strony można przeglądać za pomocą wbudowanych w przeglądarkę narzędzi deweloperskich – w tym przypadku również obowiązuje wspólny skrót, Ctrl + Shift + C.


Z góry dziękuję wszystkim, którzy będą się stosować do w/w standardów. Znacznie ułatwi to nam pracę i sprawi, że bedacmlodymlekarzem.pl zachowa jednolity, estetyczny wygląd.

Dodaj komentarz

Ze względu na ochronę antyspamową komentarz każdego nowego użytkownika musi być zaakceptowany przez moderatora. W związku z tym może minąć trochę czasu nim Twój wpis pojawi się na stronie. Prosimy o cierpliwość :).

Nie musisz podawać swojego adresu email. Jeśli to zrobisz, nie będzie opublikowany - przyda się, gdybyśmy chcieli się z Tobą skontaktować. Zachęcamy również do zapisywania się do newslettera!