Element HTML z pionowym tekstem

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.