Pamiętasz czasy przygotowywania prac do szkoły lub na studia? Justowanie to było coś! Każdy chciał mieć wyjustowaną pracę. Wszystko było ładnie pięknie dopóki nie zdarzyła się sytuacja, kiedy cztery wyrazy rozstrzeliły się na szerokość całej strony. Wtedy nie było to zjawisko pożądane. Dziś wręcz przeciwnie - z pełną premedytacją wykorzystamy właściwości dziur.
Flexi not sexy.
Jeśli miałeś do czynienia z wyświetlaniem flex, to pewnie dotrzegłeś jedną z jego zalet, czyli możliwość równomiernej dystrybucji elementów. Właśnie! Elementów. A czy próbowałeś kiedyś z pomocą jego magicznej różdżki rozstawić pojedyncze litery czy wyrazy? Spróbujmy.
<p>k a w a ł e k k o d u</p>
<p>kawałek kodu</p>
+
p {
display: flex;
justify-content: space-between;
}
Co otrzymamy?
Nic. Cały tekst pomimo rodzielenia spacjami stanowi jeden element - węzeł tekstowy. Można to rozwiązać w ten sposób:
<p>k a w a ł e <span>k</span> k o d u</p>
<p><span>kawałek</span> kodu</p>
W pierwszym paragrafie wprowadzając element SPAN stworzyliśmy 3 elementy, a w drugim 2. Trochę to uciążliwe gdybśmy chcieli rozstawić poszczególne wyrazy, a jeszcze bardziej gdy poszczególne litery. Możemy jeszcze użyć właściwości letter-spacing, ale w tym przypadku musimy założyć stałą szerokość kontenera i stały rozmiar fontu. Co i tak niekoniecznie da oczekiwany efekt, bo czcionki mogą renderować się inaczej na różnych przeglądarkach.
Justify my love.
Musimy wrócić do szkolnych zmagań z justowaniem tekstu. Powinno się udać bez regresji hipnotycznej. A więc. Czy pamiętasz co się działo z tekstem, który nie wypełniał całej linii, a chciałeś go wyjustować? No właśnie. Nie chciał się wyjustować. Justował się wtedy, kiedy dodawałeś więcej tekstu. Wtedy właśnie pojawiały się wspomniane dziury. To dziwne zjawisko wykorzystamy dziś jako remedium na problemy z wcześniejszymi rozwiązaniami.
Weźmy za przykład:
<p>
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
</p>
<p>
Został po raz pierwszy
</p>
+
p {
width: 180px;
text-align: justify;
}
Pierwsza linia, a dokładnie jej 4 pierwsze wyrazy rozstrzeliły się. Jednak kiedy tekst będą stanowić tylko te wyrazy, efekt znika. Ale jeśli chcemy rozstawić litery w naszym jednolinijkowym tekście, to musimy dodawać drugą linijkę? Oczywiście, że nie! I tak!
Nikt nie powiedział, że nasza linijka musi być tekstem. Zapewne znasz właściwości elementów z wyświetlaniem inline-block - zajmują przestrzeń, a jednocześnie można je poddawać "modyfikacjom" jak zwykły tekst. Skoro tak, to stwórzmy drugą sztuczną linijkę.
<p>
Został po raz pierwszy
</p>
+
p {
width: 180px;
text-align: justify;
}
p::after {
content: '';
display: inline-block;
width: 100%;
}
Ha! Element z inline-block powoduje utworzenie pełnej szerokości linii, co za tym idzie pierwsza linia tekstu dostosuje swoje wyjustowanie do niej. Czy metoda zadziała również kiedy litery będą rozdzielone? Oczywiście.
Należy pamiętać, że zwykła spacja służy do podzielenia tekstu na "elementy", a twardą spację należy użyć wtedy kiedy ona sama równiez ma stanowić "element".
Ponieważ metoda jest prawie uniwersalna - tekst dostosowuje się do dostępnej szerokości, nic nie stoi na przeszkodzie, aby tą szerokość animować. Nie musimy tu stosować wspomnianego triku z dostosowywaniem letter-spacing:
Żeby nie było tak super - jeśli będzie za mało miejsca na tekst, to poniektóre litery przeskoczą do kolejnych linii. Ale żeby było i super - rozstrzelenie można zastosować również do tekstu ustawionego w kierunku pionowym:
p {
text-align: justify;
height: 100%;
writing-mode: tb;
text-orientation: upright;
}
p:after {
content: "";
display: inline-block;
height: 100%;
}
Paragraf ma wysokość 100%, ale i druga sztuczna linia też. Poprzez zmianę trybu drukowania liter (writing-mode) obróciliśmy całość o 90 stopni.
Nasza dzisiejsza przygoda kończy się. Trzymam kciuki, aby odtąd justowanie było dla Ciebie ogromną przyjemnością. Do przeczytania!