Duża ozdobna pierwsza litera na początku tekstu z :first-letter

Dawniej skrybowie przy skryptoriach oddawali się sztuce kaligrafii oraz iluminacji pisząc i ozdabiając księgi między innymi wyróżniając (większym rozmiarem lub dekoracją) pierwsze litery fragmentu tekstu. Ten charakterystyczny rodzaj zdobienia nazywany był inicjałami. Skoro tu trafiłeś, jesteś pewnie ciekaw jak coś takiego odtworzyć na swojej stronie internetowej lub blogu.

Skrybowie w tym celu potrzebowali sporego arsenału narzędzi: pióra, pumeksu, kredy, kałamarzy, atramentu, noża deseczki do polerowania, pilników do ostrzenia piór, kamieni do rozrabiania farb, gęsich piór oraz rzadkiej wtedy sztuki pisania i wiedzy o „chemii” by wytwarzać atrament.

Ozdobna litera w czasach obecnych

Obecnie jest dużo prościej. Potrzebujesz tylko komputera lub laptopa oraz odrobiny wiedzy na temat kodu HTML i CSS.

Zanim przejdę do instrukcji jedna drobna dygresja (którą jak chcesz możesz pominąć). Z pewnością zauważyłeś, że w tytule ozdobna litera rozpoczynająca rozdział została przeze mnie określona jako duża litera a nie wielka. Pokrótce wyjaśnię dlaczego tak.

Mała, Wielka czy Duża litera?

Mimo, że w większości przypadków precyzyjne nazewnictwo nie jest konieczne, to warto je znać – może się przydać na przykład przy przekazywaniu specyfikacji programiście.

  • Tak wygląda mała litera – w
  • Tak wygląda wielka litera – W
  • A tak wygląda Duża ozdobna litera – W

Reasumując Duża litera, po prostu jest większa od pozostałych a wielka litera jest osobnym znakiem, stosowanym w języku polskim głównie do nazw własnych i na początku zdania.

Tak w przypadku, ozdobnej litery rozpoczynającej rozdział, jest ona jednocześnie duża i wielka. Po tym wstępie wraz z dygresją, przejdźmy do rzeczy.

Zmiana wyglądu pierwszej litery z użyciem dodatkowego znacznika

Ta metoda opiera się o dodanie dodatkowego elementu html, w obrębie którego znajdzie się pierwsza litera tekstu. Zazwyczaj używa się w tym celu znacznika <span></span>. Następnie należy taką literę ostylować.

  1. Można nadać style bezpośrednio w znaczniku (ale to miesza strukturę kodu html z css, czego lepiej unikać).
  2. Opcjonalnie można przy pomocy CSS określić, jak ma być stylowany pierwszy span w obrębie danego elementu nadrzędnego (względnie zalecane, ale wymaga obycia z CSS)
  3. Można nadać elementowi span odpowiednią klasę i nadać jej konkretne parametry (wyważone i proste rozwiązanie, co nie znaczy, że zawsze najlepsze).

Przykład zmiany wyglądu pierwszej litery z dodatkowym znacznikiem

Poniżej przykład zastosowania trzeciego sposobu z listy z poprzedniego punktu. Najpierw w kodzie HTML:

<p>
<span class="pierwszaLiterka" >L</span>itwo, Ojczyzno moja! ty jesteś jak zdrowie;
Ile cię trzeba cenić, ten tylko się dowie,
Kto cię stracił. Dziś piękność twą w całej ozdobie
Widzę i opisuję, bo tęsknię po tobie.
</p>

I pozostaje tylko uzupełnić kod CSS, by ozdobna litera na blogu rzeczywiście się wyróżniała:

. pierwszaLiterka {
	color: #ffdd00;
	font-size: 30px;
	line-height: 40px;
}

Ciekawe w tej metodzie jest to, że teoretycznie elementy span w obrębie pierwszej litery danych paragrafów można nadać z pomocą kodu JS lub PHP co może być przydatne, gdy chce się ostylować w ten sposób za pomocą dużych ozdobnych liter na początku tekstu wiele dokumentów. Jednak, jeśli kod jest w miarę uporządkowany nie ma takiej konieczności i można posłużyć się drugim sposobem z wykorzystaniem samego kodu CSS.

Zobacz także wpis: Jak uzyskać przekreślony tekst w HTML i CSS?

Zmiana wyglądu pierwszej litery z użyciem selektora :first-letter

Druga metoda opiera się o wykorzystanie tak zwanej pseudoklasy first-letter w CSS odwołującej się do pierwszej litery w tekście. Dla tego samego przypadku co wcześniej, nie ma konieczności dodawania elementu span dla pierwszej litery. Wystarczy trochę kodu CSS:

p:first-letter {
	color: #ffdd00;
	font-size: 30px;
	line-height: 40px;
}

Czy wielkość i wygląd liter ma wpływ na SEO

Zasadniczo wielkość i wygląd liter nie ma wpływu na SEO i pozycjonowanie stron. Poza pewnymi wyjątkami:

  • Tekst nie może być zbyt mały – wtedy Google może go uznać, albo za próbę manipulacji lub po prostu za nieczytelny na urządzeniach mobilnych.
  • Nie należy stosować takiego koloru fontu, który pokrywa się z kolorem tła – to może zostać potraktowane za manipulację a strona zostanie za to ukarana.

Wpływ stosowania Wielkich liter na pozycjonowanie

Oczywiście w SEO nic nie jest ostre. Okazuje się, że częściowy wpływ ma stosowanie wielkich liter (dlatego na początku przedstawiłem dygresję w różnicy wielkich a małych i dużych liter). Więcej w tym temacie można znaleźć na blogu: https://www.infule.com/do-capital-letters-affect-seo/ gdzie autor zaobserwował różnicę w liczbie znalezionych stron przez Google w zależności czy zapytanie z nazwą własną było pisane małymi czy wielkimi literami.

Pozwoliłem to sprawdzić na bazie języka polskiego i o ile cytowany autor zauważył, że Google coraz lepiej sobie z tym radzi, to poniżej prezentuję wyjątek od reguły:

Prezentacja wyników wyszukiwania dla frazy pawilon czterech kopuł (84)
Ilość wyników wyszukiwania dla frazy pawilon czterech kopuł (84)
Prezentacja wyników wyszukiwania dla frazy Pawilon Czterech Kopuł (80)
Ilość wyników wyszukiwania dla frazy Pawilon Czterech Kopuł (80)

Podsumowanie ozdabiania pierwszych liter na blogach i stronach

Mimo, że już nie ozdabia się tekstu pisanego aż tak bardzo jak kiedyś to w niektórych przypadkach wyróżnienie przy pomocy ozdobnej litery rozpoczynającej tekst może uatrakcyjnić wizualnie stronę. Grunt by nie popaść z takim ozdabianiem w przesadę, nawet jeśli nie ma to żadnego wpływu na pozycjonowanie witryny.

Z drugiej jednak strony Google naciska na to by dbać o UX i estetyczny wygląd strony, więc kto wie, może kiedyś ten aspekt nabierze większego znaczenia dla robotów. Pytanie, czy to sztucznie nauczone maszyny powinny oceniać co jest ładne a co nie oraz co jest sztuką a co kiczem?

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *