Element HTML z pionowym tekstem
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS dowiemy się w jaki sposób utworzyć element HTML z pionowym tekstem.
Efekt końcowy został zaprezentowany poniżej.
s t y c z e ń l u t y m a r z e c k w i e c i e ń m a j c z e r w i e c l i p i e c s i e r p i e ń w r z e s i e ń p a ź d z i e r n i k l i s t o p a d g r u d z i e ń
Pierwszą ważną rzeczą, którą należy wykonać, aby uzyskać efekt pionowego tekstu, który został zaprezentowany powyżej, jest oddzielenie spacją poszczególnych liter tekstu, który ma być wyświetlony w pionie.
Wspomniana czynność została wykonana w kodzie HTML, który znajduje się poniżej.
<body>
<p>
<span>s t y c z e ń</span>
</p>
</body>
Element span jest interpretowany przez przeglądarkę internetową jako element wyświetlany w linii, a więc musimy sprawić, aby wspomniany element span był interpretowany przez przeglądarkę internetową jako element wyświetlany w bloku, co uzyskamy, dzięki właściwości display:block;
Kolejną ważną rzeczą jest to, aby litery tekstu, który ma być wyświetlony w pionie, zostały zamienione na duże litery, co uzyskamy, dzięki właściwości text-transform:uppercase;
Następną ważną rzeczą jest to, aby wartość szerokości elementu HTML (czyli właściwość width), w którym ma być umieszczony pionowy tekst, była nieco mniejsza niż wartość wielkości czcionki (czyli właściwość font-size), która została ustalona dla wspomnianego elementu HTML, dzięki czemu litery tekstu nie będą mogły zostać wyświetlone jedna obok drugiej i właśnie dlatego zostaną wyświetlone jedna pod drugą.
Wyśrodkowanie liter uzyskamy za pomocą właściwości text-align:center; a dzięki właściwości line-height będziemy mieć wpływ na odległość w pionie, pomiędzy literami naszego tekstu.
Dodatkowo możemy dodać do elementu span marginesy wewnętrzne padding, jakiś styl obramowania border oraz zaokrąglone rogi elementu, czyli właściwość border-radius.
Reguła CSS zawierająca wszystkie wspomniane właściwości CSS została podana poniżej.
p span {
display:block;
text-transform:uppercase;
width:14px;
font-size:15px;
line-height:20px;
text-align:center;
padding:5px;
border:1px solid #AAA;
border-radius:0 6px 0 6px;
}Rezultat:
s t y c z e ń
Kod całego dokumentu HTML został umieszczony pod spodem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p span {
display:block;
text-transform:uppercase;
width:14px;
font-size:15px;
line-height:20px;
text-align:center;
padding:5px;
border:1px solid #AAA;
border-radius:0 6px 0 6px;
}
</style>
</head>
<body>
<p>
<span>s t y c z e ń</span>
</p>
</body>
</html>
Kwestią sporną pozostaje fakt, że tekst, którego litery oddzielone są od siebie spacją s t y c z e ń, w kodzie HTML, może być różnie interpretowany przez roboty, które indeksują naszą stronę internetową, dlatego nie należy przesadzać z ilością takiego tekstu na danej podstronie naszego serwisu. Możemy również taki element, z pionowym tekstem, dodać do elementu HTML za pomocą właściwości content oraz selektora :before lub :after.
Jeżeli chcemy uzyskać pionowy tekst w elemencie HTML, lecz nie chcemy oddzielać jego liter spacją, to możemy skorzystać z właściwości word-wrap:break-word; która przełamie wyraz nawet w jego środkowej części, jeżeli wyraz będzie za długi i nie będzie mieścił się w szerokości danego elementu HTML (i właśnie o to nam chodzi w naszym efekcie).
Kod dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p span {
display:block;
text-transform:uppercase;
width:14px;
font-size:15px;
line-height:20px;
text-align:center;
padding:5px;
border:1px solid #AAA;
border-radius:0 6px 0 6px;
word-wrap:break-word;
}
</style>
</head>
<body>
<p>
<span>styczeń</span>
</p>
</body>
</html>Rezultat:
styczeń
W zaprezentowanych sposobach na utworzenie elementu HTML z pionowym tekstem, występuje jeszcze jeden problem, ponieważ gdy w naszym tekście znajdą się dwie litery "ii", to nie zostaną one umieszczone jedna pod drugą, ponieważ wspomniane litery są tak wąskie, że nawet dwie wyświetlą się w jednej linii. Sposobem na rozwiązanie tego problemu może być właściwość letter-spacing, która odpowiada za odległość pomiędzy literami tekstu.
Innym sposobem na utworzenie pionowego tekstu jest umieszczenie każdej litery danego tekstu w osobnym elemencie, który zostanie zinterpretowany przez przeglądarkę internetową jako element blokowy, dzięki czemu wszystkie elementy (zawierające jedną literę danego tekstu) zostaną umieszczone jeden pod drugim.
Każdą literę danego tekstu umieszczamy w elemencie liniowym span, do którego przede wszystkim dodajemy właściwość display:block; dzięki czemu przeglądarka internetowa zinterpretuje dany element span jako element wyświetlany w bloku, a nie w linii.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p {
text-transform:uppercase;
width:14px;
font-size:15px;
line-height:20px;
text-align:center;
padding:5px;
border:1px solid #AAA;
border-radius:0 6px 0 6px;
}
p span {
display:block;
}
</style>
</head>
<body>
<p>
<span>s</span><span>t</span><span>y</span><span>c</span><span>z</span><span>e</span><span>ń</span>
</p>
</body>
</html>W efekcie uzyskamy taki sam rezultat:
styczeń
W ten sposób utworzony pionowy tekst możemy wykorzystać na naszej stronie jako element, który będzie spełniał rolę dekoracyjną.
W następnej części kursu CSS poznamy jeden ze sposobów na utworzenie układu elementów HTML, które będą dopasowywały się do każdej rozdzielczości.