kursy, tutoriale

Element HTML z pionowym tekstem

Czas czytania: 2 minut

Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML.

Jak uzyskać efekt pionowego tekstu na stronie

Na początek będziemy musieli wybrać jakieś słowo lub tekst, w którym następnie rozdzielamy wszystkie litery naszego tekstu spacjami. Będzie to wyglądać np. tak:

P o n i e d z i a ł e k

W kodzie HTML będzie się to prezentować następująco:

<div clsss="demo">
 <p><span>P o n i e d z i a ł e k</span></p> 
</div>

Domyślnie element span interpretowany jest przez przeglądarki internetowe jako element liniowy (czyli w jednej linii może znaleźć się kilka elementów tego typu). Co go odróżnia od np. p lub div, które jako elementy blokowe domyślnie są same w jednej linii. W celu uzyskania naszego efektu musimy teraz zmienić właściwości jego na blokowe poprzez dodanie display:block;.

W następnym etapie musimy ustawić wielkość czcionki oraz szerokość pola. Bardzo istotne jest by szerokość była mniejsza od wielkości czcionki. Czyli jeżeli font-size:14px; to width:13px;. Mniejsza szerokość pola spowoduje, że litery będą wyświetlały się bezpośrednio pod sobą.

Dodatkowo można jeszcze wyśrodkować całą zawartość pola z pomocą text-align:center. Odległość między literami zyskamy dzięki właściwości line-height.

Dla dekoracji możemy jeszcze zmienić wszystkie litery na wielkie – oraz dodać ciekawe obramowanie.

Tak więc nasz kod CSS wyglądać będzie tak

.demo p span { 
 display: block; 
 float: left; 
 margin-right: 15px; 
 text-transform: uppercase; 
 font-size: 14px; 
 width: 13px; 
 text-align: center; 
 padding: 21px; 
 border: 1px solid #AAA; 
 line-height: 1.5em; 
 border-radius: 6px 0 6px 0; 
}

Teraz możecie przyjrzeć się gotowemu efektowi. W poniższym przykładzie dodałam jeszcze jedno słowo tak byście mogli lepiej poznać zasadę działania kodu.

See the Pen
Top down
by Aura (@Julka85)
on CodePen.

<div class="demo"> 
<p> 
<span>P o n i e d z i a ł e k</span> 
<span>W t o r e k</span> 
</p> 
</div>

 

Podobny efekt, ale bez użycia spacji można uzyskać dzięki właściwości word-wrap:break-word;.

Oczywiście istnieją inne metody na uzyskanie podobnego efektu jak np. wstawiania pomiędzy każdą literą znaku końca lini, jednak pokazane powyżej są dużo prostrze.

Dodatkowe tagi:
pionowy tekst czyli literki znajdują się pod sobą
Pionowo pisany tekst na twoją stronię internetową