Element HTML z pionowym tekstem

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:

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 linii, jednak pokazane powyżej są dużo prostsze.

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